Html5 y CSS3_01.pdf
6
Diseño y Animación con CSS Trainer IT: JCBRUNO Aut or: NTecnologias.or g
-
Upload
francisco-giovanny -
Category
Documents
-
view
219 -
download
0
Transcript of Html5 y CSS3_01.pdf
-
Diseo y Animacin con CSS Trainer IT: JCBRUNO
Autor: NTecnologias.org
-
Diseo y Animacin con CSS NTecnologias.org 2
Diseo y Animacin con CSS
Los navegadores basados en webkit permiten una serie de efectos visuales y de animacin muy
interesantes basados en CSS3.
Efectos Grficos Estticos:
Cmo dibujar gradientes, reflejos y esquinas redondeadas.
Generamos el siguiente cdigo como ejemplo:
Aplicamos algunos estilos para ir mejorando nuestro primer cdigo de ejemplo:
Efectos01
Introduccin
Captulo Primero
Captulo Segundo
Dentro de la etiqueta body
generamos unos div, cada uno
con id que los identifica y una
class con el nombre de botones
para los 3 div.
Guardamos con el nombre de
efectosgraficos.html
.botones {
position:absolute;
left:25px;
width:200px; height:30px;
text-align:center;
padding-top:11px;
border:1px solid #aaa;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
margin-top:10px;
}
#cap0 {top:25px;}
#cap1 {top:80px;}
#cap2 {top:135px;}
Dentro de la etiqueta head
generamos una etiqueta style.
Aplicamos estilos tanto para las
class botones y para los id cap0,
cao1 y cap2.
El resultado sera el siguiente:
-
Diseo y Animacin con CSS NTecnologias.org 3
El siguiente paso es redondear las esquinas de nuestros botones:
Ahora aplicamos un estilo gradiente a nuestros botones:
.botones {
position:absolute;
left:25px;
width:200px; height:30px;
text-align:center;
padding-top:11px;
border:1px solid #aaa;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
margin-top:10px;
-webkit-border-radius:15px;
}
#cap0 {top:25px;}
#cap1 {top:80px;}
#cap2 {top:135px;}
Seguimos trabajando dentro de
nuestros estilos.
En el estilo de la class botones
agregamos la siguiente lnea de
cdigo:
El resultado sera el siguiente:
.botones {
position:absolute;
left:25px;
width:200px; height:30px;
text-align:center;
padding-top:11px;
border:1px solid #aaa;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
margin-top:10px;
-webkit-border-radius:15px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #bbb),
color-stop(0.2, #ccc),
color-stop(1, #fff)
);
}
#cap0 {top:25px;}
#cap1 {top:80px;}
#cap2 {top:135px;}
Seguimos trabajando dentro de
nuestros estilos.
Agregamos la siguiente lnea de
cdigo:
El resultado sera el siguiente:
-
Diseo y Animacin con CSS NTecnologias.org 4
Por ultimo les aplicamos un estilo de sombra a nuestros botones:
En nuestro siguiente ejemplo creamos un efecto de reflejo a una imagen
Generamos el siguiente cdigo como ejemplo:
Generamos el siguiente cdigo como ejemplo:
.botones {
position:absolute;
left:25px;
width:200px; height:30px;
text-align:center;
padding-top:11px;
border:1px solid #aaa;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
margin-top:10px;
-webkit-border-radius:15px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #bbb),
color-stop(0.2, #ccc),
color-stop(1, #fff)
);
-webkit-box-shadow: 5px 5px 8px #aaa;
}
#cap0 {top:25px;}
#cap1 {top:80px;}
#cap2 {top:135px;}
Seguimos trabajando dentro de
nuestros estilos.
Agregamos la siguiente lnea de
cdigo:
El resultado sera el siguiente:
Efectos02
Bienvenidos al curso de
disear contenidos en HTML5 y CSS3. Dependiendo del tamao de pantalla de tu dispositivo, cambiaremos
tipo y cuerpo de la fuente para hacerla ms legible.
Dentro de la etiqueta body generamos un div, con un
id que los identifica y una etiqueta img src, para este
ejemplo necesitamos una imagen.
Guardamos con el nombre de efectosgraficos2.html
-
Diseo y Animacin con CSS NTecnologias.org 5
Aplicamos algo de estilo al texto
El siguiente paso es aplicar el efecto de reflejo a la imagen:
#texto {
position:absolute;
top:35px;
left:15px;
width:auto;
height:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#aaa;
padding-right:auto;
}
#texto img {
-webkit-box-reflect:below 1px -webkit-gradient(linear, left bottom, left top,
from(white), color-stop(0.7, transparent)) ;
}
#texto {
position:absolute;
top:35px;
left:15px;
width:auto;
height:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#aaa;
padding-right:auto;
}
Dentro de la etiqueta head
generamos una etiqueta style.
Aplicamos estilos al id.
El resultado sera el siguiente:
Seguimos trabajando dentro de
nuestros estilos.
Agregamos la siguiente lnea de
cdigo:
El resultado sera el siguiente:
