Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 | Astuces CSS3


le CSS est un langage, facile et rapidement assimilable. Seulement, il y a de nombreuses subtilités à connaître avant de maîtriser entièrement le duo xHTML/CSS. Je vais délivrer certaines connaissances, astuces ou autres trucs pouvant vous éviter de perdre des heures de recherches.

1. Superposer des éléments avec z-index

Longtemps peu utilisé, notamment à cause d’Internet Explorer qui le gérait très mal, cette propriété permet de gérer la superposition d’éléments en définissant un ordre. La règle est simple : l’élément au z-index le plus élevé se trouve au-dessus. Mais il y a une subtilité à connaître : les éléments sont obligés d’être positionnés avec la propriété CSS position dont la valeur peut être absolute, relative ou fixed.

Exemple rapide rien que pour vous :

<div id= »test1″>…</div> 

<div id= »test2″>…</div> 

<div id= »test3″>…</div> 

Le CSS avec test1 tout en haut, test2 tout en bas et test3 au milieu de l’axe Z (superposition). A noter qu’ils possèdent tous une position, sinon le z-index ne marcherait pas.

#test1 {position: absolute; z-index: 10;} 
#test2 {position: absolute; z-index: 3;} 
#test3 {position: relative; z-index: 8;}

 

2. Appliquer un style uniquement au premier élément d’un parent

Il est possible d’appliquer un style différent au premier élément d’un parent comme une liste, une div ou autre si l’élément est une balise HTML comme p, li, etc… Exemple :

#test p:first-child {text-decoration: underline;}
 

3. Appliquer un style uniquement au dernier élément d’un parent

De même pour le dernier élément d’une liste ou de n’importe quel conteneur. Exemple :

#test p:last-child {color: red;}
 

4. A partir d’une seule liste, faire deux colonnes facilement en CSS

 

Pour qu’une liste unique soit automatiquement coupée en deux colonnes quelque soit sa longueur (comme la liste des catégories et thèmes dans la colonne à droite sur Design Spartan), il y a une astuce CSS très utile.

Tout d’abord le HTML avec une liste <ul> et ses <li> :

<ul class= »liste »>
<li><a href= »# » rel= »tag »>Actualité</a></li>
<li><a href= »# » rel= »tag »>Général</a></li>
<li><a href= »# » rel= »tag »>Tutoriels</a></li>
<li><a href= »# » rel= »tag »>Présentation</a></li>
<li><a href= »# » rel= »tag »>Mes Créations</a></li>
<li><a href= »# » rel= »tag »>Soumettre lien</a></li>
<li><a href= »# » rel= »tag »>Publicité</a></li>
<li><a href= »# » rel= »tag »>Ressources</a></li>
<li><a href= »# » rel= »tag »>Astuce PS</a></li>
</ul>

Ensuite, le CSS associé :<

ul.liste{width : 291px;}

ul.liste li {
display:block;
width : 140px;
height : 25px;
float:left;
}

ul.liste li[float= »left »] + li {
float:none;
}


Et le tour est joué ! Il faut donc assigner une largeur à la liste <ul> et transformer chaque élément de la liste <li> en block et leur attribuer une largeur et une hauteur. L’astuce est ensuite de les faire flotter avec un float:left; et de ne pas faire flotter ceux-ci : ul.liste li[float= »left »] + li.

 

5. La propriété « zoom », dernier espoir face à Internet Explorer

 

On le sait, IE c’est le mal, Satan lui-même navigue sur IE  ! Il vous est peut-être arrivé (en tout cas ce fut malheureusement mon cas) de tomber sur un bug du type « haslayout ». Spécifique à IE 6 et IE7 (corrigé sur IE8…), il s’agit de bugs propres à la mécanique interne du programme de Microsoft.

Mon problème fut par exemple le suivant : lorsque ma page se charge, il n’y a aucun problème puis lorsque je scrolle plus bas et que je remonte, je constate que ma div est devenue invisible sur plusieurs pixels en hauteur (sans rechargement de page), elle est devenue partiellement invisible sous une autre div.

Trève de détails, certains bugs ne s’expliquent pas, en revanche, une astuce de dernier recours a été trouvé : l’élément qui est affecté par ce problème d’affichage se voit affecté la propriété CSS suivante : zoom:1;

Dans mon cas, le problème a disparu comme par magie et je pense que c’était la seule solution sinon re-modifier toute la structure de ma page.

 

6. Améliorer la qualité des images redimensionnée dans IE

Dans tous les navigateurs, lorsqu’on redimensionne une image en HTML ou CSS, sa qualité se dégrade (plus ou moins vite selon le navigateur). Firefox le bien-aimé possède d’office cette propriété mais pas Internet Explorer. Voici donc une propriété CSS pour améliorer nettement le traitement des images sous IE :

img {-ms-interpolation-mode: bicubic;}
 

