Un par de trucos avanzados CSS
febrero 28, 2008
Hay un par de trucos que me llamaron bastante la atención, el primero fue bastante popular estos días y consistía en redimensionar el navegador manualmente para ver el efecto 3d [Parallax scrolling] que provocaba el “movimiento” de las hojas en la página de Silverback, bastante creativo en mi opinión.
Pues días después podemos encontrar un artículo en Vitamin para saber como se creo dicho efecto, desde el código CSS hasta el orden de las imágenes PNG, “How to recreate Silverback’s Parallax“.
El otro “truco” en CSS que me gusto mucho lo conocí por medio de WebAppers, en cual podemos ver un vistoso efecto de desenfoque (blur) en el menú cuando colocamos el cursor sobre él, es mejor que lo veas en “vivo“. Acá el artículo para recrearlo Advanced CSS Menu Trick.
Analizando y usando la tipografía en el Diseño Web
febrero 6, 2008
Typesites es una nueva página dedicada a mostrar el buen uso de la tipografía en los sitios web, pero no piensen que es una galerías como varias que podemos encontrar, sino un lugar donde se analizara a detalle trabajos que sirvan de inspiración desde el punto de vista de un diseñador profesional.
“Typesite es una exhibición quincenal de páginas con un interesante diseño en la tipografía… enfocándose en trabajos que inspiren y enseñen“
De momento sólo encontramos dos sitios, pero uno es el bello blog de Jesús Velasco, seguramente lo debes conocer, diseñado por el extraordinario diseñador (¿español?) Miguel Ripoll, el cual está bajo la lupa y análisis de otro gran diseñador Elliot Jay Stocks.
Sin duda un nuevo sitio para colocar en nuestro lector de feed (sí, ya no me voy a quejar).
Por otro lado y para seguir con buenas costumbres en el uso de la tipografía en el diseño web, recientemente en .net, una revista de diseño, publicaron un tutorial para descargar gratuitamente en pdf con consejos sobre CSS para mejores textos, “Better Web Typography.
Design, herramientas de diseño en un sólo click
diciembre 20, 2007
En Intenta vi una increíble recurso de nombre Design desarrollado por Allan Jardine, este nos brinda cuatro utilidades o mejor llamados componentes, que nos ayudaran en nuestros diseños con sólo guardar un enlace en nuestro navegador.
La instalación es mu sencilla, en propias palabras de Intenta:
- Arrastramos el enlace del botón “Design“, que aparece en la web oficial, a nuestra barra de favoritos o lo añadimos manualmente a nuestros marcadores y favoritos.
- Cargamos la web que deseemos y hacemos click sobre el marcador “Design” que previamente habíamos añadido.
- El paquete se carga y hacemos click sobre el componente que deseemos utilizar.
Los componentes son una retícula, una regla (guías), una unidad (para medir entre dos punto) y una cruz. Solo debemos presionar sobre el icono en el panel que nos aparece.
El bookmark funciona para
- Internet Explorer 7
- Firefox 2+
- Safari 2.0.4+
- Opera 9.2+
No hay soporte para IE 6 “Design y sus componentes son diseñadas y desarrolladas para diseñadores web, no para tus clientes” jeje.
Encontrar los selectores no usados en las hojas de estilo
noviembre 26, 2007
Leyendo un blog de Sitepoint conozco una extensión para Firefox de su propia creación. Con Dust-me Selectors, en su versión 2.0, podremos saber que selectores en nuestras hojas de estilo (CSS) no están siendo usados y viceversa.
Así es como trabaja:
La extensión extrae todos los selectores de todas la hojas de la página que estés viendo, y analiza cuales selectores no están siendo usados. La información se almacena asi que cuando analices páginas subsecuentes, los selectores pueden ser tachados de los hallados. Además de que puedes usarla para comprobar páginas individualmente o sitios enteros.
Más información:
Bastante bien para saber que se puede borrar y ahorrar un poco de espacio en las hojas, y también puede servir de complemento a la reciente lista que hicieron en Maestros del web “Extensiones para Firefox que todo desarrollador debe tener“.
Por cierto, para utilizar esta extensión sólo debemos presionar el botón rosa que aparece en la barra de estado en la parte inferior del navegador o bien, desde el menú herramientas.
Menús, botones y tutoriales
octubre 18, 2007
Veo en Vecindad Gráfica una buena lista de tutoriales para hacer botones “39 Photoshop Button Tutorials You Should Have in Your Arsenal“. Aunque si no es suficiente puede ser útil darse un paseo por Pixel2Life para ver más.
Tiempo atrás vi también en Baluart otros tutoriales o mejor dicho una excelente colección de botones con el código CSS incluido en la ya conocida CSSplay, que a su vez me recordó los ya famosos sets de Exploding Boy:
Pero siempre es mejor saber crearlos para poder manipularlos más fácilmente.
How to make sexy buttons with CSS
Recopilación de “Templates” gratuitos
junio 21, 2007
Una recopilación de enlaces a páginas (que había hecho en los primeros meses del blog) donde podemos encontrar diseños de páginas listos para usar, la mayoría con estándares (CSS y XHTML) e inclusive unas con el archivo de Photoshop y obviamente totalmente gratuitas.
- Ready Templates
- Code-Sucks
- Solucija Templates
- edg3
- Templates Box
- Css Tinderbox
- Dynamic Drive CSS Layouts
- SixShooterMedia
- Free Css Templates
- Layout Gala
- CSS Templates 1 y 2
- Open Source Templates
- Open Web Design
- OSWD
Una herramienta para crear tu maqueta (layout) en CSS con muy poco esfuerzo.
