CSS
Espectacular la técnica que nos explica Roger Johansson para convertir un enlace de texto en un botón con sólo CSS y algunas etiquetas extras.
El diseño del botón web tiene las siguientes características:
- Un ancho flexible a la cantidad de texto
- Crecimiento horizontal y vertical según el tamaño del texto
- Conserva su apariencia dentro de los límites razonables
- No tiene zonas no clickeables
- Pueden tener esquinas redondeadas
- Son legibles, aún cuando las imágenes no se muestren
El acabado final lo pueden observar en este enlace. Y el código e imágenes necesarios para lograrlo, desde el siguiente.
Tutorial | Creating bulletproof graphic link buttons with CSS
Para que matarse retocando las imágenes, añadiéndoles efectos, sombras, bordes, y esquinas redondeadas con el Photoshop, si un fichero javascript y algo de CSS pueden hacer todo el trabajo por nosotros. Corner.js es una pequeña librería javascript sumamente fácil de incorporar a cualquier sitio web.
Para utilizarla hay que seguir los siguientes pasos:
- Descargar la librería y subirla al servidor
- Añadir el siguiente código dentro del html de la web:
<script type="text/javascript" src="corner.js"></script> - En las imagines que querramos se muestren con esquinas redondeadas, basta añadirles lo siguiente: class="corner"
Asimismo, hay varios efectos, que pueden combinarse entre si.
Un código fácil de personalizar, sólo CSS y XHTML válido, probado en los principales navegadores (Internet Explorer 6 y 7, Firefox 2.0, Safari 2.0 y Opera 9.0), que nos permite diseñar los comentarios como burbujas. Y, si queremos utilizar esquinas redondeadas, viene integrado con curvy corners.
Enlace | CSS Speech Bubbles
Un muy útil tip CSS para agrandar y, en general, manejar las dimensiones del reproductor de videos de YouTube a la hora de publicarlo en nuestras webs.
El CSS es el siguiente:
object {
width: 485px;
height: 410px;
}
embed {
width: 485px;
height: 410px;
}
Esta demás decir que los valores (píxeles) dependen del diseño de cada sitio.
Visto en Cosas Poposas
Una muy buena colección de CSS templates que nos pueden ser de gran ayuda. Son 12 diseños básicos (casi maqueta) de 1, 2 y 3 columnas, ideales para personalizar.
Enlace | 12 Basic CSS Templates
Vía | illasaron
Interesante compilación que publican en Smashing Magazine con 53 técnicas para conseguir los más variados efectos usando CSS y, en algunos casos, ayudado con JavaScript. Entre ellos tenemos modelos para diseñar menús de navegación, esquinas redondeadas, tablas, diagramas, mapeos, formularios, Style Switcher, Start Rating y más…
