Cours HTML

La transparence

Pour rendre un élément, un bloc, un fond transparent, on fait appel à plusieurs propriétés. En effet, afin qui l'affichage se passe bien dans Internet Explorer, dans mozilla et Firefox, voici comment procéder pour obtenir une transparence de 50%:

• Pour Mozilla (<= 1.6) et une partie des navigateurs Gecko : -moz-opacity:0.5;
• Pour mozilla firefox et les navigateurs le supportant : opacity: 0.5; qui est la norme CSS 3.
• Pour l'antiquité IE : filter:alpha(opacity=50);

Ce qui donne :

-moz-opacity:0.5;
        opacity: 0.5; 
        filter:alpha(opacity=50);

Les bords arrondis

Les CSS3 permettent de réaliser des bords arrondis comme ceux-ci :

Click Me

 

      border-radius:10px;
      -moz-border-radius:10px; 
      -webkit-border-radius:10px;      
      

Les ombres

L'ombre portée

L'ombre portée, c'est possible avec CSS3. Par exemple sur une image :

box-shadow: 0px 2px 5px #1c1a19;
-moz-box-shadow: 0px 2px 5px #1c1a19; 
-webkit-box-shadow: 0px 2px 5px #1c1a19; 
      

La première valeur indique le décalage horizontal vers la droite (ici 0px)
La deuxième valeur indique le décalage vertical vers le bas (ici 2px)
La troisième valeur précise la force du dégradé (ici 5px)
Enfin, la couleur est écrite en dernier (#1C1A19)

Le texte ombré

CSS3 permet de réaliser des texte ombrés :

    text-shadow: 2px 2px 4px #999;
    

Les quatre valeurs correspondent à :

1. Décalage de l'ombre vers la droite
2. Décalage de l'ombre vers le bas
3. Valeur du flou de l'ombre
4. Couleur de l'ombre

Les dégradés en CSS

Les dégradés peuvent se dessiner de manière radiale ou linéaire (en ligne): radial-gradient ou linear-gradient.

Les valeurs, comme toujours pour les CSS3, doivent être déclarées pour les différents navigateurs.

Pour bien réussir, pensez à bien respecter ces différentes étapes :

• Prévoir une couleur de fond unie dans le cas où le navigateur qu'utilise votre visiteur ne comprenne pas les dégradés css3
• Utiliser des valeurs relatives : % ou em et non des pixels si vous précisez la hauteur du dégradé
• Le code est compliqué à écrire, aidez vous de sites en ligne : http://www.css3factory.com/linear-gradients/ ou http://www.colorzilla.com/gradient-editor/

linear-gradient

La syntaxe de ce dégradé est la suivante : background-image: linear-gradient(direction, couleur-début, couleur-fin);

Voici un exemple de dégradé linéaire, jaune (#f8fc8b) à bleu (#2b9ad3)avec les valeurs pour tous les navigateurs qui supportent cette propriété :

 .degrade
{
background-image: -webkit-linear-gradient(#f8fc8b, #2b9ad3); /* Chrome, Safari */
background-image: -o-linear-gradient(#f8fc8b, #2b9ad3); /* Opera */
background-image: -moz-linear-gradient(#f8fc8b, #2b9ad3); /* Firefox */
background-image: linear-gradient(#f8fc8b, #2b9ad3); /* Norme W3C */
}

Ce lien permet d'avoir des précisions sur cette propriété : http://www.w3schools.com/css/css3_gradients.asp

radial-gradient

La syntaxe de ce dégradé est la suivante : background-image: radial-gradient(centre, forme taille, couleur de début, ..., couleur de fin);

Voici un exemple de dégradéradial, gris pâle(#e6e6e6) à bleu (#406d84)avec les valeurs pour tous les navigateurs qui supportent cette propriété :

 .degrade
{
background-image: -webkit-radial-gradient(#e6e6e6,#406d84); /* Safari */
background-image: -o-radial-gradient(#e6e6e6, #406d84); /* Opera */
background-image: -moz-radial-gradient(#e6e6e6, #406d84); /* Firefox */
background-image: radial-gradient(#e6e6e6, #406d84); /* Norme W3C */  	
}

Comment créer un bouton survolé avec dégradé

Voici la méthode à suivre :

 div
{
	background-color: greenyellow;
    background-image: linear-gradient( white, rgba(255,255,255,0));
	background-image: -moz-linear-gradient( white, rgba(255,255,255,0)); 
    background-image: -o-linear-gradient( white, rgba(255,255,255,0)); 
    background-image: -webkit-linear-gradient( white, rgba(255,255,255,0)); 
    transition: background-color linear 2s;	
}
div:hover{background-color: deepskyblue;
}

Pseudo-classes

Les pseudo-classes permettent de préciser un style appliqué à certaines balises en définissant une réaction à un événement ou à la position de la balise par rapport à d'autres balises.

Le nom des pseudo-classes est prédéfini, on ne peut pas créer ses propres nom de pseudo-classes.

Attention de ne pas confondre les pseudo-class et les pseudo-element.

Pseudo-class

Les pseudo-class ciblent un élément sans ajouter une class. C'est le cas de :first-child

Les pseudo-class se rédigent avec un seul : Voici la syntaxe :

selector:pseudo-class {propriété : valeur;}

:first-child

ul li:first-child{ background-color:#4b94f7;}

Le style colore le premier élément en bleu foncé

:last-child

ul li:last-child{ background-color:#f5ad21;}

Le style colore le dernier élément en jaune

:hover

Au survol, l'élément se modifie

a:hover{ color:#fff;}

Bouton

La pseudo-class :link agit sur tous les liens non visités

La pseudo-class :visited agit sur tous les liens visités

La pseudo-class :active agit sur tous les liens actifs

Ma liste n'est pas exhaustive.

Pseudo-element

Les pseudo éléments sont employés pour ajouter des effets particuliers à certains sélecteurs. Un pseudo-element est un élément que l’on n’aurait pas pu cibler autrement qu’en rajoutant une balise assortie d'une nouvelle class.
Exemple ::first-letter, on aurait dû ajouter un élément span sur la première lettre de l’élément ciblé.

Voici la syntaxe :

selector::pseudo-element {propriété : valeur;}

::first-letter

Pour créer une lettrine à chaque nouveau paragraphe, on emploie ce pseudo-élément.

Voici un exemple :

p::first-letter { font-size:200%; color:#aa2d18;}

::first-line

On peut styliser la première ligne d'un paragraphe, en petite capitale par exemple.

p::first-line{font-variant:small-caps;color:#70e268;}

Il existe deux autres pseudo-element ::after et ::before. Ils permettent d'insérer par exemple des images en début ou en fin de paragraphe.