LESS dispone de página en español.

Saca partido al popular preprocesador CSS ahora en español. 

Tal y como indica el título de este post, la página de LESS tiene una versión en español gracias al trabajo de traducción de Adrián Matellanes. Como todos sabemos LESS es un preprocesador dinámico de hojas de estilo que multiplica las posibilidades de un desarrollador a la hora de personalizar su proyecto web mediante el uso de variables, mixins, operadores y funciones.
Creado inicialmente por Alexis Sellier, LESS es actualmente mantenido y desarrollado por su propio equipo de trabajo logrando con cada nueva versión (actualmente 1.4) una mejora de este preprocesador CSS. Pese a la indudables ventajas de su uso a la hora de ahorrarnos muchas tareas repetitivas codeando CSS o de crear una estructura más limpia y fácil de mantener, su aprendizaje puede resultar algo complicado para los usuarios menos experimentados, es por ello que gracias al trabajo de la comunidad se ha pretendido facilitar su aprendizaje con la traducción a diferentes idiomas (además del inglés) como alemán, ruso, polaco, indonesio, portugués y también el español.
Usuarios hispanoparlantes interesados en mejorar la curva de aprendizaje a la hora de dominar LESS pueden acceder a la página oficial en español desde lesscss.org.

Galería de Patrones CSS3.

Lea Verou y un interesante recurso para mejorar nuestros diseños web.

CSS3 Patterns Gallery es una excelente galería de patrones realizados enteramente en CSS a cargo de @LeaVerou una de las diseñadoras con más prestifio mundial en el mundo del CSS3.
Ideales para optimizar al máximo un site este repositorio de recursos gratuitos listos para ser usados en cualquier proyecto web y prescindir de la utilización de imágenes para construir fondos.
Pese a la excelencia del trabajo realizado y el amplio soporte actual por los navegadores hay que tener en cuenta las limitaciones en versiones anteriores a Firefox 3.6, Safari 5.1, Opera 11.10+ o IE10.
Su uso es tan sencillo como acceder al site, buscar el patrón que mejor se adapta a nuestros intereses y seleccionarlo para obtener el código listo para pegar en nuestro proyecto.
Como complemento de lo anterior también es posible encontrar SVG Patterns Gallery un repostorio de patterns en formato SVG, listo para utilizar por cualquier diseñador.
CSS3 Patterns Gallery está disponible de forma completamente gratuita desde lea.verou.me.

MixItUp crea listas de contenidos en tu website.

Filtra, ordena y añade efectos a una lista de elementos con este interesante plugin jQuery.

MixItUp permite gracias a  jQuery y también a CSS3 crear paneles de contenidos que nos permitan ordenarlos por categoría, según nombre, de forma aleatoria….
Si bien con jQuery decidimos qué elementos deseamos mostrar u ocultar en nuestra lista de elementos, las transiciones CSS3 se utilizan para poderlos animar. El plugin trabaja bien con diseños Responsive Web Design, es ligero y funciona bastante rápido.
Este plugin jQuery es completamente funcional en cualquier navegador que soporte CSS3, entre los más destacados incluimos Firefox 4 o superior, Chrome 4 o superior, Opera 10.5 o superior, Safari 3.1 o superior y también Internet Explorer 10 o superior.
MixItUp es un proyecto libre que es posible usar en proyectos personales y comerciales de forma completamente gratuita. 

Generador de gradientes de CSS3.

Herramienta para crear gradientes de la forma más sencilla.

CSS3 Gradient Generator es un sencillo generador online de gradientes CSS con el que ayudarnos en nuestro trabajo como diseñadores web y que resultará interesante para tenerlo siempre a mano desde nuestros favoritos.
Su manejo no representa ninguna dificultad gracias a su sencilla interfaz, simplemente especifica los parámetros de color, dirección y formato, y el sistema genera el código de la gradiente de forma automática.
CSS3 Gradient Generator es una herramienta gratuita que no requiere de registro previo para su uso y que nos recuerda a la utilidad desarrollada por los creadores de la extensión ColorZilla.

Araudi: Indice de Recursos CSS.

Plataforma donde encontrar múltiples ejemplos de ayuda para nuestros propios proyectos web.

