Códigos CSS que diseñadores y desarrolladores web deben tener a la mano

4
2568

Gracias a CSS podemos transformar el diseño de un sitio web. Con mucha creatividad podemos sacarle partido a este lenguaje. Sin embargo, de vez en cuando, las técnicas convencionales de su uso no satisfacen ciertos requerimientos, es por ello que podemos hacer uso de otras declaraciones también disponibles, pero que muchas veces están ocultas, por decirlo asi (propiedades de cada navegador). Veamos algunas de ellas:

Esquinas redondeadas

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

El enemigo número uno de este tip es IE, aqui artículo para que funcione en Internet Explorer

Sombras

La mayoría de navegadores soporta esta propiedad box-shadow. En Safari existe una propiedad alternativa -webkit-box-shadow.

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

Regla @media

Esta regla se utiliza para hacer cambios en el estilo de un página web para diferentes tamaños de pantalla, teniendo en cuenta la técnica de Diseño Web Sensible. Ver un ejemplo de ello.

@media screen and (max-width: 480px) {

}

Efecto degradado

No todos los navegadores soportan este regla. Algunos ejemplos en este post.

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

Propiedad background-size

Una de las propiedades que ha alcanzado gran soporte de los navegadores. Esta propiedad específica el tamaño de la imagen de fondo. Algo de información aqui.

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

@font-face

Una propiedad muy útil para la transformación del diseño en cuanto a tipografía. Recientemente comentamos un artículo sobre Icons Fonts.

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

Una vez declarado, como usarlo:

div
{
font-family:mySmashingFont;
}

En smashinghub podemos encontrar otras 3 tips CSS más que no deben faltarnos como desarrolladores web.

4 COMENTARIOS

  1. Gracias por el post, Jesús. Una cosa, en el ejemplo de las esquinas redondeadas, ¿no debería estar la propiedad sin prefijo al final? Así el navegador que ya le dé soporte, usará ésa y no las que tienen prefijo.

    Un saludo.

  2. Claro Mario!! tienes razón. Asi nos aseguramos que en última instancia la propiedad estandar se use si es soportada.

    Buen punto 🙂

  3. Muy bueno, amigo, pero permíteme una corrección: la palabra «tip» no existe, es un barbarismo; en español se dice pista, consejo, apunte.

    Saludos.

Comments are closed.