Archivo de la etiqueta: CSS

10 Utilidades CSS

10 Utilidades CSS que todo desarrollador y diseñador web deben conocer

Para cualquier diseñador o desarrollador web el tiempo que tome desarrollar un sitio web siempre es un gran tema, y nada mejor para optimizar el tiempo que valerse de herramientas que nos permitan automatizar ciertas tareas y así avanzar mucho más rápido en lo que sería crear un menú con css, crear sprites de imágenes, o revisar si los colores usados son los más adecuados.

La siguiente es una lista de 10 utilidades online para automatizar ciertas tareas que de otra forma nos demorarían, que nos permiten ahorrar tiempo y aprovecharlo solucionando otros problemas:

1. Color Schemer Designer – Paleta de colores


Esta es una muy buena utilidad, similar a Colorblender o a Color Palette Software, pero con la diferencia que es un poco más completo, pues muestra una paleta de colores circular, como el círculo cromático, donde se pueden seleccionar los colores cálidos o fríos, además activar la opción de visualizar los colores complementarios, análogos, ver el código hexadecimal, rgb, exportar la paleta de colores a un archivo de texto, y hasta ver un ejemplo de uso de los colores en un sitio web de pruebas. En pocas palabras, una excelente utilidad.

2. My Css Menu

Utilidad para crear completos menus en CSS y HTML puro. El sitio presenta varios estilos de menu prefabricados de los cuales, si te gustó uno, puedes personalizarlo a gusto.

3. CSS Layout Creator

Esta utilidad permite crear distintos layouts perfectamente válidos para montar nuestros diseños. Permite personalizar la plantilla totalmente, especificar el ancho total, el alto del header, del contenido, las sidebars y footer.

4. Color Picker

Utilidad que permite conocer de manera fácil y rápida los códigos  hexadecimal y RGB de un color en específico.

5. CSS Menu Maker

Con esta utilidad se pueden crear menus deslizantes, menus horizontales o verticales totalmente compatibles entre navegadores.

6. CSS Type Test

Esta es una excelente utilidad que nos permite visualizar en tiempo real el preformateo de un texto en especifico. Podemos definir la separación entre letras, separación entre palabras, altura de la línea, agregar negritas, cursivas, colores y alineaciones. Todo mediante un editor realmente simple, desde el cual podemos setear todas estas opciones y luego llevarnos el código para aplicarlo en nuestras plantillas.

7. EM Calculator – Calculadora de EM

Esta utilidad nos permite realizar diseños “escalables” y “accesibles”, porque nos permite modificar la unidad de medida de los textos de nuestra plantilla de pixeles a em; así, ingresando el tamaño de texto por defecto de nuestra plantilla nos devuelve su valor en unidades relativas a aquel valor que hemos especificado.

8. Image Color Palette – Paleta de colores en relacion a una imagen

Esta utilidad nos permite subir una imagen desde nuestro pc o especificar la url de una imagen, para que luego nos devuelva una paleta de colores que tiene relación con la imagen en cuestión.

9. Layout Generator


Con esta utilidad es posible generar layouts de 1, 2 o 3 columnas totalmente optimizados para la web 2.0, obteniendo el código en vivo para poder utilizarlo en lo que queramos.

10. CSS Layout Generator

Otra utilidad más para crear layouts de manera fácil y rápida. Permite generar plantillas de ancho fijo o variable, elegir entre dos modos de reset del css por defecto de los navegadores, especificar la cantidad de columnas y especificar el alto y la posicion del footer.

520 Grid System – Crea Páginas de Fans para Facebook

 

Los CSS Frameworks ya son bien conocidos en lo que se refiere al diseño de sitios web estándar, ya sea de 960 pixeles de ancho fijo o de ancho flexible; el asunto es que en la contemporaneidad las páginas de fans de Facebook son todo un mundo de posibilidades para tener rápidamente tu propio sitio web, o para promocionar tu marca, empresa, pyme, negocio de la esquina, y así un sin fin de posibilidades, las cuales no han quedado abandonadas, y los maqueteadores estrellas del mundo no se olvidaron y crearon el 520 Grid System, un framework destinado exclusivamente a sentar las bases para la creación de páginas de fans para facebook de manera rápida y fácil.

De que se trata 520 Grid System

Básicamente es un sistema que ha dividido los 520 pixeles de ancho que permite facebook en 12 columnas de 26px cada una con un margen de 16px. Pero, la pregunta que asalta es ¿porque 12 columnas? Y según explica el autor, es porque el número 12 da diversas posibilidades de combinaciones, de manera que se puedan tener contenedores de 2, 3, 4 o 6 columnas con anchos equivalentes, aunque si me preguntan, opino que puede ser la cantidad de columnas que se quiera, con tal que sume 12 todo bien.

El sistema incluye una plantilla para Photoshop, un html y css para que podamos crear nuestras propias páginas fácilmente.

En los siguientes enlaces se puede descargar y ver una demo del sistema:

» 520 Grid System Demo

» 520 Grid System – Página Oficial

Border-radius en Internet Explorer

El objetivo de todo diseñador web y el motivo por el cual luchamos cada día es que cada uno de nuestros diseños se vean excelentemente bien en la mayoría de lo navegadores comunmente usados, para como no todo puede ser perfecto, Micro$oft siempre tiene una cartita bajo la manga que nos complica la vida.

Hoy nos reunimos para lograr bordes redondeados usando “border-radius“, una de las propiedades estrellas implementadas en CSS3, y hacerlo de tal manera que funcione en IE, porque para los otros navegadores lo podemos lograr facilmente:

