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