¿Buscas un indice de recursos CSS que facilite tu trabajo como diseñador web?
Araudi.net muestra una importante colección de ejemplos acerca de cómo llevar a cabo columnas equilibradas, cajas height 100%, fondos de página elástico deformable, cambio de texto al pasar el ratón, esquinas redondeadas sin imagen, botón de menú activo con CSS, menús desplegables 100% CSS, efectos de opacidad o transparencia, así como otras muchas e interesantes posibilidades.
Integramente en HTML y CSS, este repositorio de recursos es ofrecido de forma gratuita para todo aquel diseñador que tenga interés de llevarlo a cabo en su propio proyecto web.
Además de lo anterior cada ejemplo de Araudi.net se encuentra en español permitiéndo superar los problemas que en ocasiones se generan para aquellos con menos dominio del inglés.

Plantillas gratuitas en HTML5 y CSS.

Colección de templates listos para todo tipo de proyectos web.



Las plantillas en HTML5 son uno de los recursos para diseñadores web más buscados en la actualidad no solo porque ofrecen una forma rápida y fácil para lograr la creación de un website, sino porque también ofrecen una ruta fantástica para explorar y entender la sintaxis HTML5.
Esta colección realizada por speckyboy reúne 15 nuevas y variadas plantillas gratuitas que pueden ser usadas para todo tipo de proyectos personales y/o comerciales sin ningún tipo de restricciones.
Cada uno de los recursos ofrecidos dispone de un enlace de descarga junto a otro donde previsualizar el template seleccionado.

CleanCSS, comprime y optimiza CSS.

Herramienta online permite mejorar hoja de estilos CSS.
CleanCSS comprime y optimiza CSS logrando que el código de nuestra hoja de estilos se vuelva más liviano, repercutiendo en una mejora de la velocidad y la usabilidad de nuestra web.
Esta interesante herramienta para webmasters trabaja de acuerdo al estándar marcado por W3C, eliminando espacios en blanco, quitando comentarios o cambiando código a una forma más corta.
El manejo de CleanCSS es muy sencillo gracias a su intuitiva interfaz pese a disponer de una completa variedad de opciones de compresión y optimización.

Buscador de soporte de propiedades CSS en navegadores.

Interesante herramienta con la que facilitar el trabajo del diseñador web.



Browser Support es un sencillo motor de búsqueda que nos permite averiguar que propiedades CSS son soportados por los principales navegadores.
Su manejo es tan sencillo como lo es cualquier otro buscador web, simplemente tipea cualquier propiedad, pseudo-elemento o valor de CSS y de forma automática obtendrás una relación de los navegadores en los que es soportado.
Además este motor de búsqueda de propiedades CSS en navegadores dispone de una herramienta autocompletado, enlace a características relacionadas, links a la documentación oficial y tests (muchos de los cuales son de W3C CSS test suites) con los que conocer un poco mejor todo lo relacionado con nuestra búsqueda y hacer nuestro trabajo si cabe más fácil.
Muy interesante para que cualquier diseñador lo tenga a mano cada vez que lleva a cabo un proyecto, Browser Support también nos permite llevar a cabo el proceso inverso, es decir, seleccionar uno de los navegadores más importantes entre Chrome, Safari, Firefox, Internet Explorer y Opera, y obtener una relación de las características CSS soportadas por el mismo.

Optimizadores de código CSS.

herramientas online para optimizar código fuente de hojas de estilo en cascada.



Esta selección de aplicaciones web nos van a servir para optimizar código CSS, ayudándonos a solucionar problemas en su formato y evitándonos revisar y optimizar el código de forma manual.
Entre las herramientas presentadas, algunas más básicas otras más complejas, vamos a poder elegir el nivel de compresión disponiendo de opciones como eliminar selectores no utilizados o determinadas propiedades.

1.CSS Óptimo: organiza y da formato al código de acuerdo a un grado de optimización seleccionado. Reduce el peso de una hoja de estilos en más de un 30%.

2.CSS SuperScrub, herramienta online que nos permite reducir el tamaño y la complejidad del CSS, deshaciéndose de código innecesario.

3.CSS Formatter and Optimiser comprime y optimiza CSS, mejorando y eliminado elementos no necesarios. Dispone de varios niveles de compresion

4.Code beautifier, aplicación online que permite ordenar y combinar selectores y propiedades, comprimir los colores y la tipografía de peso, elegir entre el formato de mayúsculas y minúsculas, desprenderse de las propiedades no válidas.....Basta con pegar el código CSS y seleccionar dentro de las opciones el tipo de estilo y listo.

