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

Titre du site ligneweb.net
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

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


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 1 CSS 3.0  - introduction   - sélecteurs  - ombrage  - text-shadow  - box-shadow 
- border et box-shadow  - effet 3D  - img de fond et box-shadow  - cercle en 3D 
- les sélecteurs spéciaux  - simplification des sélecteurs spéciaux    ➽ ➽ - les 3 couches 



Cours 1 CSS 3 avec LigneWeb
shadow : les ombrages -
effet 3 D.



 © LigneWeb  ... /introduction au CSS 3.0, sélecteur, ombrage, ...
... text-shadow, box-shadow

© design : LigneWeb
© : alain jean deligne              ... Coins arrondis, ... ombrages, ... couleur de fond en dégradé : ...
... avec la propriété box-shadow ... avec inside (l'ombrage interne) ... donnant l'effet 3 D ... en CSS 3 ...
... avec la propriété box-shadow ... l'ombrage externe ... donnant l'effet 3 D ... en CSS 3 ...



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






Les ombrages en CSS 3 :

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 ...  ci-dessous  ... :






Ce n'est pas de l'enseignement, c'est du partage de connaissances.



Cliquez ici pour le détail

Notre choix proposé ...

... c'est un site pédagogique ...
... il est construit avec ce qu'il enseigne : ...
... le XHTML/CSS 2 vers et pour le HTML 5/CSS 3 ...

Notre choix permet ceci :

... la page construite en HTML 5 / CSS 3 est celle que vous avez construite vous-même ...
... vous avez écris vous même le texte en suivant la logique simple d'écriture ...
... en utilisant les balises encadrantes définies par ce HTML 5 / CSS 3 tout simplement ...

... vous êtes maître à bord et pouvez toujours changer, transformer ou recréer votre page ...
... votre autonomie qui en découle est la garantie de votre individualité ...
... elle participe de votre liberté, de votre créativité, ...
... de votre dimension humaine ...

... un retour à l'essentiel, ... qui n'enlève rien au partage ...
... partage d'une compétence, d'une connaissance, d'une aide aussi ...
... vous pouvez commencer par le XHTML / CSS 2 qui est la base du HTML 5 / CSS 3 ...

... l'accès à ce site est gratuit, ...
... même si nous proposons aussi de réaliser avec vous un site web ...
... cette dimension existe pour tous ceux qui en ont besoin ...
... un besoin d'autonomie avec une aide ... à prix modique ...
... je peux aussi le réaliser complètement avec des explications ...


... la balise  details  ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...



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

le logo du CSS 3  ... le logo du style ... CSS 3.0 ...
 ... pour le ... HTML 5 ...

... 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 ...
... nous en parlons plus bas : ...  les sélecteurs spéciaux  ...



... plaçons la souris sur info en l'y laissant ...



... avec l'utilisation d'une nouvelle propriété de transition en CSS 3.0 ...
... c'est la transition linéaire ... ( à la même vitesse ) ...
... la souris sur info ... et la transition démarre et reste ...
... la souris retirée ... la transition s'enlève après un certain délais ...
 i
 n
 f
 o

la souris sur info ....... une propriété en css 3.0 qui marche pour les navigateurs ...
... il marche différemment pour Explorer 9 ...
... voir le cours sur ...  les transitions en CSS 3.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 ...

 ... les sélecteurs vont progressivement disparaître dans les Navigateurs actualisés ...  

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

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


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



... pour aller vers le nouveau HTML 5 ... et surtout vers le XHTML 5 ...
... il existe actuellement une librairie comme le Frameworf jQuery.js ...
... pour aider à l'utilisation d'AJAX entre autre... avec le XHTML 1.0 ...
... en attendant le développement de nouvelles applications ...
...  pour information  ... nous avons un exemple de ...  bandeau d'actualité défillant  ...
... nous les étudierons plus tard ... c'est en travail dans le monde ...
...la difficulté reste l'adaptation aux anciens navigateurs comme vous pouvez le voir ...
... voir le ...  cours info HTML 5  ...
...  nous avons une petite bibliothèque jQuery : modernizr-latest.js  ...
... qui permet à certains anciens navigateurs de voir du CSS 3.0 ...



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

En le réactualisant pour les derniers navigateurs essentiels :

... ce qui complète l'écriture, qui malgré tout, ne sera pas lu par tous ...
... manière intermédiaire entre le HTML 5 avec le CSS 3.0 ... et le XHTML 1 avec CSS 2 ...



Structure ... text-shadow :

En le réactualisant pour les derniers navigateurs essentiels :

... 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 entre le HTML 5 avec le CSS 3.0 ... et le XHTML 1 avec CSS 2 ...



Structure ... box-shadow :

En le réactualisant pour les derniers navigateurs essentiels :

... 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="space-1j"> 

exemple
fusion titre
fusion verticale

dessin humoristique
Aqua Blue Fuschia
fusion horizontale
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

 </div> 

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... 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="space-1j" ... et ces sous-ensembles ...


... nous y voyons l'application de l'ombrage, ... mais aussi des coins arrondis ... vu  au cours suivant  ...
... tout ceci est tiré du ...  cours sur les tableaux  ...
... il est également important de se référer au ...  cours sur le CSS 2.0  ... et pages suivantes ...




Effet 3 D

Ombrage à l'intérieur de box-shadow.

On ajoute l'attribut ... inset ... dans la propriété ... shadow ...
... avec l'ombrage porté dans le bloc ... ce qui crée le trou ...
... box-shadow: inset 6px 6px 15px #444556; ...

Le meilleur exemple est :


... nous voyons la profondeur grâce à l'ombrage intérieur ...





... voila le style pour obtenir ces effets là ... avec shadow ...




Combinaisons de border et de box-shadow.

... prenons deux border différents ...
... border: inset ... et un autre ... border: outset ...



... inset ...


... outset ...


... on va leur ajouter un box-shadow spécial ... et voyons ce que cela donne ...



... inset ...


... outset ...


... ombrage intérieur ...

... le bloc inset ... semble être enfoncé ... avec la couleur ... #aaaaff ...
... le bloc outset ... semble être surélevé ... avec la couleur ... #003344 ...
... avec les coins arrondis ... vu au cours suivant ...
... et avec shadow en inset ... (l'ombrage intérieur) ...

... voila le style pour obtenir ces effets là ... avec shadow ...

... on accentue les effets ... en choisissant les bonnes associations de couleurs ...




Combinaisons de image de fond et de box-shadow.
... et la fenêtre sur l'univers ... :

  mettre la souris sur info ... puis l'enlever ...


... fenêtre sur l'univers ...   ( voir le code source ... comme exercice )    © design : LigneWeb    © Apple
... faire monter et descendre cette fenêtre ... ↑↓ ... pour voir l'ombrage intérieur ...



 i
 n
 f
 o

On ajoute l'attribut ... inset ... dans la propriété ... shadow ...
... avec l'ombrage porté dans le bloc ... ce qui crée le trou ...

... l'écriture XHTML de cette fenêtre ...

Plusieurs images de fond peuvent se trouver à plusieurs niveaux
... et ne pas se mélanger.

 « ... en faisant défiler doucement vers le haut et vers le bas ... on voit les différents niveaux ... » 

... en bas, il y a les fleurs ... à voir ...

... on plonge dans body ...
... avec le style pour ... space-5p ... dans le fichier css ...


.... créer l'effet 3D ...


© design : LigneWeb


.... un trou dans le corps de la page ... oufti ...



.... on plonge dans la fenêtre sur l'univers ...

... avec le style pour ... space-5f ... dans le fichier css ...


... une autre illustration de l'effet 3D ...
... la même illustration 3D ... mais inversée ...  avec la carte  ...


.... il y a un truc, c'est sûr ... il est dans le fichier ... .css ... [ .space-5f ] et [ .space-5p ] ...
... par l'ajout des différentes images que je veux mettre en fond dans les différents blocs (div) ...





... des trous dans le corps de la page ... oufti ... en descendant doucement ... ↑↓

... on voit les fleurs apparaître ...



Plusieurs ...  images de fond  ... peuvent se trouver à plusieurs niveaux ...
... et ne pas se mélanger.


... réalisé ici en HTML 5 avec du CSS 3 ...
... mais réalisable aussi en XHTML
... avec du CSS 2 et du CSS 3 ...




... imaginons toutes ces potentialités ...


zoom courbe




... le trou dans le corps avec au milieu, le trou dans l'écran ...



... réalisé ici en HTML 5 avec du CSS 3 ...
... mais réalisable aussi en XHTML avec du CSS 2 et du CSS 3 ...

... réalisé ici en HTML 5 avec du CSS 3 ...
... mais réalisable aussi en XHTML avec du CSS 2 et du CSS 3 ...



© : alain jean deligne              ... Coins arrondis, ... ombrages, ... couleur de fond en dégradé : ...
... avec la propriété box-shadow ... avec inside (l'ombrage interne) ... donnant l'effet 3 D ... en CSS 3 ...
... avec la propriété box-shadow ... l'ombrage externe ... donnant l'effet 3 D ... en CSS 3 ...

Le code xhtml de ce dernier bloc :

Remarque : & uarr;& darr; ... pour ... ↑↓ ... (sans espace entre & et le reste) ...
... avec "u" pour "up" ... et ... "d" pour "down" ... ainsi que "arr" pour "arrow" (flèche) ...

Le code css de ce dernier bloc pour le cercle :

... le bloc ... space-5pi ...
Remarque : ... pour border-radius dans le css ... qui crée le cercle ...
... avec <br /> pour créer la hauteur ... dans html ...





Les différentes couches ...
pour une réalisation concrète... :

... l'exemple ci-dessous nous montre les trois couches successives ...
... nécessaires pour réaliser concrètement cette transformation linéaire ... :


  mettre la souris sur info ... puis l'enlever ...


avec le trackpad, la souris tactile, ... avec un ou deux doigts
légèrement de gauche à droite ...
on voit le plan devant bouger par rapport aux images en background : du 3D
essentiellement sur Mac ... avec le navigateur Safari 6 ...
... et avec Safari 7.1 ... et 10.0.3 ...
 i
 n
 f
 o


Les différents niveaux :

• un premier div avec "space-5p" ... la fenêtre sur l'univers ...
• un deuxième div avec "space-ti" ...pour la transformation ... et margin:left ...
• un troisième div avec "style float:right" ... pour le texte à droite ...
• un quatrième div avec "space-t" ... pour le texte "info" de la transformation ...



... l'écriture dans le fichier html pour cette transformation ...


... le fichier css pour space-ti et space-t de la transformation ...

Conclusion :


... le space-ti de la transformation se place en deuxième position ...
... suivi de "style float:right" ... pour le texte à droite ... en troisième position ...
... ce qui permet à la transformation de passer sous le texte de droite ...






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