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: 4051
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: 960
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: 4051
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: 960
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: 849
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: 4051
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: 4051

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

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

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

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

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