CSS es el lenguaje subyacente que proporciona a los sitios web su aspecto. Aunque CSS es un lenguaje sencillo y fácil de aprender, puede ser difícil de sacarle todo el jugo, en algunos casos. No hay nada que temer, hay soluciones que se pueden encontrar por la red y si no, puedes echar un vistazo a este artículo. Para los casos in extremis, hemos reunidos 10 códigos de CSS que te sacarán de más de un apuro
Si deseas ajustar el ancho de un texto, que el ancho de las columnas de la tabla se ajusten automáticamente, crear una notificación de carga sin usar gifs... tenemos los códigos que necesitas, y más.
1. Alinear verticalmente cualquier cosa
Si sueles trabajar con CSS, seguramente esto te moleste: ¿Cómo alinear un texto o un elemento verticalmente según el contenedor? Ahora, con el uso de las transformaciones de CSS3, podemos hacer frente a este problema de una forma elegante. Presta atención:
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Utilizando esta técnica, todo (desde una sola línea de texto, hasta una serie de párrafos, o una caja) se alineará verticalmente. En cuanto a la compatibilidad con exploradores se refiere, las transformaciones de CSS3 son soportadas por Chrome 4, Opera 10, Safari 3, Firefox 3 e Internet Explorer 9 en adelante.
2. Estirar un elemento para ocupar todo el alto
En ciertas situaciones, es posible que desees estirar un elemento para completar la altura de la pantalla. Al redimensionar un elemento por alto, solo llegará hasta el máximo de su contenedor. Contando con que el contenedor general de una página html es el tag html y el body, debemos previamente definir el alto primero de estos dos parámetros.
html,
body {
height: 100%;
}
A continuación, podemos aplicar una altura del 100% a cualquier elemento, de este modo:
div {
height: 100%;
}
3. Aplicar diferentes estilos basándose en su formato
A veces puede ser muy útil el dotar de estilos diferentes a los enlaces con la finalidad de saber hacia donde apuntan. Este fragmento de código que te mostramos a continuación añadirá un icono antes del texto de un enlace y utilizará diferentes iconos e imágenes para los diferentes tipos de destinos, que en este ejemplo son enlaces externos, emails y pdfs.
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
4. Imagen en escala de grises independientemente del navegador
La escala de grises puede dotar de un tono más profundo tu sitio web haciendo que se vea más elegante y, a la vez, más minimalista. En este código vamos a añadir un filtro de escala de grises a una imagen utilizando SVG. Esto es lo tienes que hacer para aplicar una escala de grises a una imagen:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
Y para que sea compatible con todos los navegadores, utilizamos la propiedad filter de esta manera:
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
5. Animación de degradado de fondo
Una de las características más atractiva de CSS es la posibilidad de añadir efectos de animación. Puedes animar el color de fondo, la opacidad, el tamaño, pero desafortunadamente no los degradados. Actualmente, no se puede animar un fondo con un degradadom sin embargo, este código puede ser de gran utilidad. Mueve la posición del fondo para que se vea como si fuese una animación.
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
Y este ha sido el artículo en el que trataba explicaros 10 códigos de CSS que te sacarán de más de un apuro, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!