Crear botones CSS estilo Wii
Con una imagen, un archivo CSS con su respectivo código y un poco de esfuerzo, podremos crear botones CSS parecidos a los de Nintendo Wii, totalmente compatibles con IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9. Los pasos para crearlo son muy simples, y se ilustran al salto de la página.
Zebra tables con CSS3
Gracias a CSS3 podremos crear tablas con dos colores alternados, si utilizamos correctamente el pseudo-selector nth-child, nos permitirá crear tablas con dos colores, alternandose cada vez, al estilo zebra, y con una sola linea de código: Debemos indicar al selector el número de lineas que debe aplicar al estilo. En el ejemplo se puede ver … Lee más!
Técnicas CSS para mostrar gráficas
Si alguna vez queremos mostrar datos en una gráfica, hay muchas posibilidades, pero para mí, la más sencilla, es usar CSS para crear la gráfica. Se resumen 7 técnicas para mostrar gráficas en CSS, gracias a Six Revisions: Accesible data visualization with Web Standars CSS Vertical Bar Graphs Creating a Graph Using Percentage Background Images … Lee más!
Bordes redondeados con CSS3 compatible con Internet Explorer
Ya vimos como crear bordes redondeados en CSS una vez gracias a CSS Sprites, pero ahora lo haremos para que sea compatible con Internet Explorer, gracias a un archivo .htc.
Frames mediante CSS
Los Frames en mi opinión, son lo más molesto para los buscadores (y las personas), pero quien quiera usarlos, ¡por lo menos que lo use con CSS! Mucho más limpio y amigable. Te explicamos como crear un frame gracias al uso de CSS.
Crear hr con CSS
Para los que no quieran usar HTML, también podremos crear con CSS. Solo debemos aplicarle este código: Lógicamente podremos cambiar los valores del estilo del borde (Por ejemplo, donde pone dashed, cambiar por solid, para obtener un borde sólido). Después solo debemos incluir la class=»hr» en la tag hr de HTML: Así podremos crear la … Lee más!
Columnas equilibradas en CSS
Si queremos crear columnas equilibradas en CSS, utilizando divs y obviamente, CSS, solo tendremos que crear un nuevo archivo HTML, e incluir este código: #caja_izq {width: 850px; margin: 20px auto; color:#fff; background-color: #4c9ab1; overflow: auto; } #caja_der {width: 500px; float: right; background-color: #82b04d; border-left: solid 30px #fff; } .columna_izquierda {width: 280px; float: left; padding: 20px; … Lee más!
¡Contenido premium gratis!
Suscríbete a nuestra lista premium gratuita y recibe cupones sobre recursos de diseño gráfico Freepik, artículos y material exclusivo.