5.Tabifier, esta aplicación web está centrada en las tabulaciones. Soporta CSS, HTML y C.

6.FlumpCakes Online CSS Optimizer ordena, optimiza y comprime código CSS ofreciendo una versión más reducida.

Firepicker, selector de color para Firefox.

Herramienta de firefox para diseñadores.

Firepicker es un complemento para el navegador de Mozilla que el que añadir un sencillo selector de color junto a Firebug que resulta interesante para escoger el color de nuestros elementos en CSS.
Esta herramienta para diseñadores web y webmasters escanea los valores que pueden analizarse (#abc, #010203, azul, rojo, etc.) y los muestra en una lista desplegable justo por debajo del cuadro de editor de CSS de Firebug. Al hacer clic en el valor del color en la lista, se muestra un cuadro de diálogo de selector de color.
Firepicker es una utilidad sencilla y efectiva que ha sido valorada como uno de los mejores complementos para Firefox dentro de la categoría Desarrollo web.
Firepicker soporta Firefox 5.0.1 (y versiones anteriores) y Firebug 1.8.1 (y versiones anteriores).

Free CSS: Plantillas y menús gratuitos.

Servicio web de recursos CSS para diseñadores.

Free CSS es una plataforma en constante ampliación que reúne una gran cantidad de recursos gratuitos CSS que podremos usar de forma libre en nuestros propios proyectos web.
Desde plantillas en CSS, layouts, tutoriales, artículos, galerías con diseños CSS.... Free CSS reúne un total de 1200 recursos gratuitos disponibles para cualquier interesado.
Todos los recursos que encontramos en Free CSS y que son distribuidos bajo licencia creative commons disponen de completa información acerca de su autor y características, además de un enlace de descarga.

Compatibilidad CSS en navegadores.

Información acerca de la compatibilidad de las propiedades CSS en los principales navegadores web.

Gracias a Impressive Webs encontramos un interesante post dirigido a diseñadores y desarrolladores web, donde acceder a un par de listados prácticos que nos ayudaran a tener a mano la información de aquellas propiedades CSS soportadas en todos los navegadores o que por el contrario que no son compatibles con todos, por lo que su uso nos obliga a prestar especial atención para lograr que nuestro site se vea de forma correcta. Pese a que las NO compatibles son propiedades disponibles para su utilización en navegadores, no obtendremos los mismos resultados en las mismas circunstancias de uso.
Es importante señalar que al hablar de compatibilidad en todos los navegadores, nos estamos refiriendo en concreto a Internet Explorer 6 o versiones superiores, Firefox 3.0 o superior, Chrome 2 o superior, Safari 3.1 o superior, y Opera 9.2 o superior.

Propiedades CSS con compatibilidad en todos los navegadores:

   1. color   2. direction   3. font-family   4. font-size   5. font-style   6. font-weight   7. list-style-position   8. table-layout   9. text-indent  10. word-wrap

Propiedades CSS que NO tienen compatibilidad en todos los navegadores:

   1. background   2. background-attachment   3. background-color   4. background-image   5. background-repeat   6. background-position   7. border   8. border-collapse   9. border-color  10. border-style  11. border-width  12. clear  13. cursor  14. display  15. float  16. font  17. font-variant  18. height  19. left  20. right  21. bottom  22. top  23. letter-spacing  24. line-height  25. list-style  26. list-style-image  27. list-style-type  28. margin  29. overflow  30. padding  31. page-break-after  32. page-break-before  33. position  34. text-align  35. text-decoration  36. text-transform  37. vertical-align  38. visibility  39. white-space  40. width  41. word-spacing  42. z-index

Aquellos que deseen mejorar sus conocimientos en CSS pueden acceder a la sección CSS a Fondo donde encontrarán todo lo que necesitan aprender sobre las hojas de estilo en cascada.

Colección de menus CSS y HTML.

Only CSS Menu es una interesante y completa galería de menús libres desarrollados con CSS y HTML.


Only CSS Menu ofrece una variada colección de menús verticales, horizontales o con varios niveles de navegación que podrán ser implementados sin disponer de grandes conocimientos en CSS o HTML.
Al seleccionar cualquiera de los menús ofrecidos por esta plataforma obtendremos además de una muestra del resultado final, el código HTML, el código CSS, la compatibilidad con los principales navegadores y un enlace para la descarga del recurso.
Only CSS Menu también permite personalizar los menús ofrecidos en 4 sencillos pasos. El uso de estos menús en CSS es libre tanto para un uso personal como profesional.
Interesados pueden acceder a Only CSS Menu de forma completamente gratuita y sin necesidad de registro desde http://www.onlycssmenu.com/.

Diseños CSS para webmasters.

Galeria de diseños CSS para desarrolladores web.

InspireCSS es una buena referencia para aumentar nuestra experiencia visual en CSS.
Este site nos permite recopilar interesantes diseños de la web permitiendo a los usuarios votar por cada uno de ellos.
InspireCSS además de ofrecernos diseños, nos permite sugerir nuevos que consideremos validos, una vez aprobados, se incluirán dentro de la categoría correspondiente.
Una página sugerente para diseñadores y desarrolladores web en busca de inspiración.
Si deseas obtener más información visita la pagina web inspirecss.com.

Herramientas online para CSS.

10 útiles aplicaciones online para trabajar con CSS.


1. Primer CSS
http://primercss.com/
Intriduces una URL este sitio obtiene las clases e IDs, y crea una hoja de estilos CSS .

2. Automatic CSS inliner
http://www.mailchimp.com/labs/inlinecss.php
Transforma estilos locales en .CSS. Buena herramienta para editar las newsletteres en campañas de email marketing.

3. CSS sprites generator
http://css-sprit.es/
Generador de sprites CSS online desde la web.

4. Moo color finder
http://www.artviper.net/colorfinder.php
Obtienes los colores de un documento .css y exporta la paleta de colores a photoshop.

5. MinifyMe
http://code.google.com/p/minifyme
Ccombina, optimiza y reduce el tamaño de archivos CSS.

6. Variable Grid System
http://www.spry-soft.com/grids
Utiliza una rejilla en tus hojas de estilo CSS.

7. Modernizr
http://www.modernizr.com/
Checkea si tu navegador tiene soporto para las nuevas características de CSS.

8. List-o-matic
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic
Para crear menús horizontales o verticales de forma muy sencilla y exportarlos como hojas de estilo CSS.

9. CSS text wrapper
http://www.csstextwrap.com/
Para formatear párrafos de texto yhacer que el texto fluya creando formas.

10. Dust-me selectors
http://www.sitepoint.com/dustmeselectors/
Una extensión para Firefox que nos avisa cuando algún elemento de la hoja CSS es huérfano.

Herramienta online para diseño CSS.

Herramienta para crear CSS. Fuentes en linea


CSS Type Set es una excelente herramienta para los diseñadores de páginas web, les permite crear estilos de fuentes CSS para sus proyectos fácilmente, además les permite visualizar los cambios al instante.



Una herramienta poderosa y muy útil para los webmasters!
Adelante, a probar y crear tu propio diseño.

Aprende CSS avanzado.

Manual de CSS.
Les presento un muy buen libro para aprender a manejar CSS.



CSS Avanzado, Javier Eguíluz Pérez (LibrosWeb)


PDF
Spanish
151 Páginas
1.56 MB
Javier Eguíluz Pérez
LibrosWeb
18.06.2009

Las hojas de estilo en cascada (Cascading Style Sheets o CSS) proporcionan una manera sencilla de controlar la apariencia de nuestras páginas web, pero son también una potente herramienta cuya utilidad no es evidente a primera vista. El control sobre la aparienca de los elementos HTML que se puede obtener a través de las CSS nos va a permitir usarlas para mejorar la interfaz con el usuario, olvidándonos de la complejidad típica de otras soluciones como el Javascript.

1. Capítulo 1: Técnicas imprescindibles
2. Capítulo 2: Buenas prácticas
3. Capítulo 3: Selectores
4. Capítulo 4: Propiedades avanzadas
5. Capítulo 5: Frameworks
6. Capítulo 6: Técnicas avanzadas
 
Links de descarga:
http://rapidshare.com/files/332350179/CSS_avanzado.rar
http://freakshare.net/files/59dz9gcl/CSS_avanzado.rar.html

Curso rapido de CSS.

Aqui les traigo cuatro videos tutoriales para aprender a manejar algo se CSS, estan muy buenos, espero que les sean de utilidad.

01- ESTRUCTURA.



02- SELECTORES Y DECLARADORES.



03- ID & PSEUDOCLASES.



04- SELECTORES CONTEXTUALES Y HERENCIAS.