En este artículo recojo 7 fragmentos de código CSS3 que pueden ayudarte a mejorar tu sitio web, y que siempre son útiles de tener a mano. CSS3 todavía no está implementado en muchos navegadores, pero está claro que con el tiempo será la voz cantante en el mundo del diseño, por lo que cuando antes nos pongamos en ello, antes estaremos al loro de las últimas tendencias. Yo utilizo CSS3 con la idea del progressive enhancement, esto es, los sitios que soportan CSS3 dan la mejor experiencia de usuario, y los que todavía no lo soportan, permiten utilizar el código, aunque pierda en belleza y diseño.
1. Añadir un gradiente
background:#3a6c07;
background:-webkit-gradient(linear,left top,left bottom,from(#6ea03b),to(#437f00));
background:-moz-linear-gradient(top,#6ea03b,#437f00);
/* aplicación del gradiente en Internet Explorer */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ea03b",endColorstr="#437f00");
background:-webkit-gradient(linear,left top,left bottom,from(#6ea03b),to(#437f00));
background:-moz-linear-gradient(top,#6ea03b,#437f00);
/* aplicación del gradiente en Internet Explorer */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#6ea03b",endColorstr="#437f00");
2.Añadir sombras
box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
3. Usar transparencia/opacidad
.transparencia {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
4. Redimensionar background
html {
background:url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size:cover; /* navegadores basados en webkit */
-moz-background-size:cover; /* Mozilla Firefox */
-o-background-size:cover; /* Opera */
background-size:cover;
}
background:url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size:cover; /* navegadores basados en webkit */
-moz-background-size:cover; /* Mozilla Firefox */
-o-background-size:cover; /* Opera */
background-size:cover;
}
5. @fontface
@font-face {
font-family: 'MyFont';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
font-family: 'MyFont';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
7. Crear esquinas redondeadas
.rounded {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
}
7. Crear esquinas redondeadas individuales
#BottomRight {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#BottomLeft {
height: 15px;
width:200px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}
#TopRight {
height: 15px;
width:200px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}
#TopLeft {
height: 15px;
width:200px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#BottomLeft {
height: 15px;
width:200px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}
#TopRight {
height: 15px;
width:200px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}
#TopLeft {
height: 15px;
width:200px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
