17 Stunning Pure CSS3 Menu Techniques


17 Stunning Pure CSS3 Menu Techniques


Menu is probably the most important part on many websites. It’s sitting there for merely one single purpose: easy for you to navigate through all the pages. Before CSS3, the background images of each menu item can bring you a heck load of pain, as well as the javascript powered drop-down items and sub-sub menu . Now we are able to create stunning menus only using pure CSS, even including awesome animations. The following pure CSS3 menu techniques and tutorials are for you to experiment and get a hang of it. Let’s get started.

More CSS Techniques from Previous Articles: 

Pure CSS Drop-down Menu

Pure CSS Drop down Menu

 

Stunning Menu in CSS3

Stunning Menu in CSS3

 

Code a Responsive Navigation Menu

Code a Responsive Navigation Menu

Leer más “17 Stunning Pure CSS3 Menu Techniques”

10 buenas practicas para escribir código HTML


Bitelia

La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5
<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas Leer más “10 buenas practicas para escribir código HTML”

Seis sencillas “buenas prácticas” cuando usemos HTML5


Txema Rodríguez  | genbetadev.com

 

Quizás muchos de vosotros os estéis iniciando en HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Usar un generador de plantillas básicas

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son SwitchToHTML5Shikiryu generator. Sin olvidarnos de el excelenteHTML5 Boilerplate.

Tener siempre a mano un cheat sheet de HTML5

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags,event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos Leer más “Seis sencillas “buenas prácticas” cuando usemos HTML5″

Timeline del HTML5 #infografia #infographic #internet |


 

TICs y Formación

Infografía con el Timeline del HTML5.

 

Estándares web | por Blas Hernández


http://www.manualdeestilo.com

 

Desde el inicio de internet hasta nuestros días la web ha sufrido una evolución constante y frenética que dificulta el proceso de maquetación debido a la gran cantidad de formatos y tecnologías existentes, que presentan incompatibilidades de reproducción en determinados soportes y navegadores web.

World Wide Web Consortium

Actualmente, para evitar este problema existe el Consorcio World Wide Web (W3C) en el que se trabaja en la creación de estándares web que unifiquen la dirección del desarrollo web para conseguir un acceso universal al contenido.

 

 


Cuáles son los estándares actuales más utilizados ? (…) Leer más “Estándares web | por Blas Hernández”

8 cosas que deberíamos comprobar antes de lanzar un sitio web


http://bitelia.com

Cuando desarrollamos sitios web ponemos gran empeño en generar un bonito diseño y nos preocupamos por generar una estructura de navegación fácil de entender y utilizar para los usuarios, pero muchas veces descuidamos algunos detalles importantes, sobre todo a la hora de poner nuestro sitio web en línea.

Personalmente, siempre tengo a la mano estos detalles en un checklist y me preocupo de aplicarlos a cada proyecto. Tomará algunos minutos extra llevar a cabo todas las comprobaciones necesarias, pero al final todo valdrá la pena.

1. Validar el código HTML

Validar el código HTML de nuestro sitio web es una tarea muy simple que nos ayudará a evitar dolores de cabeza. Tener código HTML válido es sinónimo de que tendremos un sitio de calidad, que se ve correctamente en cualquier navegador moderno y que será mucho más atractivo para los buscadores a la hora de indexar.

W3C pone a nuestra disposición el Markup Validation Service, una excelente herramienta para llevar a cabo esta simple tarea. También existen extensiones para los distintos navegadores para automatizar el proceso de validación.

2. Realizar pruebas en múltiples navegadores

Luego de validar el código de nuestro sitio podemos comprobar que efectivamente luce genial y funciona correctamente desde cualquier navegador, de no ser así, tenemos la oportunidad de realizar los ajustes necesarios.

Aunque por lo general solemos tener la última versión de los navegadores más importantes instalados en nuestras máquinas, es casi imposible tener todas las versiones de todos los navegadores para ejecutar esta comprobación. Por fortuna existen herramientas comoBrowsershots para hacernos el trabajo mucho más fácil.

3. Comprobar navegación móvil

Cada vez es más común navegar por la red utilizando teléfonos móviles y tablets, lo que se traduce en dispositivos con resoluciones distintas y pantallas de diferentes tamaños que al final resultan en miles de maneras distintas de visualizar una página web.

En la actualidad es muy frecuente encontrar sitios con versiones especialmente diseñadas para su visualización desde dispositivos móviles. Para conocer si el nuestro se adapta a las exigencias del mundo móvil podemos utilizar W3C mobileOK Checker. Leer más “8 cosas que deberíamos comprobar antes de lanzar un sitio web”

HTML5 – code example of drag and drop on a web page


ibm.com/developerworks

I have recently attended a couple of analysts meetings where the subject of HTML5 was a recurring theme.  With my curiosity peeked, I decided to explore what HTML5 has to offer today.  Of particular interest is the drag and drop (d&d) API… as this has always been the holy grail of early HTML practitioners.  What I discovered was very cool… as d&d is now a simple matter of implementing a few effortless method calls.

