Tutoriales

Boxshadow con CSS3

Imprimir
Valoración del Usuario:  / 11

Hemos aprendido anteriormente cómo poner sombra en los textos con CSS3, sin embargo esta vez aprenderemos cómo hacer unas sombras en las cajas de los textos dándonos la sensación de tener además una animación en la caja de texto:

boxshadow

Add a comment (0)

Leer más:Boxshadow con CSS3

Botones de Google con CSS

Imprimir
Valoración del Usuario:  / 9

Hace dos semanas expliqué cómo hacer unos botones al estilo de Youtube, esta vez enseñaré cómo hacer uno como los de Google. Veamos ahora cómo quedan:

 gbutton

El código HTML será simple como siempre:

Add a comment (0)

Leer más:Botones de Google con CSS

Texto deslizante con CSS3

Imprimir
Valoración del Usuario:  / 4

Una vez hicimos algo muy parecido a este tipo de texto deslizante pero dentro de la imagen.

Veamos el código HTML:

<div id="tdesliz">
 <img src="/fondo/jupiter.jpg">
 <p><a href="/<a href="http://html5tutoriales.com"">http://html5tutoriales.com"</a>; target="_blank">¡Vuelve a HTML5tutoriales!</a></p>
 </div>

Add a comment (0)

Leer más:Texto deslizante con CSS3

Efecto giro con CSS3

Imprimir
Valoración del Usuario:  / 11

Uno de los efectos más interesantes en CSS3 es el efecto giro, lo podemos usar en páginas con imágenes interactivas. Veamos el código:

<div id="container">
 <div class="giro">
 <img alt="img0" src="/fondo/rm.png" />
 <img alt="img1" src="/fondo/rm.png" />
 <img alt="img2" src="/fondo/rm.png" />
 <img alt="img3" src="/fondo/rm.png" />
 </div>
 </div>

Aprovecharé y usaré una imagen del equipo favorito para la jornada de hoy de la UCL: el Real Madrid.

Add a comment (0)

Leer más:Efecto giro con CSS3

Zoom con CSS3

Imprimir
Valoración del Usuario:  / 5

Con CSS3 como ya he explicado muchísimas veces se puede crear casi cualquier cosa (en este momento estoy desarrollando una forma de hacer un Rasengan con CSS3), esta vez mostraré una forma de hacer zoom en la imagen solo con CSS3.

En el código HTML crearemos algo simple de dos div y 4 imágenes:

<div id="container">
 <div class="zoom">
 <img alt="imagen1" src="/fondo/panorama.jpg" />
 <img alt="imagen2" src="/fondo/panorama.jpg" />
 <img alt="imagen3" src="/fondo/panorama.jpg" />
 <img alt="imagen4" src="/fondo/panorama.jpg" />
 </div>

Add a comment (0)

Leer más:Zoom con CSS3

Efecto up de mouseover con CSS3

Imprimir
Valoración del Usuario:  / 2

Con CSS3 hemos aprendido a hacer maravillas, desde lightbox hasta burbujas de diálogo. Esta vez quiero enseñar un efecto de levantamiento con mouseover en CSS3.

Veamos cómo funciona: en el código HTML crearemos un div con cuatro imágenes para que sirvan de ejemplo en nuestra nueva creación:

<div class="up">
 <img alt="imagen1" src="/imagenes/jupiter1.png" />
 <img alt="imagen2" src="/imagenes/jupiter1.png" />
 <img alt="imagen3" src="/imagenes/jupiter1.png" />
 <img alt="imagen4" src="/imagenes/jupiter1.png" />
 </div>

Luego...

Add a comment (0)

Leer más:Efecto up de mouseover con CSS3

Subcategorías

html5 valid