Logotipo tecnocodigo

Pagina Principal de Scripts
Volver

 



mini logotipo Diseño y Programación tecnocodigo

 

 

Publicidad 1
Boton Alta Articulo

Noticias del mes



Nueva Sección Visual Basic .NET

Diseño y Programación inaugura una nueva sección, un nuevo lenguaje de programación se suma a la larga lista de snippets. Visual Basic .NET. En el cuál se incluirán snippets de programación de PDA's (Pocket Pc's con Windows Mobile)..

 

boton negro

Mapa del Sitio. Sitemap

 Webstats4U - Web site estadísticas gratuito El contador para sitios web particulares

Logotipo tecnocodigo
Hay 8 visitantes activos

 

Buscador

HTML5/CSS3
Dhtml
JavaScript
VbScript
ASP
PHP
VB .NET
AJAX
Otros

ó
y


Cuadro Redondo

mini logotipo Diseño y Programación tecnocodigo

Zonas
Fotos con efecto Polaroid

          Podemos poner el atributo title a nuestras fotografías polaroids.

ul.polaroids a:after
{
   content: attr(title);
}

El modificador :nth-child es compatible con Safari y Firefox, para otros navegadores habrá que probarlo. Permite modificar los estilos según la posición del objeto.

Necesitamos la siguiente hoja de estilos, y posteriormente en BODY generar todas las imágenes dentro un listado UL/LI

<style>
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
  ul.polaroids li { display: inline; }
  ul.polaroids a { background: #fff; display: inline; float: left; margin:

0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family:

"Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -

webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba

(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform

.15s linear; -moz-transform: rotate(-2deg); }
  ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
  ul.polaroids a:after { content: attr(title); }
  
  ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -

moz-transform: rotate(2deg); }
  ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position:

relative; top: -5px;  -moz-transform: none; }
  ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg);

position: relative; right: 5px;  -moz-transform: rotate(5deg); }
  ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top:

8px; }
  ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top:

3px; }
  
  ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -

webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
  
  ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-

transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0

3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
  
  code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-

shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px;

}
  
  ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border:

solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-

border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
  ol.code li, ol.code li code { font-size: 14px !important; }
  ol.code code { background: none; }
</style>

 

La parte  del body podría quedar así... y repetir cada bloque <LI> </LI> por cada imgaen extra que quiera colocarse.

<ul class="polaroids">
   <li>
   <a title="Plaza de las Tendillas de Cordoba" href="http://www.califato.com">
   <img alt="Plaza Tendillas Cordoba" src="../demo_ficheros/Tendillas_Califato.jpg" width="190" height="190">
   </a>
  </li>
   <li>
   <a title="Plaza de las Tendillas de Cordoba" href="http://www.califato.com">
   <img alt="Plaza Tendillas Cordoba" src="../demo_ficheros/Tendillas_Califato.jpg" width="190" height="190">
   </a>
  </li>
</ul>

 

Nota:

Cuando pasamos por encima de nuestras fotografías podemos hacer que se agranden con la propiedad SCALE.

ul.polaroids a:hover
{
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  position: relative;
  z-index: 5;
}

Se puede aumentar el tamaño de escalado o disminuirlo cambiando el número 1.25 por otro.

Ejemplo:

 

 




 

 

 

 

 






 

 

 

 

 






 

 

 

 

 






Autor:
Email o Web:
Fecha articulo: 2012-11-16

Top 5 HTMLFIVE

Boton Script Top 5 Como crear un efecto de foto polaroid con HTML5 y CSS3

5900 veces vista

Boton Script Top 5 Un Script con bordes redondeados uniformes en las cuatro esquinas.

5839 veces vista
veces vista
veces vista
veces vista
 



InteBANNER
Fecha: 24/11/2017