Tarjeta dinamica CSS
Posteado el 27. Aug, 2010 por tuto in Desarrollo Web, HTML y CSS
Utilizaremos a Dilbert como ejemplo para este tutorial en CSS que esperamos te sea de utilidad.
Aqui en este link podrás ver el demo en linea de lo que aprenderás.
PASO 1
Creamos una carpeta nueva llamada Tarjeta dinámica dentro de la cual vamos a crear otra carpeta llamada imágenes donde vamos a colocar las imágenes que nos servirán, en este caso tengo tres fotografías de Dilbert y una imagen de un fondo con rallas.
PASO 2
Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.
PASO 3
Ahora por debajo de la etiqueta vamos a copiar el siguiente código.
<link rel="stylesheet" href="css/estilo.css" type="text/css"/>
PASO 4
Con el comando Ctrl + S vamos a guardar nuestro HTML dentro de la carpeta tarjetas dinamicas con el nombre tarjeta dinamica.html.
PASO 5
Ahora con el comando Ctrl + N vamos a crear un nuevo documento CSS.
PASO 6
Dentro del documento vamos copiar el siguiente código.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var,small {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* @font-face definitions */
@font-face {
font-family: 'KulminoituvaRegular';
src: url('../fonts/kulminoituva.eot');
src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
}
@font-face {
font-family: 'NotethisRegular';
src: url('../fonts/Note_this.eot');
src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
}
/* General styling */
body {
background:#202020;
font-family: NotethisRegular, Verdana, Arial, sans-serif;
font-size:125%;
color:#202020;
}
h1, h2, h3, h4, h5, h6 {
font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
font-size:1.5em;
}
#wrapper {
width:990px;
margin:0 auto;
text-align:center;
padding-top:50px;
}
/* Index Card Styling */
ul#index_cards {
margin-top:50px;
text-align:center;
}
ul#index_cards li {
background:url(../imagenes/fondotarjeta.jpg) repeat;
height:350px;
width:300px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#card-1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
}
#card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#card-3 {
background-color:#69732B;
z-index:3;
}
#card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
#card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
}
/* Hover States */
ul#index_cards li:hover {
z-index:4;
}
#card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
}
#card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
#card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
}
/* Content Styling */
ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
}
PASO 7
Con el comando Ctrl + S vamos a guardar nuestro documento dentro de la carpeta css que esta dentro de la carpeta tarjetas dinamicas que habíamos creado anteriormente; lo guardamos con el nombre de estilo.css
PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas pegamos el siguiente código.
<div id="wrapper">
<ul id="index_cards">
<li id="card-1">
<h3>Catbert</h3>
<img src="imagenes/dilbert1.jpg" height="235" width="235" alt="Toucan" />
<p>Nombre: Catbert<br />
Gato malévolo director de recursos humanos.</p>
</li>
<li id="card-2">
<h3>Dilbert</h3>
<img src="imagenes/dilbert2.jpg" height="235" width="235" alt="Fox" />
<p>Nombre: Dilbert<br />
Excelente ingeniero que no saber relacionarse en sociedad</p>
</li>
<li id="card-3">
<h3>Dogbert</h3>
<img src="imagenes/dilbert3.jpg" height="235" width="235" alt="Dog" />
<p>Nombre: Dogbert<br />
Irreverente y mentiroso perro que se aprovecha del sistema</p>
</li>
</ul>
</div>
PASO 9
Dentro de la carpeta tarjetas dinamicas vamos a crear una carpeta llamada fonts dentro de la cual vamos a copiar el tipo de fuente kulminoituva.ttf y Note_this.ttf que nos servirán para darle estilo al texto de nuestras tarjetas.
PASO 10
Listo ya tenemos nuestro tutorial terminado.
Descarga el editable de Tarjeta dinamica CSS