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 2 CSS 3.0  - introduction   - radius  - coins arrondis  - intégration  - arrondis /ombrage  - transparence 
- des sélecteurs spéciaux pour CSS 2 et CSS 3. 



Cours 2 CSS 3 avec LigneWeb
Arrondis et ombrages.



 © LigneWeb  ... /introduction au CSS 3.0: arrondis-radius-
intégration

© 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

Les arrondis et les ombrages des blocs et des images.


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 dimension 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 ...




Des arrondis pour les blocs.

... pour réaliser des coins arrondis pour un bloc, il était impératif de travailler avec un logiciel de traitement de l'image ...
... chaque coins arrondis faisant l'objet d'un fichier ... qu'il fallait intégrer à l'ensemble du bloc ...

... heureusement un nouvel attribut arrive ...

... cet attribut nouveau se nomme ... radius ...
... c'est une manière simple qui incite le navigateur à réaliser les calculs pour la courbe ...

Les rayons :

... ces arrondis se font aux angles droits du bloc ...
... ils se feront sur les quatre angles droits ... si aucune désignation n'est faite ...

... pour réaliser les arrondis des angles droits, il nous faut deux valeurs ... :
... une valeur en ... x ...
... une valeur en ... y ...

... il nous faut donc ... un ... rayon unique pour x et y ...
... si l'arrondis est un ... arc de cercle ...

... il nous faut ... deux ... rayons pour x et y ...
... si l'arrondis est ... elliptique ...
... nous avons donc le premier rayon ... x ... qui est celui horizontal ...
... et le second rayon ... y ... qui est vertical ...

... mais il y a quatre angles dans un rectangle ...
... il nous faut pour la précision, définir les quatre angles ...
... si les rayons x (horizontal) et y (vertical) sont différents ...

... le premier angle a considérer, est le ... top left ...
... le second, est le ... top right ...
... le troisième, est le ... bottom right ...
... et le dernier a considérer, est le ... bottom left ...





Les coins arrondis :

... les coins arrondis se font au niveau de la bordure du bloc, ... qu'elle existe ou n'existe pas ...
... elle s'exprime comme suit ...

... border-radius ... suivi des quatre valeurs x du rayon ...
... suivi de / et des quatre valeurs y du rayon ...
... pour avoir plus simple, ... nous mettront toujours deux rayons qui se mesure en pixel (px) ...
... deux rayons ... identiques ... pour un arc ... circulaire ...
... deux rayons ... différents ... pour un arc ... elliptique ...
... il y a un espace entre les quatre valeurs en x pour les quatre rayons ...
... il y a un espace entre les quatre valeurs en y pour les quatre rayons ...
... ces deux ensembles de valeurs sont séparés par ... / ...


Un petit dessin vaut mieux qu'un long discours :

Chéma explicatif de border-radius




















... l'image explicative avec ces coins arrondis spéciaux ... avec x=y ...


 { border-radius: x1 x2 x3 x4 / y1 y2 y3 y4; } ... avec : x=y 

Ici, les rayons x et y sont identiques.
Ils peuvent être différents, comme dans l'exemple suivant :
calculs intégrés dans le navigateur aux normes CSS 3
qui est déjà préparé. (On commence toujours par l'arrondis 1)


Exemple :

... pour un arc elliptique …
... l'arrondis elliptique de l'image explicative ci-dessus ... et

... pour un arc circulaire …

On peut complexifier tout ceci :

... en prenant pour x et y les valeurs suivantes :

{ border-radius: 45px 5px 95px 5px / 10px 25px 20px 25px; }

... nous avons la box suivante avec des arrondis spéciaux ... :


... les arrondis spéciaux des coins ...

... l'arc elliptique de spac5i ... dont le css 3 s'écrit :

... nous voyons apparaître toute la potentialité de cette écriture ...




Intégration :

... pour pouvoir intégrer ce nouvel attribut au code, ... il faut aussi utiliser les sélecteurs spéciaux ...
... cela permet à plus de monde d'y avoir droit ... en attendant les derniers navigateurs ...

... pouir mémoire, les sélecteurs sont ... -moz- ... , -webkit- ... , -o- ..., -ms- ...

Exemple :

... pour un arc elliptique …
... pour un arc circulaire …
En le réactualisant pour les derniers navigateurs essentiels :
... pour un arc circulaire …

... le premier attribut pourra être lu par les derniers navigateurs ... sans perturbation par les autres données ...
... ceux qui ne pourront pas lire un de ces attributs, ... ne seront pas perturbés eux-même ...
... ils ne verront tout simplement pas les arrondis ...




Arrondis et ombrages :

... maintenant, mettons les deux réalités ensemble ... et cela donne ... comme exemple ...

... pour un arc elliptique …
... pour un arc circulaire …
En le réactualisant pour les derniers navigateurs essentiels :
... pour un arc circulaire …

... malgré les répétitions, ... cela est bien plus simple que de réaliser les arrondis et ombrages ...
... par un logiciel de traitement de l'image ... avec tout ce que cela implique …




Effet d'ombrage avec arrondis :



... nous voyons ici un effet inverse de l'ombrage ...
... une lumière derrière le bloc à coins arrondis …


... pour obtenir cet effet, voici les ... attributs CSS 2.0 ... pour ce site ...

En le réactualisant pour les derniers navigateurs essentiels :

... effet obtenu avec les différentes couleurs et leurs rapports entre elles ...
... nous constatons aussi que l'ombrage est lui-même arrondis en ses angles ...


La transparence :

... la transparence se définit par l'attribut ... opacity ... avec une valeur allant de ... 0.1 à 0.9 ...
... la transparence totale se dira : ... transparence ...
... l'opacité totale se dira : ... 1 ... ou bien ... on n'écrit rien ...

Exemples de structure :


... mais, il y a d'autres manières d'écrire cet attribut ...


... pour tenir compte des différentes propriétés pour ... MS Explorer ... entre autre ...

... design 3 D ...

... à + ... ☺☀☁☃☂☺❄❦∛∞✐☏✉ …☺ ...
(... traduction du code : ... tout va bien ... malgré ... etc. ...)


... plein de courage donc pour votre site web ... :)


...  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