Le CSS 3.0 : introduction.
© LigneWeb ... Optimisé pour Safari, Chrome. ... © : alain jean deligne ... /introduction au CSS 3.0, sélecteur, ombrage, text-shadow, box-shadow
Une première approche :
Introduction :
... pour les feuilles de style en cascade ... nommée CSS ... nous allons partir du ... CSS 2.0 ...
... pour arriver au ... CSS 3.0 ... qui apporte des améliorations sensibles ...
... en pleine évolution au niveau du ... W3C, ... les naviguateurs aussi se mettent à la page actuellement ...
De nouveaux effets pour le texte.
... pour que les pages web ait du relief, il nous faut travailler avec un logiciel de traitement de l'image ...
... il va nous servir à créer des ombrages, des dégradés, du relief ...
... il nous servira aussi à créer des arrondis à nos blocs, à nos bordures ... ce qui demande beaucoup de fichiers ...
... il faut les créer, les enregister, les importer ... alors qu'avec de nouvelles propriétés ...cela serait simplifié ...
... avec le ... CSS 3.0, ... nous allons pouvoir évoluer et permettre la ... créativité ...
... remarques importantes :
... actuellement, les anciens navigateurs ne peuvent voir ces effets comme l'ombrage, les arrondis ...
... il est donc nécessaire d'en tenir compte lors de la création d'un site web ...
...
... mais il existe des sélecteurs qui facilitent cette intégration ... d'une part ...
... et pour les autre navigateurs plus anciens, ils ne verront tout simplement pas ces effets ...
...
... le savoir n'empêche pas le contrôle avec tout navigateur, comme nous le faisions antérieurement ...
... une autre remarque mais qui est aussi un rappel ... consiste à dire que le ... CSS 2.0 ... en fichier externe ...
... donne une plus grande liberté pour les transformations ...
...
... nous gardons cette faculté avec le ... CSS 3.0 ... quand il sera associé au ... HTML 5 ...
… nous pouvons déjà utiliser ces sélecteurs avec le XHTML 1.0 dans le CSS 2.0 …
Des sélecteurs pour navigateur.
... des navigateurs ont des ... sélecteurs spéciaux ... pour intégrer les nouveaux sélecteurs en CSS3.0 ...
... c'est en attendant la réalisation plus complète du CSS 3.0 ...
... ces sélecteurs vont faire travailler le plugin intégrer dans les navigateurs les plus importants ...
... pour ... Firefox 3.6 ... le sélecteur est ... -moz- ...
... pour ... Safari 4.0 ... le sélecteur est ... -webkit- …
… pour … Opéra 11 … le sélecteur est … -o- …
... ces sélecteurs sont à placer devant le sélecteur nouveaux du CSS 3.0 ...
... il faudra répéter le sélecteur avec les sélecteurs spéciaux pour que tous puissent lire cette propriété ...
... nous avons donc les navigateurs Safari 4, Firefox 3.6, et d'autres, qui utilisent ces sélecteurs spéciaux ...
... par contre la dernière génération passe à une dimention de plus grande intégration ...
... les navigateurs sont parfois encore en version béta ... mais cela change rapidemment ...
... l'utilisation de ces sélecteurs n'affectent en rien l'affichage même avec des navigateurs plus anciens ...
... ils ne verront pas les effets nouveaux tout simplement ...
... comme pour ce site dont les ombrages, par exemple, ne sont pas vus par tous ...
Les nouveaux sélecteurs
Ombrage.
... le sélecteur (aussi appelé attribut) pour l'ombrage en général se nomme ... shadow ...
... l'ombrage ... peut se faire pour du ... texte et pour des blocs ...
... pour le texte, nous aurons ... text-shadow ...
... pour des blocs, nous aurons ... box-shadow ...
... dans les deux cas ... nous allons avoir quatres paramètres ...
... les deux premières valeurs ont trait au ... décalage ... x et y ...
... la troisième valeur concerne ... l'étendue du flou ...
... et la dernière valeur sera ... la couleur de l'ombre ...
text-shadow :
... la première valeur est le ... décalage en x ... de l'ombre et s'exprime en pixel ...
... le nombre sera ... positif ... pour un décalage à ... droite ...
... le nombre sera ... négatif ... pour un décalage à ... gauche ...
... la deuxième valeur est le ... décalage en y ... de l'ombre et s'exprime en pixel ...
... le nombre sera ... positif ... pour un décalage vers le ... bas ...
... le nombre sera ... négatif ... pour un décalage vers le ... haut ...
... la troisième valeur est la ... profondeur ... de l'ombre et s'exprime en pixel ...
... avec une valeur ... positive ... qui s'exprime aussi en pixel ...
... mais ... inexistante ... pour son ... abscence ou pour zéro ...
... la quatrième valeur est la ... couleur ... de l'ombre ...
... ces quatre valeurs s'écrivent l'une derrière l'autre ... avec un espace entre elles ...
un exemple :
... nous avons vu, au début, qu'il y avait un sélecteur spécial pour être reconnu par des navigateurs ...
... et pour ce faire et être lu par le maximum d'entre-eux, nous allons écrire ce qui suit ...
... ce qui complète l'écriture, qui malgré tout, ne sera pas lu par tous ...
... manière intermédiaire avant le HTML 5 et le CSS 3.0 ...
Structure ... text-shadow :
... nous voyons ici l'ombrage créé par cet attribut ...
... si vous ne voyez pas l'ombrage des lettres, c'est que le navigateur n'est pas encore adapté ...
box-shadow :
... la première valeur est le ... décalage en x ... de l'ombre et s'exprime en pixel ...
... le nombre sera ... positif ... pour un décalage à ... droite ...
... le nombre sera ... négatif ... pour un décalage à ... gauche ...
... la deuxième valeur est le ... décalage en y ... de l'ombre et s'exprime en pixel ...
... le nombre sera ... positif ... pour un décalage vers le ... bas ...
... le nombre sera ... négatif ... pour un décalage vers le ... haut ...
... la troisième valeur est la ... profondeur ... de l'ombre et s'exprime en pixel ...
... avec une valeur ... positive ... qui s'exprime aussi en pixel ...
... mais ... inexistante ... pour son ... abscence ou pour zéro ...
... la quatrième valeur est la ... couleur ... de l'ombre ...
... ces quatre valeurs s'écrivent l'une derrière l'autre ... avec un espace entre elles ...
un exemple :
... nous avons vu, au début, qu'il y avait un sélecteur spécial pour être reconnu par des navigateurs ...
... et pour ce faire et être lu par le maximum d'entre-eux, nous allons écrire ce qui suit ...
... l'ombrage ici sera sur le côté droit et en dessous du bloc, avec ou sans bordure ...
... ce qui complète l'écriture, qui malgré tout, ne sera pas lu par tous ...
... manière intermédiaire avant le HTML 5 et le CSS 3.0 ...
Structure ... box-shadow :
... nous voyons ici l'ombrage créé par cet attribut ...
... si vous ne voyez pas l'ombrage des lettres et du bloc,...
... c'est que le navigateur n'est pas encore adapté ...
Un exemple avec les tableaux :
... nous avons ajouté ... cellspacing="20" ... avec border="0" ... pour étaler le tout ...
... avec les couleurs ... et l'ombrage pour certains ...
<div class="table1j">
exemple
| fusion titre |
fusion verticale
 |
| Aqua |
Blue |
Fuschia |
| fusion horizontale |
| Grey |
Green |
Lime |
| Maroon |
Navy |
Olive |
| Purple |
Red |
Silver |
| Teal |
White |
Yellow |
| AliceBlue |
Lavender |
Black |
</div>
... pour ceux qui voient ...
l'ombrage, ... nous avons du 3D ...
... prenez les pastilles de couleur ...
...
avec la propriétée en CSS 3.0 ... intégrée avec ... information CSS 3.0 ... avec la propriété ... shadow ...
... pas de travail avec un logiciel de traitement de l'image ... etc. ...
... nous avons les mêmes ombrages dans les tableaux précédants ... ce qui crée ces effets spéciaux ...
...
mais nous y ajoutons ... les arrondis ... expliqués dans ... information 1 CSS 3.0 ... avec la propriété ... radius ...
... voila le style pour obtenir ces effets là ... avec shadow et radius ...
... le div avec la ... class="table1j" ... et ces sous-ensembles ...
-
Plan du site -
Actualiser votre site. 
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
... Création de site web : ... masterligne .
