<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

IMÁGENES > Adornos

 

Una forma de presentar imágenes en una página Web es modificando sus bordes, añadiendo sombras, o cambiando su opacidad. Además podemos "transformarlas" si pasamos el cursor por encima o hacemos clic en la imagen.

Todo esto se realiza de forma fácil utilizando reglas de CSS 3 que soportan todos los navegadores actuales excepto el que todos estáis pensando.

Para hacer todo esto crearemos algunas reglas CSS utilizando selectores de Clase y que posteriormente añadiremos como atributo class="nombre_regla" a la etiqueta <img> o a la etiqueta contenedor que incluya la imagen.

 

Sombras

Regla CSS

.sombra1-img { box-shadow:1px 1px 4px #ff0000; margin: 10px 15px;}
.sombra2-img { box-shadow:0px 0px 16px #0000ff; margin: 10px 15px;}
.sombra3-img { box-shadow:-8px -8px 16px #00ff00; margin: 10px 15px;}
.sombra4-img { box-shadow:0px 12px 16px #999933; margin: 10px 15px;}

Vista (imagen 1, imagen 2, imagen 3, imagen 4)

****

 

He puesto las sombras de colores para que se aprecie mejor el efecto, lo normal serían sombras con tonos grises.

Bordes

Regla CSS

.borde1-img {
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: #fff;
  padding: 4px;
  border: 1px solid #666666;
  margin: 10px 15px;}

.borde2-img {
  -webkit-border-top-left-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -moz-border-radius-topleft: 50px;
  -moz-border-radius-bottomright: 50px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background: #fff;
  padding: 4px;
  border: 1px solid #666666;
  margin: 10px 15px;}  

Vista (imagen 1, imagen 2)

**

 

Opacidad

Regla CSS


.opacidad1-img { opacity: 0.2	}
.opacidad2-img { opacity: 0.4	}
.opacidad3-img { opacity: 0.6	}
.opacidad4-img { opacity: 0.8	}
.opaco { background: #ff9900;
  border: 1px solid #666666;
  padding: 4px; margin: 10px;}
.opaco:hover {opacity: 1;}

Vista (imagen 1, imagen 2, imagen 3, imagen 4)

****

 

Transformaciones

Regla CSS

.rota1-img {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
margin: 10px 50px;}

Vista (imagen 1, imagen 2, imagen 3, imagen 4)

*

Botones

Reglas CSS


/* --------- Botón con animación al presionarlo */

.caja-boton{margin: 50px 0;}
.boton { -moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2); box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2); border: 1px solid; padding: 8px 12px; color: #fff; font-family: "Myriad Pro", Arial, Tahoma, sans-serif; font-size: 1.4em; font-weight: bold; text-shadow: -1px -1px rgba(0,0,0,0.1), 0 0 15px rgba(255,255,255,0.75); white-space: nowrap; background: #777; border-color: #777; text-decoration: none; font-style: normal; text-transform: none; position: relative; } .boton:hover,.boton:focus { bottom: 1px; -moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2); box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2); background: #999; border-color: #999; /* color por defecto */ } .boton:active { top: 1px; -moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2); box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2); } /* --------- Forma */ .cuadrado { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .redondo { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } /* --------- Color */ .azul,.azul:focus { background: #166ba9; border-color: #166ba9; } .azul:hover {
background: #3390CF;
border-color: #3390CF;
}

Código HTML


<p class="caja-boton">
<a href="#" class="boton redondo azul">Esto es un botón redondo y azul</a>
</p>

Este ejemplo

*

Referencia: zardi
Otros botones CSS3 Buttons

 

 


- (cc) 2012, 3con14 -