Alguna vez te has preguntado como hacen los diseñadores para que sus diseños se vean tan bien, tan consistentes visualmente. La mayoría de ellos utilizan Grid Frameworks de CSS, no todos.

Estos son sistemas de columnas (Grids) con los que puedes diseñar más fácil tu sitio web, darles una mejor estructura. Algunos traen, además del sistema de columnas, estilos en CSS ya predefinidos para que no tengamos que codificarlos nosotros mismos, estilos para formularios, tipografías, tablas, dispositivos móviles, etc.

Con estos frameworks para CSS puede alcanzar una cohesión visual para tus diseños, reducir los errores en tu CSS, alcanzar una buena compatibilidad con todos los navegadores y dispositivos móviles y te ayuda a reducir el esfuerzo de crear una plantilla nueva para tu diseño web.

Para ahorrarte la tarea de encontrar un buen framework para CSS aquí te traigo 35 grid frameworks para CSS con los que diseñar sitios web se te hará mucho más fácil.

1. Less Framework

2. Grid

3. inuit.css

4. Baseline

5. Gravity

6. Columnal

7. Perkins CSS3 LESS Framework

8. 520 Grid System

9. Gridless

10. The Square Grid

11. Fluid Grid System

12. Frameless

13. Fluid 960 Grid System

14. Logic CSS

15. Blueprint

16. CSS Boilerplate

17. The 1kb CSS Grid

18. YAML CSS Framework

19. Easy front-end framework

20. SenCSs

21. The Simpler Grid

22. Elastic CSS Framework

23. FEM CSS Framework

24. BlueTrip CSS Framework

25. Not Just a Grid

26. The Golden Grid

27. The 1140px CSS Grid System

28. Golden Grid System

29. 960 Grid System

30. The Semantic Grid System

31. Magazine Grid

32. SimplerGrid

33. BluCSS

34. Cabin CSS Framework

35. Toast

Art

Este es un artículo como invitada de Paula López, blogger de Basekit, un sitio que te ayuda a crear fácilmente tu página web.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Normalmente las empresas adaptan sus logotipos ya existentes a sus páginas web, así como al resto de soportes en los que se plasma su comunicación (catálogos, merchandising, etc). Pero ¿qué pasa si nuestra empresa es sólo nuestra página web? ¿Hemos de dar los mismos pasos para el diseño de nuestro logo que para el de un logo convencional? ¿Y si no sabemos diseñar?

Para las dos primeras preguntas la respuesta sería sí y no. Hay pasos indispensables a la hora de crear cualquier logotipo, sin importar el soporte en el que va a ser visualizado, pero hay muchos otros que deben ser considerados de manera independiente, especialmente si esto se vincula con la respuesta a la pregunta 3: no sabemos diseñar. Tal vez no nos gusta, no nos interesa el diseño o simplemente no se nos da bien.

A continuación te dejo 10 consejos para la creación de un logotipo para una página web pensando en estas personas que precisan su logo pero no disponen ni de las herramientas ni de los conocimientos adecuados para hacerlo de un modo profesional.

1. Hacer un boceto a mano es esencial

Antes de empezar a “montar” nuestro logo con la herramienta de diseño de la que dispongamos, es esencial hacer un boceto a mano para plasmar exactamente qué es lo que queremos. Teniendo muy claro el diseño de nuestro logo será mucho más sencillo poder llevarlo a cabo en el ordenador.

2. Disponer de un programa de dibujo en el ordenador

Photoshop o Illustrator serían los ideales, pero sin saber diseñar pueden parecer complejos. Hay muchos muy sencillos que, aunque no nos convertirán en artistas, podrán ayudarnos en nuestra tarea de diseñar un logo para nuestra web.

3. Trabajar con un editor web

Si hemos creado o estamos creando nuestra página web en un editor HTML, esta herramienta nos permitirá crear nuestro logo in situ, en la misma página, ya que podremos arrastrar ilustraciones propias y textos para crear nuestro logo directamente.

4. Utilizar fuentes “ decentes”

Por favor, nada de Comic Sans. En nuestro ordenador tenemos infinidad de fuentes que pueden encajar a la perfección con el estilo de nuestra página web. Si ninguna nos convence, podemos descargar fuentes gratuitas de Internet. Es aconsejable, además, no utilizar más de dos fuentes en un mismo logotipo.

5. Crear el logo pensando en nuestra audiencia

Son ellos quienes van a verlo (y a juzgarlo) cuando entren en nuestra página web. Lo ideal es que el logo refleje quiénes somos y de qué trata nuestra página, pero no de una forma absolutamente literal.

6. Sencillez, sencillez y sencillez

Un diseño de logotipo complicado no sólo nos creará problemas a la hora de reproducirlo, y más si no tenemos los conocimientos adecuados, sino que además, posiblemente hará que nuestra audiencia no lo entienda.

7. Elegir los colores adecuados

El uso adecuado del color es básico en el diseño de cualquier logotipo, especialmente por la interpretación psicológica que tienen los colores. No es aconsejable utilizar más de dos o tres colores. De esta forma, por mucho que el rojo, por ejemplo, sea nuestro color preferido, si no encaja con el resto del diseño de nuestra web ni es un color que se relacione con nuestro producto o público objetivo, mejor dejarlo a un lado.

8. Optar por un tamaño y una resolución óptimos