El CSS:

.borde-redondeado {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
}

EL HTML:

<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados con CSS3</div>

Ahora, hay 2 formas que conozco para lograr los bordes redondeados en IE y son la siguientes:

1. Usando un archivo HTC

Utilizando un archivo HTC creado por Remiz Rahnas de HTML Remix y que se puede bajar desde Google Code podremos lograr el efecto utilizando una hoja de estilos exclusiva para IE o agregando la propiedad dentro del css anterior.

Se debe cargar el archivo “border-radius.htc” en la misma carpeta donde se encuentre nuestra hoja de estilos.

En una hoja exclusiva para IE:

EL CSS:

.borde-redondeado {
	border-radius:10px;
	behavior: url(border-radius.htc);
}

EL HTML:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados</div>

o todo de una vez usando el código del primer ejemplo

El CSS:

.borde-redondeado-htc {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
	behavior: url(border-radius.htc); /* Para IE */
}

EL HTML:

<div class="borde-redondeado-htc">Este contenedor tiene sus bordes redondeados con CSS3 y magia para IE</div>

DEMO

2. Usando jQuery

También se puede lograr el efecto utilizando la librería jQuery, con un plugin llamado jQuery.Corner, el cual permite no solo bordes redondeados, sino que bordes mas complicados que no sé como describir.
EL JS:

$(".borde-redondeado-jquery").corner("10px");

EL HTML:

<script src="jquery-1.3.2.min.js"></script>
<script src="jquery.corner.js"></script>
<div class="borde-redondeado-jquery">Este contenedor tiene sus bordes redondeados con jQuery</div>

Conclusión

No usar IE…
…pero si se usa, con estos métodos que vimos podemos lograr bordes redondeados “cross-browser” lo que representa una ayuda y un alivio para los que somos extremistas del detalle y no nos conformamos con la técnica de “mejora progresiva” en CSS.

[adsense]

Navegadores que soportan los pseudo-elementos :before y :after

Los pseudo-selectores en css, como las pseudo-classes y pseudo-elementos, son elementos presentes en el css que permiten extender las posibilidades a la hora de aplicar tal o cual estilo a algún elemento html, por ejemplo, para poder aplicar un efecto a la primera letra de algún texto, primera línea, o para agregar alguna información o estilo delante o detrás de un elemento. Para esto es que existen los pseudo-elementos :first-letter, :first-line, :before y :after, y estos últimos son los que nos convocan en ésta oportunidad.

La verdad es que desde hace algún tiempo que tenía la duda sobre la compatibilidad y soporte que tenían algunos que se dicen navegadores para estos elementos, y justamente los de css-tricks han hecho una lista con los navegadores más utilizados y su soporte para éstos elementos, la cual revela que Chrome sigue siendo el mejor de los mejores e IE sigue siendo IE.

El estudio se basó en probar esta página en distintos navegadores, revisando si funcionaba como debía funcionar o no, y los resultados fueron los siguientes:

firefox 3.5 y superior Soportado
Bonos: Firefox 4 permite hacer transiciones entre ellos
3.0 e inferiores Soporte Parcial
No soporta position o float en los elementos.
safari Prueba: 4 y superiorAparentemente: 1.3 y superior Soportado
chrome Todas las Versiones Soportado
opera 6 y superior Soportado
internet explorer 9 y superior Soportado
8 Soporte Parcial
z-index no respetado, se necesita usar un doctype, y declarar el estado a:hover si se utiliza :hover:after ó :hover:before
7 e inferiores Adivine 😉

Niveles de Soporte

En conclusión, y tomando como guía el reporte estadístico de uso de los navegadores de abril de la w3schools se obtiene cerca de un 92% de soporte y compatibilidad para estos pseudo-elementos. Nada mal, si se piensa que Firefox y Chrome son, por ahora, los navegadores más utilizados.

Saludos.

Como lo vió en: CSS-TricksBrowser Support for :before/:after Pseudo Elements

Mostrar una hoja de estilos dependiendo de la version de IE

Internet Explorer es realmente un mundo aparte, y cuando se trata de maquetear un sitio no podemos dejar de pensar en aquellos usuarios que aún usan este navegador, pues si usamos transparencias o distintos efectos especiales en nuestras hojas de estilos IE no lo interpreta bien, y normalmente se suceden errores, en los cuales el sitio web se desarma.

Para solucionar estos problemas, la solución consiste en agregar al html unas líneas de codigo condicionales, que permiten indicarle al navegador según su version, que muestre la hoja de estilos definida.

Este es el codigo que permite identificar Internet Explorer 6, 7 y 8.

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="css/estilosie6.css">
<![endif]-->

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="css/estilosie7.css">
<![endif]-->

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="css/estilosie8.css">
<![endif]-->
Hola del Planeta en Youtube

Como crear un interruptor al estilo youtube’s hora del planeta

Hola del Planeta en Youtube

La hora del planeta se vive, y variados sitios han realizado campañas, videos, spots publicitarios, etc. haciendo referencia a la hora de la Tierra, así mismo he visto que los de  youtube no quisieron quedarse fuera y pusieron una ampolleta e interruptor junto a su logo, ¿cuál es la idea? “apagar” youtube, volverlo negro y acabar con todos esos pixeles blancos que electricidad consumen.

La idea es que en este post logremos realizar un efecto similar con nuestros propios sitios webs, de manera que para los próximos años/días de la hora de la tierra estemos preparados y podamos apagar nuestra web y aportar con un voltio de descanso al mundo.

Sigue leyendo

Limpiar Floats con Overflow

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

Sigue leyendo