Se trata de mostrar distintas capas (por ejemplo, noticias) en un mismo recuadro, usando un efecto de fading entre cada capa. Es necesaria la librerÃa de script.aculo.us para que funcione. Un código sencillo que nos permite hacer un fundido entre varias capas.
A CSS Crossfader Demo
Demo
VÃa / Ajaxian
Las noticias en el mundo del CSS y Showcases durante la última semana no han sido muy buenas que digamos. Ayer nos enterábamos que Web Standards Awards cierra sus puertas después de casi 2 años y únicamente 100 screenshots seleccionados.
Hace apenas unas horas leemos que la archiconocidÃsima Stylegala también está en venta igual que CSS Vault en su dÃa y Unmatched Style. Más bien en un cambio de dueño a través de una subasta que empieza a partir de 30.000$ en el que uno de los factores estrella es que gana en publicidad unos 2400 dólares al mes, aunque desde hace 6 meses tiene un ritmo de publicación de 1 página al mes.
Diseñorama también habla del asunto y se pregunta qué futuro tienen los CSS Showcases.
A esta pregunta no podemos ser objetivos, y sabemos y somos conscientes de la rentabilidad, además de que nos divertimos mucho no solo manteniéndola sino sabiendo que es muy útil para todos los profesionales y aficionados del sector disipando cualquier complejo que la comunidad hispana pudiera tener en cuanto al saber hacer.
Deseamos muchÃsima suerte a David en su subasta y que los próximos dueños vengan con las pilas cargadas porque nosotros seguiremos innovando.
Buenos consejos para realizar tus estilos CSS bien estructurados.
Write a well structured CSS file without becoming crazy
Vía / CSS Globe
Interesante recopilación de técnicas CSS que se han usado desde siempre. Cada vez es más importante realizar diseños que cumplan estándares, y si queremos que a parte de cumplir estándares, también tenga un diseño atractivo, es necesario usar muchas de las técnicas que nos ofrece el recopilatorio.
Entre las técnica que nos enseña o recuerda encontramos:
101 CSS Techniques Of All Time- Part 1
VÃa / CSS Globe
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.
Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
document.addEventListener( 'DOMContentLoaded', () => {
const prevHighligth = window.hljs.highlightBlock;
window.hljs.highlightBlock = block => {
const newline = '<span class="sw_new_line"></span>';
// Replace all without regex
block.innerHTML = block.innerHTML
.split( newline )
.join( '' );
prevHighligth( block );
if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
block.innerHTML = newline +
block
.innerHTML
.replace( /\n/g, `\n${ newline }` );
}
};
} );¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
pre code {
counter-reset: linenumber;
}
pre code .sw_new_line::before {
content: counter(linenumber, decimal-leading-zero);
counter-increment: linenumber;
padding-right: 15px;
font-size: 0.8em;
opacity: 0.6;
}Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe