sábado, 21 de junio de 2014

El diseño CSS3: The Cat Template



1. Objetivo

No vamos a describir aquí todo el diseño CSS, que es además bastante clásico, sino que vamos simplemente a aprehender los estilos CSS3.


2. El diaporama

El diaporama se encuentra dentro de un elemento <section id="intro"> y presenta bordes redondeados.

Este es el estilo CSS:


#intro{
width: 960px;
position: relative;
float: left;
height:300px;
padding:10px;
background:#E9EAEB;
margin-top:52px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Como podemos ver, se han usado bordes redondeados de 5 píxeles: border-radius: 5px;.


3. Las fotografías de los artículos

En los artículos en columnas, las fotos de gatos presentan bordes redondeados y una sombra.


Este es el estilo CSS que se ha utilizado:

a.photo_hover3{
position:relative;
float: left;
margin:5px 13px 8px 0;
padding: 8px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px #D7D7D7;
-webkit-box-shadow: 2px 2px #D7D7D7;
}

Como podemos ver, se han usado bordes redondeados de 5 píxeles: border-radius: 5px; y se ha aplicado una sombra de 2 píxeles de color gris claro: box-shadow: 2px 2px #D7D7D7;.


4. Al pasar el cursor sobre las fotografías de los artículos

Al pasar el cursor con el ratón sobre las fotos, podemos ver un efecto de transparencia que se consigue gracias a la propiedad opacity:

a.photo_hover3:hover {
border: 1px solid #E1E1E1;
background-color:white;
opacity:0.5;
}


5. Los botones Read more

Los botones Read more son vínculos <a class="button">.


Esta clase permite aplicar una sombra: box-shadow: 2px 2px #D7D7D7;.

.button {
width: 80px;
height:16px;
position:relative;
margin-top:12px;
padding:9px;
background:#E9EAEB;
display: inline-block;
color:#FF9966;
font-weight:bold;
cursor: pointer;
text-align: center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
text-decoration:none;
-moz-box-shadow: 2px 2px #D7D7D7;
-webkit-box-shadow: 2px 2px #D7D7D7;


Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada