Fork me on GitHub






"Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504
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>SarahDec '02</p>
  <img src="http://lorempixum.com/200/200/people/1">
</div>

Code CSS :
.polaroid {
  
positionrelative;
  
width220px;
}
 
.
polaroid img {
  
border10px solid #fff;
  
border-bottom45px solid #fff;
  
-webkit-box-shadow3px 3px 3px #777;
     
-moz-box-shadow3px 3px 3px #777;
          
box-shadow3px 3px 3px #777;
}
 
.
polaroid p {
  
positionabsolute;
  
text-aligncenter;
  
width100%;
  
bottom0px;
  
font400 18px/'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 
    
displaytable

.
img-box.left 
    
floatleft
    
margin10px 15px 10px 0

.
img-box.right
    
floatright
    
margin10px 3px 10px 15px

.
img-box.center 
    
margin10px auto

.
img-box img 
    
border-color#FFFFFF; 
    
border-imagenone
    
border-stylesolid
    
border-width5px 5px 26px
    
box-shadow5px 5px 15px #404040; 

.
img-box p 
    
margin-top: -24px
    
margin-left:5px
    
padding0
    
text-alignleft
}


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


Placez un effet dynamique de Zoom avant ? (voir lien)
Code CSS :
.img-box img:hover 
transformscale(1.5); 
-
moz-transitionall 0.6s ease-in-out 0s
-
webkit-transitionall 0.6s ease-in-out 0s
-
o-transitionall 0.6s ease-in-out 0s
-
ms-transitionall 0.6s ease-in-out 0s
transitionall 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-transitionall 0.5s ease;
     -
moz-transitionall 0.5s ease;
       -
o-transitionall 0.5s ease;
      -
ms-transitionall 0.5s ease;
          
transitionall 0.5s ease;
}
 
.
tilt:hover {
  -
webkit-transformrotate(-10deg);
     -
moz-transformrotate(-10deg);
       -
o-transformrotate(-10deg);
      -
ms-transformrotate(-10deg);
          
transformrotate(-10deg);
}




Au final, allez visiter ce très beau site qui vient tout juste de mettre en place ce genre d'effets !

Posté le : 12/07/2013 23:47

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 959
Ouahhh Merci alain, super boulot et j'ai appris plein de choses.

Posté le : 12/07/2013 23:51
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504
Menteurrrr, t'as pas eu le temps de tout lire et surtout de tout tester !
Vilain petit canaillou !

Posté le : 12/07/2013 23:52

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 959
De lire si si, juste assez vite pour voir tout ce que je n'imaginais pas. De tester non, pas encore mais je te fais confiance

Question à 2 Euros... Ca fonctionne avec tous les navigateurs ?

Posté le : 12/07/2013 23:55
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Semi pro
Inscrit: 13/04/2007 20:36
Messages: 824
Merci Alain pour tous, c'est effets en CSS.

Citation :
slider84 a écrit :
Question à 2 Euros... Ca fonctionne avec tous les navigateurs ?


Les 2€ tu peux faire un virement bancaire

Non pas tous les navigateurs.
Par exemple l'effet Placez un effet dynamique de Zoom avant ? ne fonctionne pas avec IE10 (encore lui )

Posté le : 13/07/2013 00:37

Une personne qui n'a jamais commis d'erreurs n'a jamais tenté d'innover. [Albert Einstein]
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504
A mais IE, faut même pas chercher à comprendre...

Ceci dit on a parlé de navigateur, pas de daubosoft...

Posté le : 13/07/2013 00:40

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Semi pro
Inscrit: 25/08/2005 22:51
De Aix les bains
Messages: 1270
Citation :
alain01 a écrit :
A mais IE, faut même pas chercher à comprendre...

Ceci dit on a parlé de navigateur, pas de daubosoft...
Mais qui représente encore tellement de % d'utilisateurs !

Posté le : 13/07/2013 18:07

Mieux vaut marcher dans la bonne direction que courir dans la mauvaise.
----------------------------------------
www.68hc08.net la communauté francophone.
www.avironroannelecoteau.net (créé mais plus exploité)
Partager Twitter Partagez cette article sur GG+
Re: "Ajout d'un cadre de photo", pour aller + loin...
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504

Posté le : 29/07/2013 23:52

Open in new window
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant




Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

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