Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
 Menu cours 4 CSS 3.0  - introduction   / dégradé linéaire  / dégradé radial 



Cours 4 CSS 3 avec LigneWeb
Dégradés : linéaire et radial.



 © LigneWeb  ... /introduction au CSS 3.0 : ...
... dégradé linéaire et radial

© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Dégradés en CSS 3.0


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Rappel : 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 12 et + ... le sélecteur est ... -moz- ...
  • ... pour ... Safari 5.05 et + ... et pour ... Chrome 17 et + ... le sélecteur est ... -webkit- ...
  • ... pour ... Opéra 11 et + ... le sélecteur est ... -o- ...
  • ... pour ... Explorer ... le sélecteur est ... -ms- ...
  • ... pour ... Linux KDE ... le sélecteur est ... -khtml- ...

  • ... pour ... Opéra : propriété auditive ... le sélecteur est ... -xv- ... (peu utilisé)
... 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 ...

... le nouvel Opéra ... change et est à base Chrome ... avec -webkit- ...
... utilisation des cinq premiers sélecteurs en fonction de l'évolution des Navigateurs ...
... les sélecteurs suivants ne sont utilisés que sur ce site ...

... information sur le ... HTML 5.0 ...  pour les navigateurs sur Wikipedia  ... et leurs plugins ... :
...  Amaya, Gecko, KHTML, Presto, Tasman, Trident, WebKit  ...
... avec, pour l'essentiel : -moz-, -webkit-, -ms-, ... comme sélecteurs spécifiques ...
... -ms- ... pour Explorer qui reste avec Windows 7 encore fort utilisé ...

... nous allons ajouter aux premiers sélecteurs définit plus haut ceux-ci :
  • ...-khtml- ... pour le CSS 2 pour Linux KDE
  • ...-gecko- ... pour le CSS 2 pour Camino · Epiphany · IceCat · Iceweasel · Kazehakase · K-Meleon · Firefox Mobile · Mozilla Firefox · SeaMonkey · TenFourFox · Torpark
  • ...-presto- ... pour le CSS 2 pour Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
  • ...-trident- ... pour le CSS 2 pour Avant Browser · AOL Explorer · Internet Explorer · Internet Explorer Mobile · Maxthon · SlimBrowser · Sleipnir
  • ...-blink- ... pour le CSS 2 pour Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · Opera · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci · Slimboat · Yandex Browser

Simplification des sélecteurs :



... avec l'évolution des derniers navigateurs qui intègre le CSS 3 ...
... nous avons éliminé certains sélecteurs, ce qui allège l'écriture ...
... pour le CSS 2 déjà ...
... nous le montrons avec les différents exemples sur ce site ...

... sont éliminés : les sélecteurs -o-, -ms-, -khtml-, ...
... mais pas encore totalement pour certaines transformations ...

... et -gecko-, -presto-, -trident-, -blink-, ces derniers ...
... n'étant pas essentiels ...
... nous le voyons dans la feuille de style CSS 2 ...

... -webkit- est par contre gardé pour l'essentiel ...
Zoom



... 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 ...
... ceci est vrai pour le nouveau CSS 3 ...

Couleurs de fond en dégradé

... quand on veut faire un dégradé de couleur pour une couleur de fond, ...
... on le réalisait avec un logiciel tel que Photoshop ou Gimp, ...
... avec html5 et css3, on pourra le faire directement par le fichier css ...
... une source d'inspiration : ... cours et exercices corrigés ... HTML 5 et CSS 3 ...
...  de Jean Engels  ... aux ...  Editions Eyrolles  ...

... il y a deux dégradés possible en css3 qui sont ... :
... le dégradé linéaire d'une part et le dégradé radial d'autre part ...


Dégradé linéaire


Dégradé linéaire horizontal :

... nous réalisons d'abord un dégradé linéaire horizontal ...
... avec les éléments de style ... dans le fichier css ...
... nous écrivons cet attribut comme ceci :
... background:linear-gradient(left , couleur ...% , couleur ...%); ...




 ... ceci est un dégradé linéaire horizontal... 

a
... ce dégradé linéaire étant horizontal, il peut démarrer ...
... de gauche à droite : on écrira left pour le dégradé ... avec les deux couleurs et leur % ...
... de droite à gauche : on écrira right pour le dégradé ... avec les mêmes couleurs et % ...
... c'est en jouant délicatement sur le choix des deux couleurs que l'on définit les couleurs extrêmes ...
... la variation des % et leurs rapports définissent le résultat final ...
... pour que cette propriété puisse fonctionner avec les navigateurs actuels, ...
... il nous faut réécrire cette propriété pour chacun des différents sélecteurs ...
...  viendra un jour ou cela ne sera plus nécessaire  ...
... cela nous donne pour le fichier html : ...


Dégradé linéaire vertical :

... nous réalisons d'abord un dégradé linéaire vertical ...
... avec les éléments de style ... dans le fichier css ...
... nous écrivons cet attribut comme ceci :
... background:linear-gradient(top , couleur ...% , couleur ...%); ...




 ... ceci est un dégradé linéaire vertical... 

... ce dégradé linéaire étant vertical, il peut démarrer ...
... de haut en bas : on écrira top pour le dégradé ... avec les deux couleurs et leur % ...
... de bas en haut : on écrira bottom pour le dégradé ... avec les mêmes couleurs et % ...
... c'est en jouant délicatement sur le choix des deux couleurs que l'on définit les couleurs extrêmes ...
... la variation des % et leurs rapports définissent le résultat final ...
... pour que cette propriété puisse fonctionner avec les navigateurs actuels, ...
... il nous faut réécrire cette propriété pour chacun des différents sélecteurs ...
...  viendra un jour ou cela ne sera plus nécessaire  ...
... cela nous donne pour le fichier html : ...


Dégradé radial


... nous réalisons d'abord un dégradé radial ...
... avec les éléments de style ... dans le fichier css ...
... nous écrivons cet attribut comme ceci :
... background:radial-gradient(départ, forme, couleur1, couleur2); ...




 ... ceci est un dégradé radial... 


Dégradé radial avec % des couleurs

... nous écrivons cet attribut comme ceci :
... background:radial-gradient(départ, forme, couleur1 ...% , couleur2 ...% ); ...




 ... ceci est un dégradé radial... avec % ... 

... avec % des couleurs ... et nous voyons la différence avec l'exemple précédent ...


D'autres exemples :

... nous écrivons cet attribut comme ceci :
... background:radial-gradient(départ, forme, couleur1, couleur2); ...



 ... ceci est un dégradé radial avec center top ... 
... un dégradé radial avec center top circle ...

... avec center top ...


Ellipse contain



  ceci est un dégradé radial avec ellipse contain  

... avec ellipse contain ...

... plus tard il ne faudra plus qu'écrire une seule ligne pour définir l'attribut ...
... dans ce dernier cas, la première ligne est : ...
... {background:radial-gradient( center ,ellipse contain ,#116688 , #00bad8);} ...
...la mise en oeuvre du ... HTML 5 ... demande encore de la patience ...
... leW3C ... a finalisé les spécifications du « langage » HTML 5 ...
... il reste à terminer les implémentations pour les navigateurs, qui seront terminées au courant de 2014 ...


Circle contain avec repeating-radial-gradient


... avec repeating-radial-gradient ... circle contain ...




... avec repeating-radial-gradient ... circle contain ... et inversion des couleurs et des % ...




... avec repeating-radial-gradient( 10% 20% , ellipse contain ,#00bad8 , #116688); ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours   CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies