CSS3 no es HTML5 pero se están desarrollando a la vez.
Para probar que soporta el navegador: http://html5test.com/
Ejemplo 1 que pone un recuadro de color con sombra en DIV
div {
background: none repeat scroll 0 0 red;
border-radius: 0 50px 50px 50px;
box-shadow: 10px 10px 10px blue;
box-shadow: 10px 10px 10px blue;
height: 500px;
width: 500px;
}
para que funcionen en navegadores antiguos se puede poner el prefijo (de los motores de los navegadores)
- moz (mozilla)
- webkit (chrome, safari)
- o (opera)
Hay varias librerías javascript que hacen que no necesites el prefijo
Ejemplo 2 que pone una imagen vectorial (svg) toda dentro del recuadro
http://www.pablomonteserin.com/apuntes/html/html5_exercises/j_styles/b_background.html
div {
height: 300px; width: 300px;
background: red url(mundo.svg);
background-size: 100% 100%;
}
height: 300px; width: 300px;
background: red url(mundo.svg);
background-size: 100% 100%;
}
permite poner capas de imagenes
div {
height: 300px; width: 300px;
background: url(edit-cut.svg), url(mundo.svg);
background-size: 100% 100%;
border-radius: 50px 50px 50px 50px;
box-shadow: 10px 10px 10px blue;
}
height: 300px; width: 300px;
background: url(edit-cut.svg), url(mundo.svg);
background-size: 100% 100%;
border-radius: 50px 50px 50px 50px;
box-shadow: 10px 10px 10px blue;
}
Ejemplo 3 de textos
sombras: text-shadow: 20px 20px 5px blue;
fuentes: tomarla de dafont.com, y descargar el fichero ttf deseado
<style>
h1 {
text-shadow: 10px 10px 5px blue;
font-family:miFuente;
}
@font-face{
font-family: miFuente;
src:url(sign-handwriting_demo-version.ttf)
}
</style>
<style>
div{ width: 300px; height:300px; }
#rotacion{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
background:Red;
}
#escala{
transform:scale(4,1);
-webkit-transform:scale(4,1);
-moz-transform:scale(4,1);
background:Blue;
}
</style>
</head>
<body>
<div id="rotacion">
</div>
<div id="escala">
</div>
no necesito flash
<style>
div{ width: 300px; height:300px; background:Red;
-webkit-transition: ease-in 2s; }
#anima:hover{
-webkit-transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="anima">
<h1>hola</h1>
</div>
Para terminar:
jQuery Transit es una librería jQuery que usa los esfectos de CSS3
No hay comentarios:
Publicar un comentario