Le CSS 3.0 : introduction.
© LigneWeb ... Optimisé pour Safari, Chrome. ... © : alain jean deligne ... /introduction au CSS 3.0: arrondis-radius-intégration
Les nouveaux sélecteurs (suite)
... recherche sur ligneweb.net ...
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 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 dimension 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 ...
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 ...
... il nous faut donc ... un ... rayon si l'arrondis est un ... arc de cercle ...
... il nous faut ... deux ... rayons si l'arrondis est ... elliptique ...
... nous avons donc le premier rayon qui est celui vertical ... et le second qui est horizontal ...
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 deux valeurs des rayons ...
... 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 deux valeurs ...
Exemple :
... pour un arc elliptique …
... pour un arc circulaire …
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- ... et … -o- ...
Exemple :
... pour un arc elliptique …
... 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 …
... 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 ...
... 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 ...
... à + ... ☺☀☁☃☂☺❄❦∛∞✐☏✉ …☺ ...
(... traduction du code : ... tout va bien ... malgré ... etc. ...)
... Transparence avec ombrage : ... CSS 3.0 ...
... tout ne respecte pas le W3C ... site d'expérimentation ...
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
