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

 

 

Publicités

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;  
}

Spritebox : créer ses classes css par rapport à une image de votre site

C’est une tuerie (enfin je trouve) spritebox permet en ligne de créer les classes css pour la mise en page de votre site.

le principe: vous faites le design entier de votre site sur photoshop par exemple: vous générer un jpeg et vous vous rendez sur la page de spritebox  vous uploader votre design et ensuite vous adapter vos div a votre image et vous gérer les positions css automatiquement.

spritebox css

CSS 3 : texte effet stereoscopique en 3D

voici une petite astuce en CSS3 qui permet de donner l’effet d’un texte en 3D.

voici le code css:

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

voila ce que ça donne:

texte stereoscopique 3D CSS3

texte stereoscopique 3D CSS3

font personnalisé – google web font

google font factory

google font factory

Pour personnaliser un peu plus vos police de caractère sur votre site web autrement appelé font vous pouvez utiliser google font directory.

il suffit d’aller à cette adresse: google font directory

choisissez le font qui vous plait puis cliquez dessus.

google vous fournit alors le code pour intégrer le style de la police.

<link href=’http://fonts.googleapis.com/css?family=Cuprum&subset=latin‘ rel=’stylesheet’ type=’text/css’>

puis google vous fournit les éléments à placer dans votre css

h1 { font-family: ‘Cuprum‘, arial, serif; }

et le tour est joué!

texte défilant avec jquery

Voici comment créer un texte défilant avec jquery.

tout d’abord télécharger le fichier javascript suivant jquery.li-scroller.1.0.js

téléchargez ensuite le fichier css suivant li-scroller.css

1 – inclure ces deux fichiers dans votre page.

2 – copié le code html suivant dans votre <body></body>

<ul id="ticker01">

<li><span>10/10/2007</span><a href="#">The first thing ...</a></li>

<li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>

<li><span>10/10/2007</span><a href="#">The code that you ...</a></li>

<!-- eccetera -->

</ul>

3 – copiez le code javascript suivant dans une balise script javascript

$(function(){ $("ul#ticker01").liScroll({travelocity: 0.15}); });

le tour est joué, modifié le style css au besoins et ajustez la vitesse de défilement