Una forma sencilla de mostrar las distintas formas de posicionamiento mediante CSS: position:static, position:relative, position:absolute y float.
Learn CSS Positioning in Ten Steps
Vía / Vecindad Gráfica
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;
}We’re already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. If you’ve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you’ll be able …
Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.
Usando este código HTML:
<div id="box">
<div id="bar">50%</div>
</div>y estos estilos:
#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.
Vía / Posh CSS
Si tienes alguna duda de cómo realizar el menú de tu aplicación web, aquà tienes una lista bastante extensa de artÃculos y tutoriales de listas, menús, navegación y pestañas. Los hay mejores, peores, más sencillos, os recomiendo que os deis una pasada por ellos y veáis cual se adapta mejor a vuestras necesidades. Eso sÃ, comprobarÃa que funcionen en todos los navegadores.
Top 71 CSS Menus Navigation Tabs
Via / Digg
CSSEmbed es un script que te sustituye las imágenes de un CSS por su representación en base64. ¿Qué conseguimos con esto? reducir el número de peticiones HTTP, por ejemplo. Para ello debemos usar DATA URIs, las cuales sustituyen a las URLs por el contenido codificado en base64.
.ejemplo {
background: url(imagen.png);
}
/* Sustituido por */
.ejemplo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r56AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJl
YWR5ccllPAAAAwBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S+BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH
13goeBtbq0ERYQbnNtqq+pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCwIiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/J5
s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFgncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/mYcQZWpkT1ROl4UOY1sJx7MUq7Cqy
LQVv6oToZERWl9ZmIYPGxwARktFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2XeGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX
4Pem0McmQMFhUBDgwBBw0AMDUvoqehBgwA8/jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hiHiMdJykErLGry9DKiX8Ne24Ntru13+TePD
gFMzgyPDO7qpsSuKITFhsVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIAHyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdH
FusZkT6/DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAKppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn8QbGYLEA4D
NzIH+/OhHh5rTkIJzNHLISIFBgsFRTja6dEbCQoeV1RRCQYDKigdSEUJ2t/ZMzQXQT4CFRI/588ZSkUaCgs...
}Lógicamente con versiones inferiores a IE8 da problemas y hay que usar alternativas, pero en el resto de navegadores va bien. Se puede ver un ejemplo real en las imágenes de las búsquedas de Google.
En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:
Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados
Vía / Slightly Ajar