For my example of d&d, I created a simple network configuration demo that illustrates an administrator UI to provision resources.  You can drag the example resources between zones, add resources to a zone, or simply remove a resource that is no longer required.  I kept my example basic for educational purposes, but as you can see, one could develop a full blown network administration tool using drag & drop as a central element of the user interface.

Here is my example, give it a test drive (requires Firefox 3.5 or greater):

 https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/d_and_d.html?lang=en 

The key methods to implement d&d are basic and easily implemented as follows: Leer más “HTML5 – code example of drag and drop on a web page”

Cinco sitios para descargar imágenes vectoriales libres y gratis


avatar
Iván Lasso  | genbeta.com

 

Las imágenes vectoriales prediseñadas son un excelente recurso del que podemos echar mano ya sea para acompañar cualquier texto, insertarlas en una presentación o, sobre todo, utilizarlas como base para realizar nuevas imágenes, ya sea modificándolas o combinando unas con otras.

A continuación, vamos a ver cinco sitios web donde podemos descargar imágenes vectoriales gratis, pero con una peculiaridad: todas las imágenes están en dominio público o con licencias que permiten su uso y modificación con propósitos comerciales, de manera que no es necesario pagar por utilizarlas en un proyecto de cualquier tipo (aunque no dejéis de revisar las condiciones de uso para tenerlo más claro).

Open Clipart Library: imágenes de todo tipo en formato SVG

Si solo tuviese que elegir un recurso para imágenes vectoriales, sin duda sería la Open Clipart Library. Con una colección de imágenes en formato SVG que no deja de crecer, allí podemos obtener todo tipo de dibujos sobre los más variados temas subidos por los usuarios. En cuanto a la calidad, si bien resulta variable, en promedio yo diría que más bien es tirando a alta.

Si bien todas las imágenes están disponibles en SVG, también podemos bajarlas en formato PNGindicando la resolución con que queremos descargarla. También podemos editarlas online, para lo cual el sitio nos redirige al editor ImageBot, donde nos cargará como bitmap la imagen que vamos a modificar.

Enlace | Open Clipart Library

 

Clker: otra gran biblioteca de todo tipo de imágenes

Clker es un sitio muy similar en contenido a la Open Clipart Library. Como ésta, las imágenes son subidas por los propios creadores de las mismas, los cuales son tanto profesionales como aficionados. Igualmente, la calidad es variable pero podemos encontrar trabajos de bastante calidad.

Sin embargo, Clker se distingue por contar con herramientas adicionales que nos pueden resultar de utilidad en algún momento. Dispone de un editor vectorial online para crear dibujos que se guardarán dentro del sitio y también cuenta con una aplicación para vectorizar imágenes, aunque reconozco que ésta no la he llegado a probar pues es necesario tener una cuenta para poder usarla.

Las imágenes del sitio estás disponibles en los formatos PNG (en tres resoluciones diferentes) y SVG. En cada una, se nos proporciona también un código por si queremos insertarla en nuestro sitio sin necesidad de subirla.

Enlace | Clker

All Silhouettes: sólo siluetas Leer más “Cinco sitios para descargar imágenes vectoriales libres y gratis”

6 novedades para CSS3 que puedes implementar hoy | CSSBlog ES


Via Scoop.ithuman being in – perfección

Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas son muy útiles y sencillas, pero ¿están soportadas por la mayoría de los navegadores?. En esta entrada os mostraré una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran compatibilidad con los navegadores. Todas ellas las hemos explicado anteriormente en el blog, así que solo recopilaré los enlaces…

Via www.cssblog.es

Guía Gratuita en español para Crear Páginas Web desde cero | GeeksRoom, nunca es tarde para comenzar


por Carlos Soler | http://geeksroom.com

 

En Desarrollo Web han creado una guía para empezar a hacer páginas Web sin experiencia previa, desde 0. En esta guía encontrarás manuales y vídeo tutoriales. Leer más “Guía Gratuita en español para Crear Páginas Web desde cero | GeeksRoom, nunca es tarde para comenzar”

PSD to HTML Review: HTML Angels

Recently I decided to design my own website after using premade html templates & wordpress themes. After the design process was all complete came the daunting task of choosing a PSD to HTML company.

I decided to go with a company called HTML Angels. They got my attention more than other companies due to their beautiful website, creative name, easy to understand order for and reasonable prices. Their portfolio really stood out, with the exceptional design & hand coding.

I was after an HTML page, with a slideshow for my homepage and a WordPress Theme for my blog.

HTML
HTML Angels coded up 3 HTML pages for me, including the wordpress theme pages which were a pleasant surprise, and delivered them one day early. They asked me to check the files and see if everything was ok, and said they had included some extra CSS3 code to make the loading faster – which I appreciated. I tested the HTML pages in various browsers and found no problems, and was very happy with the results.



Recently I decided to design my own website after using premade html templates & wordpress themes. After the design process was all complete came the daunting task of choosing a PSD to HTML company.