No hay un tamaño ni una resolución establecidos para todos los logotipos para páginas web. Depende de nosotros y de las características de nuestra página. Es aconsejable, en este punto, tener en cuenta si nuestra página va a ser vista, principalmente, en monitores con resolución de 1024

El HTML5 ha sido un tema realmente interesante, que ha tomado mucha importancia en los últimos años en el desarrollo web. Ahora la mayoría de los navegadores modernos (Safari, Chrome, Firefox, IE10 y dispositivos móviles) soportan la mayoría de las características de este nuevo estándar web, aún cuando no está completa todavía.

Para ayudarte a hacer que tu migración a HTML5 sea más rápida y fácil, aquí he recopilado 23 sitios web útiles o herramientas que te ayudarán a entender y a empezar con HTML5.

1. HTML5 Boilerplate

Este sitio web te proporciona una plantilla base de HTML/CSS/JS con las últimas normas del HTML5, CSS3, normalización del CSS, JavaScript. Este sitio te proporciona varios tips y técnicas para empezar correctamente con el uso del HTML5.

2. Modernizr

Esta es una librería de JavaScript que te ayuda a implementar las nuevas ventajas del HTML5 y del CSS3.

3. Sprite.js

Sprite.js es una librería javascript que te permite realizar animaciones en tu sitio web sin la necesidad de Flash, utilizando la característica Canvas de HTML5.

4. Video.js

Esta es una librería en Javascript para reproducir video en HTML5 y que se vea igualmente en todos los navegadores. Trae también un reproductor en flash para los navegadores que no soporten la etiqueta  

5. Audio.js

Audio.js es una librería en Javascript con las misma características de Video.js, pero para la etiqueta

6. Lime.js

Este es un framework completo en Javascript que te ayudará a realizar juegos para escritorio, web o dispositivos móviles con la ayuda de HTML5.

7. 52framework

Framework que te ayuda a utilizar lo último de HTML5, CSS3 y Javascript.

8. HTML5 Reset

Framework para HTML5 que acumula las mejores prácticas y técnicas para empezar con este nuevo estándar.

9. G5 Framework

Otro framework para HTML5 que te sirve para comenzar con un nuevo sitio web.

10. JoApp

Este es un framework para desarrollar aplicaciones móviles utilizando HTML5.

11. PressWork

Framework en HTML5 que puedes utilizar para crear temas de WordPress.

12. Bones

Bones es un framework de HTML5 optimizado para crear nuevos temas para WordPress.

13. Roots

Roots es otro framework de HTML5 para temas en WordPress.

14. Reformed

Este sitio te ayudará a crear formularios para tu sitio web con las nuevas características del HTML5.

15. SwitchToHTML5

Este sitio te proporcionará algunas opciones para que tu puedas generar una plantilla base de HTML5 a tu gusto.

16. HTML5 Template Generator

Este sitio generará una plantilla base en HTML5 para que empieces a crear tu sitio web.

17. Initializr

Initilizr es un sitio que genera plantillas para HTML5. Te ofrece varias posibilidades: Descargar la plantilla por defecto, personalizar un poco tu plantilla o personalizar completamente todas las opciones de la plantilla.

18. HTML5 Visual Cheat Sheet

Este documento ofrece un vista simplificada y explicada de las nuevas características de HTML5.

19. HTML5 Pocket Book

Sitio web que te enseña lo más básico de las nuevas características de HTML5.

20. HTML5 Canvas Cheat Sheet

Este sitio te ofrece un documento con todo lo que necesitas saber para poder utilizar la función Canvas de HTML5.

21. Aloha Editor

Este sitio te proporciona un editor WYSIWYG completamente en HTML% para que lo incluyas en tu sitio web.

22. Deck.js

Con Deck.js podrás crear presentaciones como las de PowerPoint o Keynote pero totalmente realizadas en HTML5.

23. Wallaby

Con esta utilidad de Adobe podrás convertir tus animaciones en Flash (FLA) a HTML5.

Art

El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños.

Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web.

Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

Demostración

Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Demostración

Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:

h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}

Demostración

Rotar una imagen

Este Código CSS te permite rotar una imagen los grados que gustes:

img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}

Demostración

Mover 1px el enlace al hacer clic

Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:

a:active {
position: relative;
top: 1px;
}

Demostración

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):

/* Smartphones (portrait y landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}
Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
Hacer que el cursor se vuelva un apuntador de enlace

Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
Quitar la linea de color que rodea los elementos input

Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}
Crear un efecto giratorio y de zoom en las imágenes

Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Demostración

Hacks de CSS dependiendo del navegador

Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:

/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 – 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 — actúa como !important */
#veintesiete { color: blue !ie; }
Animar una lista de enlaces

Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:

#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
padding-left: 10px;
}

Demostración

Transparencia / Opacidad en todos los navegadores

Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: ”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}
Estilo para enlaces externos

Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Demostración

Estilo del enlace dependiendo de una palabra predefinida

Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:

a[href*="trazos"] {
color: #39486c;
}

Demostración

Estilo del enlace dependiendo de extensión del archivo enlazado

Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:

a[href$=".jpg"] {
color: red;
}

Demostración

Utilizar fuentes de Google

Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:

Debes agregar el código que te genera la página de Webfonts entre las etiquetas y :

y luego este en el archivo de tus estilos CSS:

h1 {
font-family: 'Ubuntu', sans-serif;
}

Demostración

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve:

body {
background: #222222;
color: #131313;
font-size: 100px;
}

p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;

}

Demostración

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Solo debes poner esto en donde quieras que aparezcan los tabs: