Fork me on GitHub

Rapport de message :*
 

"Ajout d'un cadre de photo", pour aller + loin...

Titre du sujet : "Ajout d'un cadre de photo", pour aller + loin...
par alain01 sur 12/07/2013 23:47:31

Open in new windowAvez-vous lu cet article : Chronique d'alain01 : Tutoriel "Ajout d'un cadre de photo" ?

A la fin de l'article, j'indiquais qu'on pouvait aller encore plus loin dans les effets sur les photos.

Je vous donne ici quelques pistes.
Rassurez-vous, je ne suis pas expert en CSS, je suis allé butiner, glaner, piocher des infos sur de superbes sites. certains ont apporté également leur expertise et leur expérience dans ce domaine, suite à cet article, sur xoops.org

Des sites magnifiques traitant de CSS :
http://www.css3create.com/Galeries-Photos
http://designshack.net/articles/css/joshuajohnson-2/
http://designshack.net/articles/css/4 ... s-you-can-copy-and-paste/





Effect polaroid avec titre sur la cadre : (voir le lien 3)
Open in new window
Code HTML :
<div class="polaroid">
  <p>Sarah, Dec '02</p>
  <img src="http://lorempixum.com/200/200/people/1">
</div>

Code CSS :
.polaroid {
  position: relative;
  width: 220px;
}
 
.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
 
.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #888;
}


Positionnez vos photos parfaitement dans le texte ?
Open in new window
Code HTML :
<div class="img-box right"> 
  <img src="1.jpg" /> 
  <p>Image right</p> 
  </div>

Code CSS :
.img-box { 
    display: table; 
} 
.img-box.left { 
    float: left; 
    margin: 10px 15px 10px 0; 
} 
.img-box.right{ 
    float: right; 
    margin: 10px 3px 10px 15px; 
} 
.img-box.center { 
    margin: 10px auto; 
} 
.img-box img { 
    border-color: #FFFFFF; 
    border-image: none; 
    border-style: solid; 
    border-width: 5px 5px 26px; 
    box-shadow: 5px 5px 15px #404040; 
} 
.img-box p { 
    margin-top: -24px; 
    margin-left:5px; 
    padding: 0; 
    text-align: left; 
}


Placez un effet dynamique d'enfoncement :
Open in new windowCode CSS :
.img-box img:hover { 
    box-shadow: 1px 1px 3px #404040; 
}


Placez un effet dynamique de Zoom avant ? (voir lien)
Code CSS :
.img-box img:hover { 
transform: scale(1.5); 
-moz-transition: all 0.6s ease-in-out 0s; 
-webkit-transition: all 0.6s ease-in-out 0s; 
-o-transition: all 0.6s ease-in-out 0s; 
-ms-transition: all 0.6s ease-in-out 0s; 
transition: all 0.6s ease-in-out 0s;
}


Un effet de rotation sur la photo :
Open in new window
Code HTML :
<div class="tilt pic">
  <img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>

Code CSS :
/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}




Au final, allez visiter ce très beau site qui vient tout juste de mettre en place ce genre d'effets !
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

58 Personne(s) en ligne (44 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 58 | Plus ...