Mostrando contenidos bajo el tag CSS3

Enlace externo

Zocial: Botones CSS3 de las principales redes sociales

Publicado 2012-05-24 17:10:56 en CSS, CSS3, Sass, Web Social

Permalink

Agradable set de botones CSS3 sobre las principales redes sociales.

¿Lo mejor? Para mostrar los logos de cada sitio no se utiliza ninguna imagen: todas se encuentran contenidas en una fuente tipográfica, permitiendo también que los botones sean 100% escalables, sin perder calidad.

Y por si fuera poco, también estan disponibles como extensión para Compass.

Enlace externo

Stitch: Patrones CSS para extender a Compass

Publicado 2012-05-22 15:10:44 en CSS, CSS3, Sass

Permalink

Stitch es una extensión para Compass que otorga la posibilidad de utilizar un gran número de patrones y utilidades CSS para diferentes situaciones.

Algunos ejemplos:

@import 'stitch/patterns'

// Habilitar la aceleración por hardware para las animaciones
@include enable-hardware-acceleration

// Utilización del guión ortográfico: https://developer.mozilla.org/en/CSS/hyphens
@include hyphen(none);

// Crear columnas: https://developer.mozilla.org/en/CSS/columns
@include text-columns(2,20px);
Artículo

Sobre la incorporación del Guión Ortográfico en el HTML

Publicado 2011-06-13 01:09:00 en CSS, CSS3

En la escuela todos aprendimos la utilización del guión ortográfico para separar una palabra en dos partes cuando finalizamos un renglón y comenzamos otro. En HTML, si queremos incorporarlo en un párrafo debemos utilizar la entidad ­

<p>UnaPalabraMuyLarga­QueTieneElGuionOrtografico</p>

Demostración del uso. La particularidad de su utilización es que la entidad sólo aparece cuando es necesario (es decir, cuando la palabra debe ser recortada) caso contrario es invisible.

Creo que es importante saberlo, para poder aprovecharlo en elementos adaptables a diferentes tamaños de pantallas. Por ejemplo: si el ítem de un menú es muy largo, podemos agregar un guión ortográfico para separar la palabra en dos cuando el ancho del menú sea reducido.

Por otro lado, el draft de la especificación CSS3 determina varios estilos que permitirán controlar la forma y el modo con que se utiliza el guión ortográfico, incluso actualmente -webkit-hyphens es compatible en Safari para iOS y en algunas versiones Nightly Builds de Firefox, Safari y Chrome.

Finalmente, para continuar más en profundidad, muy recomendable el artículo The Look That Says Book en The List Apart.

Enlace externo

Flux Slider: Interesante slideshow con transiciones CSS3

Publicado 2011-06-13 00:11:00 en CSS3, JavaScript, jQuery

Permalink

Hace un tiempo había visto a Nivo Slider, un slideshow realizado en jQuery que se destaca por sus logrados efectos de transición.

Flux Slider es una implementación similar, también realizado con jQuery (y compatible con Zepto) pero que en lugar de hacer uso de funciones JavaScript para las transiciones utiliza animaciones CSS3. ¿Cuál es la ventaja? Transiciones más fluidas ya que hacen uso de las capacidades nativas del navegador. Muy recomendable la demo (sobretodo los efectos 3D, como la captura de más arriba).

Artículo Contenido destacado

Compass-3D-Ribbon: Plugin para crear ribbons con CSS y Compass

Publicado 2011-06-09 02:57:00 en CSS, CSS3, Sass

Hace unas semanas, mientras trabajaba en el diseño de Biblioteca Comunidad Joomla, me vi en la necesidad de agregar unos ribbons (o cintas, en español) para los títulos de los libros. No quería hacerlo con imágenes, sino con CSS, ya que es posible y no es tan complicado.

Así que tomando el modelo de 3D Ribbon Generator decidí crear una extensión para Compass que permite crearlos de manera sencilla:

Compass-3D-Ribbon

Ejemplo finalizado.

Los ribbons son compatibles con IE7+, Firefox 3.5+, Google Chrome y Safari / Safari iOS. Incluso la extensión ofrece soporte para CSS3 Pie, que permite agregar bordes redondeados y sombras en IE.

La utilización es bastante sencilla y flexible, toda la documentación e instalación se encuentran en el repositorio de GitHub.

Y si aún no utilizaron Compass, ¿Qué esperan? ;)