Hola a Todos
Bueno amigos en esta ocasión les dejo unos estilos y efectos para tus webs o blogs
Empecemos con el Post!
Efecto - DVD Style
Este es un cased para dvd desarrollado con css, es simple y tiene un efecto al poner el mouse ensima, creo que seria de gran utilidad sobre todo para webs sobre películas.
Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas correspondientes, ejemplo:
Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin> encima de eso ponen esto:
#movie-style {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
float: left;
margin: 0 90px 40px 0;
position: relative;
}
#movie-style a {
display: block;
height: 250px;
line-height: 0 !important;
z-index: 100;
}
#movie-style h1 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 25px;
color: #FFF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 10px 0;
position: absolute;
text-align: center;
width: 180px;
z-index: 60;
text-shadow: 1px 1px 0 #000;
}
#movie-style:hover h1 {
color: #66bcff;
}
.mask-dvd {
background: url("https://lh4.googleusercontent.com/-UEqY1GQVXW0/UONbCB189PI/AAAAAAAAEOs/f-lrIbGhPGc/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;
box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
height: 250px;
left: 0;
position: absolute;
top: 5px;
width: 180px;
}
.corte-movie {
border-bottom: 5px solid #222;
border-radius: 3px 3px 3px 3px;
border-right: 5px solid #222;
border-top: 5px solid #222;
float: left;
height: 250px;
overflow: hidden;
position: relative;
width: 180px;
z-index: 50;
}
.corte-movie img {
max-height: 300px;
}
.dvd-rol {
background: url("https://lh6.googleusercontent.com/-j4KCL66siz8/UONbAywfHWI/AAAAAAAAEOc/go15jf-etWA/s1600/dvd.png") no-repeat scroll 0 0 transparent;
display: block;
height: 180px;
position: absolute;
right: 0;
top: 50px;
transform: rotate(100deg);
-moz-transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
width: 180px;
z-index: 10;
}
.dvd-rol, #movie-style h1 {
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
#movie-style:hover .dvd-rol {
right: -73px;
transform: rotate(242deg);
-moz-transform: rotate(242deg);
-webkit-transform: rotate(242deg);
-o-transform: rotate(242deg);
}
Por ultimo solo agregaremos el código en html donde queramos el efecto:
<div id="movie-style">
<span class="corte-movie">
<img src="url de la imagen" />
</span>
<h1>Titulo portada DVD</h1>
<a href="#" class="mask-dvd"></a>
<i class="dvd-rol"></i>
</div>
Cuando pases el mouse por encima se vería de la siguiente manera:
Efecto - CD Style
Este esta dedicado mas que todo para las webs sobre música.
Nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin> encima de eso ponen esto:
#music-style {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
float: left;
margin: 0 90px 40px 0;
position: relative;
}
#music-style a {
display: block;
line-height: 0 !important;
position: absolute;
z-index: 100;
}
#music-style h1 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 25px;
color: #FFF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 10px 0;
position: absolute;
right: 3px;
text-align: center;
text-shadow: 1px 1px 0 #000000;
width: 210px;
z-index: 60;
}
#music-style:hover h1 {
color: #66bcff;
}
.mask-cd {
background: url("https://lh3.googleusercontent.com/-_stK-cZvmiM/UONbBgBpnzI/AAAAAAAAEOk/22JaflzSH-s/s1600/mask-cd.png") no-repeat scroll 0 0 transparent;
box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
height: 190px;
left: 0;
top: 3px;
width: 250px;
}
.corte-music {
border-color: #222;
border-style: solid;
border-width: 3px 3px 3px 40px;
float: left;
height: 190px;
overflow: hidden;
position: relative;
width: 210px;
z-index: 50;
}
.corte-music img {
max-height: 300px;
}
.cd-rol {
background: url("https://lh4.googleusercontent.com/-WwGYVVIIaZE/UONbACb0dVI/AAAAAAAAEOU/Yl1e17olN7U/s1600/cd.png") no-repeat scroll 0 0 transparent;
display: block;
height: 180px;
position: absolute;
right: 0;
top: 7px;
transform: rotate(-230deg);
-moz-transform: rotate(-230deg);
-webkit-transform: rotate(-230deg);
-o-transform: rotate(-230deg);
width: 180px;
z-index: 10;
}
.cd-rol, #music-style h1 {
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
#music-style:hover .cd-rol {
right: -73px;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
}
Ahora agregamos el código en html donde queramos el efecto:
<div id="music-style">
<span class="corte-music">
<img src="url de la imagen" />
</span>
<h1>Titulo portada CD</h1>
<a href="#" class="mask-cd"></a>
<i class="cd-rol"></i>
</div>
Cuando pases el mouse por encima se vería de la siguiente manera:
Delux Menu - Pages Blogger
Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas correspondientes, ejemplo:
Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edicion html y buscaremos ]]></b:skin> encima de eso ponen esto:
#delux-menu {
border-bottom: 5px solid #000;
border-radius: 5px ;
box-shadow: 0 7px 9px -2px #333;
float: left;
overflow: hidden;
}
#delux-menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#delux-menu ul > li {
border-right: 1px solid #151515;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
}
#delux-menu div {
margin: 0 !important;
}
#delux-menu h2 {
display: none !important;
}
#delux-menu ul li > a {
background:#444;
background-image: linear-gradient(bottom, #333 0%, #666 100%);
background-image: -o-linear-gradient(bottom, #333 0%, #666 100%);
background-image: -moz-linear-gradient(bottom, #333 0%, #666 100%);
background-image: -webkit-linear-gradient(bottom, #333 0%, #666 100%);
background-image: -ms-linear-gradient(bottom, #333 0%, #666 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #333),color-stop(1, #666));
border-bottom: 1px solid #5D5D5D;
box-shadow: 0 -16px 49px -5px rgba(0, 0, 0, 0.4) inset;
color: #000;
display: block;
font-family: Arial,Helvetica;
font-size: 13px;
font-weight: bold;
padding: 16px 17px;
text-decoration: none !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
#delux-menu ul li > a:hover {
box-shadow: 0 0;
}
#delux-menu li.selected > a {
background: none repeat scroll 0 0 #272727;
border-bottom: 1px solid #000;
color: #37D9F2;
margin-bottom: -5px;
margin-top: 5px;
padding: 13px 17px 19px;
text-shadow: 0 0 12px #37D9F2, 0 -1px 0 #000;
}
Por ultimo buscaremos el lugar en donde deseamos nuestro menú el cual funcionara atravez de las secciones de blogger, una vez hayamos decidido el lugar en donde lo pondremos copiamos el siguiente código y lo pegamos en dicho lugar:
<div id='delux-menu'>
<b:section class='menu-principal' id='menu-principal' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'/>
</b:section>
</div>
Y listo, este menú antes de publicarse se agrego a varios templates default de blogger y algunos trabajos, el efecto final puede variar dependiendo de nuestros diseños, el menú les quedara de esta forma, dependiendo de la sección en donde se encuentren quedara seleccionado en el menú:
Multi fade album
Bueno se trata de otro álbum para los que usan muchas imágenes en una sola entrada pero la peculiaridad de este es que muestra por cada sección 3 imágenes, puede ser útil para muchas cosas como por ejemplo si tienen un blog de imágenes pueden hacer una sección con este álbum y por cada elemento colocar tres imagenes correspondiente a esa categoría, si es naturaleza entonces de plantas, si es de fauna entonces animales, de esa forma al darle click llevara a sus usuario a una entrada con todas las imágenes correspondiente a esa categoría, pero en fin, el uso que le den corre por cuenta de cada webmaster, yo solo les comparto n_n
Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas correspondientes, ejemplo:
Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edicion html y buscaremos ]]></b:skin> encima de eso ponen esto:
#multi-img {
clear: both;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 910px;
}
.corte-img {
background: #222;
float: left;
height: 184px;
margin: 2px;
overflow: hidden;
position: relative;
width: 222px;
}
.corte-img img {
left: 0;
margin-left: -25px;
margin-top: -25px;
position: absolute;
top: 0;
opacity:1;
z-index:10;
}
/******* Todas las propiedades que usan transition para regresar *******/
.corte-img img, .corte-img:hover img.zc, .corte-img > a, .corte-img span {
transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
-webkit-transition: all 500ms ease-in-out 0s;
}
/**********************************************************/
.corte-img:hover img.zc, .corte-img:hover img.zb, .corte-img:hover img.za {
opacity:0;
}
.corte-img:hover img.zb {
transition: all 500ms ease-in-out 1s;
-moz-transition: all 500ms ease-in-out 1s;
-webkit-transition: all 500ms ease-in-out 1s;
-o-transition: all 500ms ease-in-out 1s;
}
.corte-img:hover img.za {
transition: all 500ms ease-out 2s;
-moz-transition: all 500ms ease-out 2s;
-webkit-transition: all 500ms ease-out 2s;
-o-transition: all 500ms ease-out 2s;
margin-left: -100px;
margin-top: -70px;
}
.corte-img > a {
display: block;
height: 184px;
line-height: 184px;
position: relative;
text-align: center;
text-decoration: none;
z-index:50;
}
.corte-img span {
color: #AFAFAF;
font-family: Arial,Helvetica;
font-size: 18px;
font-weight: bold;
opacity: 0;
position: relative;
top: -60px;
}
.corte-img:hover span {
opacity:1;
top:0;
transition: all 500ms ease-in-out 2.3s;
-webkit-transition: all 500ms ease-in-out 2.3s;
-o-transition: all 500ms ease-in-out 2.3s;
-moz-transition: all 500ms ease-in-out 2.3s;
}
por ultimo la estructura html, ubiquenla en donde deseen el efecto:
<div id="multi-img">
<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
<img class="za" src="url de la imagen 1" />
<img class="zb" src="url de la imagen 2" />
<img class="zc" src="url de la imagen 3" />
</a>
</div>
<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
<img class="za" src="url de la imagen 1" />
<img class="zb" src="url de la imagen 2" />
<img class="zc" src="url de la imagen 3" />
</a>
</div>
<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
<img class="za" src="url de la imagen 1" />
<img class="zb" src="url de la imagen 2" />
<img class="zc" src="url de la imagen 3" />
</a>
</div>
</div>
Y listo, eso seria todo, pueden agregar cualquier cantidad de elementos dentro del álbum.
Bueno amigos eso es todo si quieres ver mas estilos y saber mas por favor revisa las fuentes.
Si quieres anime por mf no dudes en seguirme