-
Par GloriaV le 14 Juillet 2015 à 10:46
HTML
<div class="stack rotated-left"><img src="http://th05.deviantart.net/fs70/200H/i/2012/280/d/5/realized_fractal_integration_by_sageman2012-d5h2ugy.jpg"></div>CSS
.stack { position: relative; z-index: 10; }
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 5px; width: 165px; height: 200px; position: absolute; border: 10px solid #fff; left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */
/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.stack.rotated-left:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 10:55
http://thecodeplayer.com/walkthrough/simple-hover-effects-with-css3-filters
HTML
<div id="gallery"><a href="#"> <!-- Title and classes --> <span class="title">Saturate</span> <img class="saturate" src="http://file.mobilmusic.ru/ed/8b/77/1018670.gif" alt="" /> </a></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);border-radius: 5%/10%;
border: 1px dotted #000;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 5%/10%;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background:#;
}
/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
--></style>
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:01
HTML
<div id="gallery"><a href="#"> <span class="title">Grayscale</span> <img class="grayscale" src="http://www.gifzona.ru/i/priz_lov/21.gif" alt="" /> </a> </div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 10%;
border: 1px dotted #000;
border-radius: 50% 50% 50% 50%;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 10%;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.grayscale {-webkit-filter: grayscale(100%);}
--></style>
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:11
HTML
<div id="gallery"><a href="#"> <span class="title">Contrast</span> <img class="contrast" src="http://s3.argim.net/files/s/bluelove_wxl4pool.gif" alt="" /></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 30%;
border: 1px dotted #000;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 30%;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.contrast {-webkit-filter: contrast(160%);}
--></style>
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:20
HTML
<div id="gallery"><a href="#"> <span class="title">Brightness</span> <img class="brightness" src="http://fondos-animados.com/gifs/Serdechko.gif" alt="" /> </a></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 10em/2em;
border: 1px dotted #000;
border-radius: 50% 50% 50% 50%;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 10em/2em;
border: 1px dotted #000;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.brightness {-webkit-filter: brightness(0.85);}
--></style>
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:26
HTML
<div id="gallery"><a href="#"> <span class="title">Blur</span> <img class="blur" src="https://lh3.googleusercontent.com/-osIOroPDG7k/U0FJDO1BmRI/AAAAAAAANTw/J-asmW-f0RQ/w500-h280-no/26.gif" alt="" /> </a> </div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 50% 50% 50% 50%;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 10em/2em;
border: 1px dotted #000;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background:#;
}
/*Filter styles*/
.blur {-webkit-filter: blur(3px);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:31
HTML
<div id="gallery"><a href="#"> <span class="title">Invert</span> <img class="invert" src="http://fondos-animados.com/gifs/i-love-you2.gif" alt="" /> </a></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 40em;
border: 1px dotted #000;
border-radius: 50% ;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 10em/2em;
border: 1px solid #fff;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.invert {-webkit-filter: invert(100%);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:36
HTML
<div id="gallery"><a href="#"> <span class="title">Sepia</span> <img class="sepia" src="http://www.gifzona.ru/i/priz_lov/23.gif" alt="" /> </a> </div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 40px;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 40px/10px;
border: 1px solid #fff;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.sepia {-webkit-filter: sepia(100%);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:40
HTML
<div id="gallery"><a href="#"> <span class="title">Hue-rotate</span> <img class="huerotate" src="http://animashki.mirfentazy.ru/images/stories/kartinki/love/animatsiya_love_018.gif"width="210" height="290" alt="" /> </a> </div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 50%;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 10em;
border: 1px solid #fff;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.huerotate {-webkit-filter: hue-rotate(180deg);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 11:44
HTML
<div id="gallery"><a href="#"> <span class="title">Opacity</span> <img class="opacity" src="https://lh4.googleusercontent.com/-XKMrCBgRcJg/U-C07fYE6OI/AAAAAAAA0bs/u3dL2-3UK-0/w500-h279-no/1.gif"width="250" height="200" alt="" /> </a></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
border-radius: 50% ;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 24px;
border: 1px solid #fff;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background: #;
}
/*Filter styles*/
.opacity {-webkit-filter: opacity(50%);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 12:35
Este código no permite obtener URL, copiar o guardar. Solamente se puede "Inspeccionar elemento".
HTML
<div id="lac" style="margin-left: auto; margin-right: auto; background-image: url('http://file.mobilmusic.ru/64/c1/d3/1190847.gif'); background-size: cover; border: 6px solid white; box-shadow: 4px 4px 6px black;"> </div>
CSS
<style type="text/css"><!--
#lac{transition:all 2s linear;width:290px;height:100px;border-radius: 5%;}
#lac:hover{width:290px;height:495px;border-radius: 5%;}br> --></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 12:38
Este código no permite obtener URL, copiar o guardar. Solamente se puede "Inspeccionar elemento".
HTML
<div class="hepat1" style="width: 240px; height: 300px; border: 2px groove #f49c81; background-image: url('http://file.mobilmusic.ru/df/2f/ae/1176564.gif');"> </div>
CSS
<style type="text/css"><!--
.hepat1{
-webkit-transition:all 2s linear;
-moz-transition:all 2s linear;
border-radius: 3em/1em;
border: 1px dotted #000;
background-position: center center;
box-shadow: 2px 2px 10px #000;
background-size:100%;}
.hepat1:hover{
background-position: center center;
background-size:130%;}>--></style>
votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 12:43
http://pourquoipas732.eklablog.com/formes-diverses-a115238556
HTML
<p><img class="hepat" src="http://s3.argim.net/files/s/angel_zadira_.gif" alt="" /></p>
CSS
<style type="text/css"><!--
.hepat{
border-radius:250px;
border:6px solid white;
box-shadow:6px 6px 8px black;
-webkit-animation:hep1 3s linear 0s infinite alternate;
-moz-animation:hep1 3s linear 0s infinite alternate;
-webkit-animation-play-state:running;
-moz-animation-play-state:running;}
.hepat:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;}
@-webkit-keyframes hep1{
0% {-webkit-transform:translate(0px,0px);}
100% {-webkit-transform:translate(200px,0px);}}
@-moz-keyframes hep1{
0% {-moz-transform:translate(0px,0px);}
100% {-moz-transform:translate(200px,0px);}}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 12:47
http://pourquoipas732.eklablog.com/flip-rond-et-ovale-a117215784
HTML
<div id="flip-containera">
<div id="flippera">
<div id="fronta"><img style="border-radius: 50%; border: 2px dotted grey; box-shadow: 4px 4px 6px black;" src="http://file.mobilmusic.ru/26/ba/4c/1169786.gif" alt="" /></div>
<div id="backa"><img style="border-radius: 50%; border: 2px dotted grey; box-shadow: 4px 4px 6px black;" src="http://file.mobilmusic.ru/d8/d2/ed/1181447.gif" alt="" /></div>
</div>
</div>CSS
<style type="text/css"><!--
#flip-containera {width:800px; height:600px;
perspective: 1000;
margin-left:auto; margin-right:auto;}
#flip-containera:hover #flippera, #flip-containera.hover #flippera {transform: rotateY(180deg);}
#flip-containera, #fronta, #backa {width: 800px; height: 600px;}
#flippera {transition: 1s; transform-style: preserve-3d; position: relative;}
#fronta, #backa {backface-visibility: hidden; position: absolute; top: 0; left: 0;}
#fronta {z-index: 2; transform: rotateY(0deg);}
#backa {transform: rotateY(180deg);}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 12:51
HTML
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img style="border-radius: 50%; border: 10px solid white;" src="https://lh3.googleusercontent.com/-8_Yh3KupNZs/U3jA5Y_oMnI/AAAAAAAAaR4/x0xGiy9qcJw/w359-h544-no/11.jpg" alt="" width="160" height="220" /></div>
<div class="back face"><img style="border-radius: 50%; border: 10px solid white;" src="https://lh6.googleusercontent.com/-6HNw97idMTM/U3jAPmf3NXI/AAAAAAAAaQ4/wbqMsAzXBxw/w367-h544-no/1.gif" alt="" width="160" height="220" /></div>
</div></div>CSS
<style type="text/css"><!--
#f1_container {position: relative; width: 160px; height: 220px; z-index: 1; margin-left:auto; margin-right:auto; perspective: 100;}
#f1_card {width: 160px; height: 220px; transform-style: preserve-3d; transition: all 1.0s linear;} #f1_container:hover #f1_card {transform: rotatex(180deg);}
.face {position: absolute; width: 160px; height: 220px; backface-visibility: hidden;}
.face.back { display: block; transform: rotatex(180deg); width: 160px; height: 220px; }
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 13:06
Efecto" Flip"
HTML
<div class="flip-container">
<div class="flipper"><!-- Front -->
<div class="front"><img style="border: 1px dotted #d9d9d9; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://gif" alt="" width="180" height="230" /></div>
<!-- BACK -->
<div class="back"><img style="border: 1px dotted #BE433A; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://gif" alt="" width="180" height="230" /></div></div></div>CSS
<style type="text/css"><!--
/* Asignamos perspectiva a nuestro contenedor */
.flip-container {
perspective: 1000;
border: 1px dotted #d9d9d9;
border-radius:160%/20%;
/* Para Firefox - IE10+ debemos agregar propiedades extras */
-moz-transform-style: preserve-3d;
-moz-transform: perspective(1000px);
-ms-transform-style: preserve-3d;
-ms-transform: perspective(1000px);
}
.flip-container, .front, .back {
width: 189px;
height: 239px;
}
/* preserve-3d: Indicamos que todo elemento hijo del div flipper estara en un espacio 3D XYZ */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
/* Backface: Nos permite ocultar la parte posterior de los elementos html */
/* en este caso FRONT - BACK */
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* FRONT: eje Y = 0 */
.front {
transform: rotateY(0deg);
background: #bcc7eb;
border-radius:160%/20%;
}
/* BACK: eje Y = -180, se mantendra oculto */
.back {
transform: rotateY(-180deg);
background: #dbafa5;
border-radius:160%/20%;
}
/* Hover */
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container:hover .back {
transform: rotateY(0deg);
} /* Toggle - Moviles */
.flip-container.hover .front {
transform: rotateY(180deg);
}
.flip-container.hover .back {
transform: rotateY(0deg);
}
--></style> votre commentaire
-
Par GloriaV le 14 Juillet 2015 à 13:10
Opacidad para todos imágenes
HTML
<p><img style="border: 1px dotted #fff; -webkit-border-radius: 50px 10px; -moz-border-radius: 50px 10px; border-radius: 50px 10px; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://static1.vayagif.com/gifs/2012/11/GIF_140668_quien_dijo_que_los_gatos_no_dan_carino.gif" alt="" width="255" height="259" /></p>
CSS
<style type="text/css"><!--
img { -moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 0.35;
}
img:hover {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 10;
}
--></style> votre commentaire
-
Par GloriaV le 22 Juillet 2015 à 18:30
Brillo
HTML
<div class="imagen_brillo"><img style="border: 0px solid #0033c7; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: #000 3px 3px 9px; -moz-box-shadow: #000 3px 3px 9px; box-shadow: #000 3px 3px 9px;" src="http://file.mobilmusic.ru/f0/5a/62/664281.gif" alt="" width="200" height="200" />
<div class="hover_brillo" style="text-align: right;"> </div></div>CSS
.imagen_brillo{ width: 200px;height: 200px;
margin: 30px auto;position: relative;
border: 1px dotted #666;
border-radius: 1em;
box-shadow: 3px 2px 6px #000000;}
.hover_brillo{width:100%; height: 100%;
background-image: url(http://1.bp.blogspot.com/-UQeeL-DK98A/T2zPfW2tpSI/AAAAAAAACjc/w1G3bjYHbzM/s1600/Hover%2Bbrillo.png);
border: 1px dotted #666; border-radius: 1em;
box-shadow: 3px 2px 6px #000000;
position: absolute;background-position: -265px 0; left:0px; top:0px;
background-repeat:no-repeat;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease; transition: background-position .3s ease;}
.hover_brillo:hover{ background-position: 10px 0;} votre commentaire
-
Par GloriaV le 22 Juillet 2015 à 18:37
HTML
<div id="containerEx16">
<div class="ex16"><img src="http://jpeg" alt="" width="240" height="250" /> <img src="http://jpeg" alt="" width="240" height="250" /> </div>
</div>CSS
<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx16 {width: 800px;
margin: 0 auto;
}
.ex16 img {
margin: 10px;
border-radius: 5% 20%;
border: 1px solid #ccc;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 3px rgba(0,0,0,0.2);
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
-ms-transition-duration: 0.2s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
}
.ex16 img:hover {
-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
>-o-transform:scale(1.1);
-ms-transform:scale(1.1);
box-shadow:#707070 4px 2px 2px; /*Sombra sobre toda la imagen*
/-webkit-box-shadow:#707070 4px 2px 2px;
-moz-box-shadow:#707070 4px 2px 2px;
-ms-box-shadow:#707070 4px 2px 2px; opacity: 1
;}--></style> votre commentaire
-
Par GloriaV le 22 Juillet 2015 à 19:12
HTML
<div id="containerEx17">
<div class="ex17"><img src="http://gif" alt="img0" width="140" height="170" /> <img src="http:/gif" alt="img1" width="140" height="170" /> <img src="http://gif" alt="img1" width="140" height="170" /></div>
</div>CSS
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx17 {width: 800px;
}
.ex17 img {
border-radius: 10px 30px;
box-shadow: 2px 1px 8px #000000;
margin: 10px 10px 15px 10px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex17 img:hover {
-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
>-o-transform:scale(1.1);
-ms-transform:scale(1.1);
box-shadow:#707070 4px 2px 2px; /*Sombra sobre toda la imagen*
/-webkit-box-shadow:#707070 4px 2px 2px;
-moz-box-shadow:#707070 4px 2px 2px;
-ms-box-shadow:#707070 4px 2px 2px; opacity: 1
;
margin-left: -50px;} votre commentaire
-
-
Numquam renuntiabit
<a href="http://tutorialgloriav.eklablog.com/"
target="_blank"><img src=
"http://ekladata.com/cEEYfZtSNwWA8Pt7k--C97p7qFs/34.gif"
alt="" width="120" /> -
Con mucho gusto y
gran placer os
presentó mi ayudante
-
"No puedes enseñárselo todo: sólo puedes ayudarle a encontrarlo por sí mismo."
Galileo Galilei y
-
Vivir en armonía con el universo es vivir lleno de alegría, amor y abundancia.
Shakti Gawain -
-
-
-
GloriaV666@gmail.com
Créer mon blog