7. Une autre solution pour afficher des puces pour vos listes

Tout le monde connaît j’espère le lot de propriétés CSS « list-style » (list-style-image, list-style-type, etc…). Voici une astuce pour mettre n’importe quelle image et éviter les ennuis d’affichages :

La liste en HTML :

<ul>
<li>élément liste 1</li>
<li>élément liste 2</li>
<li>élément liste 3</li>
</ul>

Et le CSS associé :

li {
list-style-type: none;
background-image: url(nouvelle_puce.png);
background-repeat: no-repeat;
background-position: 0 0.3em;
padding-left: 12px;
}

C’est assez simple, on prend une image en « background » à la place des puces classiques. En revanche, pour éviter les soucis d’aligment de l’image, il faut ajouter un background-position pour que l’image soit bien en face du texte. Dernière chose, le « padding-left » sert à ce que l’image ne se superpose pas sur le texte. Encore une astuce : on peut combiner ces trois propriétés background en une seule.

 

8. Créer des blocs aux coins arrondis en CSS3, sans image

Le code suivant donnera a la div des coins arrondis de 3px (taille de l’arrondi) :

div.test {
background-color: black;

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
 

9. Regrouper les sélecteurs pour des propriétés identiques

Comme dans tout langage ou format informatique, la redondance est à éviter. Pour cela, il faut entre autre regrouper les sélecteurs ayant des propriété identiques :

h1,h2,h3,h4,h5,h6 {

font-family: »Lucida Grande »,Lucida,Arial,Helvetica,sans-serif;

color:#444;

margin: 10px

}

Ainsi, on a assigné aux 6 tailles de titre les propriétés en une fois au lieu de le répéter 6 fois pour chacun.

 

10Créer un effet d’ouverture et de fermeture

Dans certains cas, comme la création d’un effet accordéon par exemple, il peut être utile d’appliquer une transition CSS sur la hauteur d’un élément, de height:0 (l’élement n’a pas de taille), jusqu’à height:auto (l’élément se dimensionne en fonction de son contenu).

Si vous avez essayé de réaliser cela, vous avez remarqué que les navigateurs ne savent pas animer la propriété auto. Il faut alors recourir à du javascript pour palier à ce problème.

Une solution existe cependant en CSS, même si l’effet final n’est pas strictement identique. Je m’explique. Prenons le code HTML suivant :

<div class="accordeon"> <h3>More informations...</h3> <p>Some text</p> </div>

Appliquons-lui un peu de CSS :

.accordeon{ width:250px; } 
.accordeon p{ height:0; transition:height 1s ease; }
 .accordeon:hover p{ height:auto; }

Testez votre code, l’effet de transition n’est pas appliqué. Il faudrait pour cela appliquer une hauteur fixe lors du hover.

Utilisons alors plutôt les transformations CSS pour notre effet. Le code CSS modifié :

.accordeon p{ transform: scaleY(0); transition:transform 1s ease; } 
.accordeon:hover p{ transform: scaleY(1); }

Maintenant, notre animation est effective. Nous animons la propriété transform qui modifie notre élément de scaleY(0) à scaleY(1). Ajoutons la règle transform-origin pour que la transition se fasse depuis le haut de l’élément, comme ceci :

.accordeon p{ transform: scaleY(0); transform-origin: 50% 0; transition:transform 1s ease; } .accordeon:hover p{ transform: scaleY(1); }

Voilà. PS : le résultat final n’est pas identique à ce que l’on pourrait avoir avec height:0 vers height:auto puisque le texte inclus est transformé, au lieu d’apparaître progressivement. Néanmoins, l’effet peut être utilisé sans une seule ligne de JS, et cela sans fixer la hauteur de notre élément.

 



Longtemps peu utilisé, notamment à cause d’Internet Explorer qui le gérait très mal, cette propriété permet de gérer la superposition d’éléments en définissant un ordre. La règle est simple : l’élément au z-index le plus élevé se trouve au-dessus. Mais il Voir Plus
Grâce aux CSS et à la nouvelle norme CSS3, on peut créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Voir Plus
Maintenant que la propriété border-radius est implémentée même par Internet Explorer, il n'y a plus vraiment de raisons de ne pas l'utiliser. Et pour les vieux navigateurs qui ne la reconnaissent pas. Voir Plus
Créer des ombres sur des div et du texte avec La propriété box-shadow Voir Plus
Avant les CSS3, pour Réaliser de jolis fond de couleur en dégradé avec css3 grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient sans utiliser une image. Voir Plus
Le CSS3 permettent des background multiples. On peut mettre plusieurs à différents endroits d'une page La propriété background-image Avant CSS 2.1, qu'une seule image. Voir Plus
Les Media-Queries, permettent de cibler différents cas et ainsi d'adapter la restitution de sa page html à différentes caractéristiques des terminaux. Voir Plus



>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces