blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘css’

S Gallery: une galerie d’images en jquery et css3 , responsive, qui plus est

décidément, en ce moment je ne poste que des plug-in d’effet et de galerie… en voici encore un en css3 jquery et html5. sobre et sympathique. facile à mettre en place. Il affiche les images en mosaïque et lorsque l’on clique sur l’une d’elle elle apparait en gros plan à l’écran. Rien d’extraordinaire. mais c’est léger et efficace. idéal pour un portfolio je pense.

 

voici le lien vers le site du développeur S Gallery

 

voici un lien vers la démo de S Gallery

 

enfin je vous conseil de voir tout ce que fait sara soueidan sur cette page, il y a plein de chose sympathiques

 

 

de nombreuses transitions et effet en javascript et css avec elementTransition.js

voici plein exemple d’animation et d’effet de transition en javascript et css. ces animations s’éxécutent automatiquement ou des lors que l’on clique sur un bouton.

rendez vous sur cette page:http://dan-silver.github.io/ElementTransitions.js/

il existe d’autre type d’animation en css ou javascript que vous pouvez consultez.

CSS: centrer,aligner du texte ou une image verticalement

voici comment aligner une image ou du texte verticalement sur vos pages web:

centrer une image verticalement en css

<p>      
<img src="css_centre_image_verticale.jpg" alt=""/>  
</p> 

et voici le css pour centrer cette image, on va utiliser la propriété css line-height sur le conteneur et vertical-align sur l’image:

p  {   
height:200px;  
line-height:200px;  
text-align:center; 
}   
 
img {   vertical-align:middle; } 

aligner du texte verticalement en css

même principe:

<p> 
<span>Blabla blabalalalablabla<br />blablabla </span> 
</p> 

avec le style CSS suivant:

p {  
height:200px;  
line-height:200px;  
text-align:center;  
}    

span {   
width:100px;   
border:1px solid #fff;  
vertical-align:middle;  
display:inline-block;  
line-height:1.2;   
text-align:left;  
}
%d blogueurs aiment cette page :