css – vloox

Grid framework CSS de 1 línea

La idea de 1 line CSS Grid Framework es poder crear un layout CSS basado en grillas con solo una línea de código CSS: .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Este sistema parte del principio de que cada columna puede dividirse en 2, por lo que pueden hacerse layouts de 2, 4, 8, columnas. Obteniendo este resultado: Funciona con px, em y porcentajes. Es compatible con todos los navagadores, hasta El autor no lo recomienda para producción, si no más bien como una demostración de lo que puede hacerse con solo una línea de CSS. Otra opción un poco más completa pero ultra pequeña, del mismo autor, es Malo, un  framework CSS de 8 líneas. Y para el que lo anterior no le alcance tiene Emastic y The Golden Grid. Por mi parte, hice un layout fluido clásico de blog de 3 columnas: header, contenido, dos sidebars y footer. En conclusión,  1 line CSS Grid Framework es muy fácil de usar y puede servir para crear sistemas de grillas simples.
Leer mas »

Diferencias entre los tags b, i, strong y em

Ya se discutió (y bien) este tema en otros lugares, pero a raíz de un post en Kabytes y viendo que no está muy clara cual es la diferencia entre los tags  <b> vs. <strong> y <i> vs. <em> voy a tratar de explicarla. Aclaro que ésto es de interés solo para los Talibanes de la Accesibilidad y los Maestros del SEO. Supongamos que quiero poner un texto en negrita, ¿utilizo <b> o <strong>? La respuesta es ninguno de los dos, hay que usar la propiedad CSS font-weight. Veamos: El código XHTML: <p>Este texto lo quiero en negrita</p> y el código CSS correspondiente: p { font-weight: bold; } El caso de la itálica es similar, debemos usar la propiedad CSS font-style: p { font-style: italic; } Entonces, ¿para qué sirven <i> y <b>? Estos tags sirven para dar formato, pero como enseña el Tao del CSS el formato debe darse a través de las hojas de estilo, por lo que en su lugar hay que usar las propiedades CSS font-style y font-weight. En cuanto a <em> (emphasis) y <strong> (strong emphasis) son elementos estructurales que deben utilizarse en sentido semántico, da la casualidad (o no) que por defecto los navegadores los muestran, respectivamente, como itálica y negrita. Un Talibán de la Accesibilidad nos dirá que un texto con em será leído por un lector de pantalla con más énfasis, y un Maestro del SEO dirá que si ponemos strong a las keywords, Google indexará nuestra página en primer lugar. Espero que se haya entendido la diferencia. Yo por mi parte no hago mucho caso de todo lo anterior y uso lo que más cómodo me queda.
Leer mas »

Tutoriales y consejos para diseñadores web

8 Common Sense Tips for Creating Clean Designs: No hace falta haber estudiado diseño para crear buenos websites, ¡solo hay que usar el sentido común! How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds: Cómo un layout simple puede transformarse agregando imágenes y colores, resultando en un diseño profesional. Five Looks, One Layout: How to Develop a Library of Web Design Styles at Your Fingertips: Cómo desarrollar cinco estilos distintos para un único layout. Styling Your Search Form with CSS: Agregando estilo al form de búsqueda con CSS. 5 Ways to Spice up Your Images with CSS: 5 maneras para condimentar tus imágenes con CSS. Liquid + Fixed Two Column Lists with CSS: Lista de dos columnas, una fluída y la otra fija, con CSS.
Leer mas »

Layouts CSS y XHTML

Hay muchos sitios con layouts CSS, pero Code Sucks es el mejor que he visto. El código XHTML y CSS es claro, simple y muy fácil de entender para modificarlo. Hay 95 diseños distintos para elegir: 1 columna, 2 columnas, 3 columnas, etc. Los layouts de Code Sucks son perfectos para usar como base en el diseño de templates para CMS.
Leer mas »

Fuentes web seguras

Al momento de diseñar una página web es importante elegir fuentes que estén instaladas en todos los sistemas operativos, ya que si no están disponibles el navegador mostrará la fuente por defecto. La siguiente tabla muestra las fuentes más comunes y con que sistemas operativos vienen. Son consideradas fuentes web seguras: Genérica Fuente Windows 9x/2K/XP Windows Vista Mac Classic Mac OS X Linux Unix serif Cambria Constantia Times New Roman Times Georgia sans-serif Andale Mono Arial Arial Black Calibri Candara Century Gothic Corbel Helvetica Impact Trebuchet MS Verdana cursive Comic Sans MS monospace Consolas Courier New Courier La marca verde indica fuentes muy comunes, la amarilla indica fuentes no tan comunes pero generalmente aceptadas como fuentes web seguras. Para mayor compatibilidad es conveniente indicar fuentes alternativas. Por ejemplo: #fuente { font-family: Trebuchet, Verdana, Helvetica, sans-serif; } Si la fuente primaria (Trebuchet) no está instalada el navegador usará la siguiente (Verdana), y así sucesivamente. Se indica la fuente genérica al final por si ninguna de las anteriores está instalada (en el ejemplo se mostrará la fuente sans-serif genérica). Fuente: Dustin Brewer
Leer mas »