These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.They make my buttons …
Para aquellos que no sean hábiles en el diseño y necesiten de ideas para mejorar el aspecto de las tablas, existe una galería con diseños de tablas mediante CSS.
Hasta ahora hay un total de 71 diseños, que se pueden visualizar en la misma lista, no son screenshots, ni popups, ni enlaces a otras páginas, cuando queremos ver uno de los estilos, se recarga la página y muestra la lista con el estilo seleccionado. También hay una serie de tutoriales sobre tablas y CSS que nos pueden ser de utilidad. Cualquier ayuda siempre es bienvenida.
Vía / Digg
Xeround is a new MySQL storage engine offered as Database-as-a-Service. What it promises sounds (a bit?) too good to be true (nb this list have been extracted from their site): seamless replacement of existing MySQL database high availability (including schema changes) automatic fault-detection and recovery full consistency with low latency elastic …
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;
}