Tecnología y Coaching para Emprendedores

7 fragmentos de CSS3 para mejorar tu sitio web

css3

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");

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);

 

3. Usar transparencia/opacidad

.transparencia {

   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;

}

 

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');

    }

 

7. Crear esquinas redondeadas

.rounded { 

    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;

}


Comentarios

  • Carlos Benitez

    Buen aporte; pero podemos completarlas un poco.

    Por ejemplo, si queremos que los gradientes se apliquen a un mayor conjunto de navegadores, podemos añadir más reglas:

    .box_gradient {
    background-color: #444444;
    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
    background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(top, #444444, #999999);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′); /* IE6–IE9 */
    }

    En la redimensión del fondo, no es válido el modificador para Opera, por lo que tendríamos:

    .box_bgsize {
    -moz-background-size: 100% 100%; /* FF3.6 */
    -webkit-background-size: 100% 100%; /* Saf3-4 */
    background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */
    }

    Para todas estas consideraciones, no hay mejor recurso online que:
    http://css3please.com/

    Saludos!