Desde Xyberneticos doy con MoreCSS, una herramienta en JavasCript que añade una serie de ordenes definibles mediante CSS. Los creadores han aplicado una serie de ideas que bien podrían formar parte de los estándares del CSS.
RUDEWORKS / El blog-portfolio de RUDE
19/03MoreCSS.js añade propiedades a tus CSS (y probablemente lo invalida)
Robert Nyman nos proporciona una buena manera de dar estilo al elemento <button>. El único problema son un par de píxeles de padding que sólo aparecen en Firefox.
Curiosa manera de incluir una nota informativa sobre la propiedad de una imagen y ocultarla mediante CSS.
17/03Starry Night, un ejemplo en CSS
El efecto de fondo de la misteriosa web de Silverback a causado estragos. Ahora desde CSS-Tricks, una pequeña demostración de lo que podemos hacer con esa misma filosofía y unos cuantos PNGs.
03/03jQuery para diseñadores
En Web Designer Wall nos proporcionan una serie de minitutoriales sobre jQuery útiles para diseñadores web. Ejemplos claros, simples y enfocados sobre un tema.
27/02Modalbox, mola
Se nota que vamos avanzando en materia de lightboxes, al menos gráficamente. La funcionalidad ya está bastante clara así que ahora toca mejorar tiempos de carga y grafismo. Esos son los puntos fuertes de Modalbox, un lightbox al estilo de las ventanas de diálogo de Mac OS X.
Elegante, ligero, genial. Vía Isopixel.
De parte de Konstruktors Notes y CSS newbie, un poco de teoría sobre la utilización y tratamiento de las listas en CSS .
15/02El Clearfix perfecto
Hoy me he encontrado con Perishable Press, un blog enfocado sobre todo a programación para web y sobre la plataforma WordPress. Entre sus últimos artículos he encontrado uno que me ha parecido especialmente interesante. En dicho artículo analiza la validez de los métodos de clearfix existentes y los combina para obtener un resultado adecuado para cualquier terreno.
El resultado es este:
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
Los cambios principales son el reemplazo del punto (.) por un espacio como contenido para el bloque que realiza el clear y la adición de una medida nula para dicho contenido (font-size: 0).
14/0201/Con CSS se puede…
- …dar estilo a la forma en la que se imprimen tus páginas, evitando elementos innecesarios sobre el papel.
- …rellenar con un degradado de color un texto sin recurrir a hacks ni incluir excesivo markup innecesario.
- …colorear el fondo del texto seleccionado (sólo con navegadores que soportan CSS3).
Si te gustan los CSS pero no te apetece liarte a leer tutoriales y a mirar líneas y líneas de código buscando respuestas, lo primero es que eres un vago, y lo segundo es que los screencasts de CSS-Tricks son para tí.
24/01Aumenta la velocidad de carga de tu web (y saca mejor nota en YSlow)
Ayer encontré vía Sentido Web una solución a un problema que venía acosándome desde hace un tiempo, y es que RUDEWORKS suspende sometida a las pruebas de YSlow y ciertamente no carga muy rápido. Pues bien, ayer estuve tratando de integrar este script, llamado Site speed boost Script de Acid Drop y tras unas cuantas pruebas fallidas lo hice funcionar satisfactoriamente. Su función es la de unir todos los CSS en uno y comprimirlos en Gzip, al igual que el Javascript y el HTML .
Ahora mismo no es que apruebe en el YSlow, pero ha mejorado mi nota en casi 30 puntos (mejoraría más si detectara los expires, pero no me los pilla de ninguna manera).
¿Estas aburrido de los párrafos cuadrados? ¿De elegir entre horizontal y vertical? Dale un meneo a tus líneas de texto con CSS Text Wrapper. Vía Posh CSS.
12/11Un cine antiguo en el CSS Zen Garden
El otro día no se por donde me encontré con un diseño que emula un cine antiguo en el CSS Zen Garden. Es posible que en cuanto a tonalidad y detalle se le pudieran dar un par de vueltas, pero en funcionalidad y concepto es realmente interesante.
02/10Interfaz de pestañas solo con CSS
Hay muchas soluciones ahí afuera para crear interfaces de pestañas (o tabs, que se dice generalmente). Algunas de ellas son realmente sencilla de conseguir, pero esta que os presento raya lo estúpido. Simplemente jugando con links a selectores y un div con la propiedad overflow: hidden, CSS TABS logra una bonita interfaz de pestañas.
El autor del invento se esconde tras la marca 3.7 Designs y yo le felicito por ser tan curioso.
23/09CSS inicial 2.0
El otro día me topé con Tripoli, algo así como un proyecto de nuevo standard para CSS y encontré unos cuantos elementos que creí necesario insertar en mi CSS inicial. De hecho, también me pareció una buena idea incluir en el mismo paquete un HTML inicial con todo listo para empezar a meter los divs con chicha.
0