I decided to go with a company called HTML Angels. They got my attention more than other companies due to their beautiful website, creative name, easy to understand order for and reasonable prices. Their portfolio really stood out, with the exceptional design & hand coding.

I was after an HTML page, with a slideshow for my homepage and a WordPress Theme for my blog.

HTML

HTML Angels coded up 3 HTML pages for me, including the wordpress theme pages which were a pleasant surprise, and delivered them one day early. They asked me to check the files and see if everything was ok, and said they had included some extra CSS3 code to make the loading faster – which I appreciated. I tested the HTML pages in various browsers and found no problems, and was very happy with the results.

WordPress Theme Leer más “PSD to HTML Review: HTML Angels”

What is HTML5? (infographic) & Ultimate HTML5 Cheatsheet

HTML5 is a language for structuring and presenting content for the World Wide Web.Basically, HTML5 is the advanced version of HTML.In particular, HTML5 adds many new syntactical features. These include the , , and elements, as well as the integration of SVG content.

Today we want to share 2 great HTML5 resources.The first one is created by Focus.com which is a HTML5 infographic showing Browser compatibility,HTML readiness and comparison with Flash etc. and
The second one is HTML5 cheatsheet created by Techking.



http://designbeep.com/2011/05/23/what-is-html5-infographic-ultimate-html5-cheatsheet/

HTML5 is a language for structuring and presenting content for the World Wide Web.Basically, HTML5 is the advanced version of HTML.In particular, HTML5 adds many new syntactical features. These include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content.

Today we want to share 2 great HTML5 resources.The first one is created by Focus.com which is a HTML5 infographic showing Browser compatibility,HTML readiness and comparison with Flash etc. and
The second one is HTML5 cheatsheet created by Techking.

What is HTML5? Leer más “What is HTML5? (infographic) & Ultimate HTML5 Cheatsheet”

Transparent CSS Sprites

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.


By Trevor Morris
http://www.smashingmagazine.com/2010/10/31/transparent-css-sprites/

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.

Leer más “Transparent CSS Sprites”

The Easiest Way to Create Vertical Text with CSS


The Easiest Way to Create Vertical Text with CSS

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we’ll go over today!

*Note – please refer to “Method 6″ below for more details about proper usage.

Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

 

Method 1: <br> Tags

So, one possible (though not recommended) way to achieve vertical text is to add <br> tags after each letter.

  1. <h1>
  2. N <br />E <br />T <br />T <br />U <br />T <br />S
  3. </h1>
<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>
View a Demo

Don’t use this method. It’s lame and sloppy.


Method 2: Static Wrapping

With this method, we wrap each letter in a span, and then set its display to block within our CSS.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>Vertical Text</title>
  6. <style>
  7. h1 span { display: block; }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>
  12. <span> N </span>
  13. <span> E </span>
  14. <span> T </span>
  15. <span> T </span>
  16. <span> U </span>
  17. <span> T </span>
  18. <span> S </span>
  19. </h1>
  20. </body>
  21. </html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html>
View Demo

The problem with this solution — other than the frightening mark-up — is that it’s a manual process. If the text is generated dynamically from a CMS, you’re out of luck. Don’t use this method. Leer más “The Easiest Way to Create Vertical Text with CSS”

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Final Product What You’ll Be Creating
Download Source Files
Demo View It Online

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

[Más…]
Step 1: Building the Navigation Bar

Let’s begin with a basic menu, built with an unordered list and some basic CSS styling.
view plaincopy to clipboardprint?

1.

Creating the Menu Container

We’ll now apply some basic CSS styling. For the menu container, we define a fixed width that we center by setting the left and right margins to “auto”.
view plaincopy to clipboardprint?

1. #menu {
2. list-style:none;
3. width:940px;
4. margin:30px auto 0px auto;
5. height:43px;
6. padding:0px 20px 0px 20px;
7. }

#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}

Now, let’s see how we can improve it with some CSS3 features. We need to use different syntaxes for Webkit-based browsers (like Safari) and for Mozilla-based browsers (like Firefox).

For rounded corners, the syntax will be :
view plaincopy to clipboardprint?

1. -moz-border-radius: 10px
2. -webkit-border-radius: 10px;
3. border-radius: 10px;

-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;

For the background, we’ll use gradients and a fallback color for older browsers. To keep consistency when choosing colors, there is an awesome tool called Facade that helps you find lighter and darker tones of a basic color.
view plaincopy to clipboardprint?

1. background: #014464;
2. background: -moz-linear-gradient(top, #0272a7, #013953);
3. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.

We can now add a darker border and polish the design with a “fake” inset border created with the “box-shadow” feature. The syntax is the same for all compatible browsers: the first value is the horizontal offset, the second one is the vertical offset, the third one is the blur radius (a small value makes it sharper; it will be 1 pixel in our example). We set all offsets to 0 so the blur value will create a uniform light border :


Final Product What You’ll Be Creating

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Leer más “How to Build a Kick-Butt CSS3 Mega Drop-Down Menu”