Archivo de la categoría: 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.

Recomendaciones Oficiales CSS3 por la W3C

Dos nuevas recomendaciones oficiales CSS por la W3C – CSS3 Selectores y CSS3 Namespaces

La W3C ha publicado hace algunos días dos nuevos módulos CSS como recomendaciones oficiales, los cuales se convierten en el segundo y tercer módulo de CSS3.

Los módulos son el CSS Namespaces Module (Módulo de espacios de nombres de CSS) y Selectors Level 3 (Selectores de nivel 3), los cuales han seguido al lanzamiento del módulo anterior (el primero) “CSS3 Color Module” que ha sido publicado anteriormente éste año 2011.

El módulo de espacios de nombres cubre una necesidad que se planteó cuando se diseñó XHTML de manera que un documento en este lenguaje pudiera albergar marcado de otro —como por ejemplo SVG o MathML—, que no era otra que ofrecer la posibilidad de aplicar reglas de estilo a elementos de uno de los lenguajes en concreto.

Por su parte, la recomendación de selectores de nivel 3 define una serie de nuevos selectores que nos permiten afinar aún más los elementos a los que aplicar nuestras declaraciones, y que cuentan con un soporte bastante decente en los navegadore actuales.

Via Digitalcon.es

Generador de Botones con CSS3

El futuro es ahora, y el futuro es CSS3, lo cual significa que lo que hoy se lleva y donde debemos volcar todas nuestras energías y esfuerzos es embellecer la web usando CSS3, para lo cual ya tenemos varios navegadores que soportan todos sus atributos.

Hoy, para entretenernos en fin de semana, dejo una web en la cual se pueden crear botones totalmente a la moda, con gradientes, transiciones, deformaciones y todo lo que queramos gracias a la potencia de CSS3.

Dale un vistazo a cómo crear un botón animado usando totalmente CSS3.

 

Vía CSS Drive

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

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