Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:
<div class="clear"></div>
existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.
Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.
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.
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.
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 …
CSSViewer es una extensión para Firefox que nos permite visualizar en una ventana los estilos que posee un elemento de la página web que estamos viendo. Muy útil para cuando desarrollamos o para cuando visitamos páginas que nos gustan y queremos destripar los estilos sin necesidad de meternos en el código fuente.
Un par de fallos sí que le veo:
los iframes los trata como objecto, cuando podría profundizar en ellos, y los frames no sabe tratarlos, por ejemplo en la página de GMail, supongo que será porque tira del elemento body, el cual no existe en la página que contiene los frames (claro que esto es una suposición),
el segundo fallo es que la ventana que muestra los estilos es demasiado Web 2.0, algo más anticuado hubiera quedado mejor, es demasiado grande y se sale de la pantalla y no sigue bien al ratón, por lo que a veces el ratón se posiciona encima de la ventana y obtiene los estilos de la ventana que muestra los estilos (un poco recursivo, ¿no?).
Salvo estas cosillas, una extensión que ya tengo instalada y que creo que me será muy útil.
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.
¿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.
Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.
El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.
Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.
