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 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
 Menu cours 2 CSS 2  - balise a / hover  - visited / active  / résumé  - style du curseur 
 ➽ ➽ ➽   Image de fond avec effet 3D  - fenêtre sur l'univers  - cercle en 3D 



Cours 2 CSS 2.0 : style des liens -
images de fond effets 3 D .



 © LigneWeb  ... /style des liens hypertextes.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Le style des liens hypertextes


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 






... pour changer le style des liens hypertexte qui sont définis dans le navigateur, il faut le faire dans la feuille de style externe ... .css ...
... si nous prenons toujours comme base de découverte la structure ... css ... du cours précédent, nous avons ceci :




La balise a ...


... nous connaissons la balise a ... qui est la balise encadrant un lien hypertexte ... et nous savons qu'un lien de ce type, permet d'aller autre part ... en survolant avec la souris et en cliquant dessus ...
... le survol du lien par la souris change souvant la couleur de ce lien ...
... le survol se dit ... hover ...

... nous allons donner une couleur au lien hypertexte sans être souligné ...
... et ceci ... pour tous les liens dans body ... et cette couleur sera ... #ffff00 ... qui est le jaune ...
... le texte du liens sera sans décoration : ... text-decoration: none; ... sans la ligne ...

... lors du passage de la souris, ... le texte change de couleur et devient : #002266 ... qui est un bleu nuit ...
... dans le même temps, j'impose la couleur de fond du lien ... #3399bb... la couleur de la page ...

... deux données différentes et séparées : ...
... body a ... le lien hypertexte normal ...
... body a:hover ... le lien hypertexte survolé par la souris ...



Les différentes propriétés des liens :


... la couleur des liens ... color ...
... la couleur de fond des liens ... background-color ...

... la couleur des liens visités ... montrant qu'ils ont été visités ... a:visited ...
... pouvant aussi avoir les différentes propriétés décrites ci-dessus ...

... les liens ... actifs ... peuvent aussi être différenciés ...
... a:active ... pouvant aussi avoir les différentes propriétés ...



Résumé :

... lien hypertexte normal ... a ...
... lien hypertexte survolé ... a:hover ...
... lien hypertexte actif ... a:active ...
... lien hypertexte visité ... a:visited ...
... dans body, ... mais aussi dans ... menu, corps, pieds, bloc untel, ... etc ...

... un exemple ...



... si on les définis dans tout body ... nous avons alors :


... la précision est très intéressante ...




... si on les définis dans le menu, par exemple ... nous avons alors :


… comme nous mettons du style souvent différent dans le menu et le corps …
… cela nous permet de réaliser un style spécifique aux liens hypertextes ...
… il n'est pas nécessaire de mettre les quatre propriétés des liens, …
… mais uniquement celles dont on se sert pour définir leur style …

… nous aurons souvent d'autres attributs à préciser pour avoir … l'ombrage du texte …
… que nous voyons dans le …  cours CSS 3.0  … pour une utilisation en XHTML …
… ce qui nous donnera par exemple …

En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .

… l'attribut … border-radius … lui, se voit au …  cours sur le CSS 3.0 


... nous avons le choix entre deux techniques ...
... la première consiste à n'appliquer le style uniquement sur les mots dans le texte ...
... la deuxième est d'inclure ses mots dans un div pour le mettre en évidence ...
... c'est la technique que nous utilisons sur ce site web ...
... nous le voyons ci-dessous avec le retour au menu ...
... d'ou, l'utilisation de ... background-color du div qui sera différent ...



Le style du curseur

... en passant le curseur sur le lien hypertexte "retour au menu" ...
... nous voyons le curseur prendre la forme d'une flèche ...
... dirigée vers le haut à gauche ...

Nous avons donc :

1 - ... cursor:n-resize;    ... flèche vers le haut ... ( n ) ...
2 - ... cursor:e-resize;    ... flèche vers la droite ... ( e ) ...
3 - ... cursor:s-resize;    ... flèche vers le bas ... ( s ) ...
4 - ... cursor:w-resize;    ... flèche vers le gauche ... ( w ) ...

5 - ... cursor:ne-resize;    ... flèche vers le haut-droite ... ( ne ) ...
6 - ... cursor:nw-resize;    ... flèche vers le haut-gauche ... ( nw ) ...
7 - ... cursor:se-resize;    ... flèche vers le bas-droite ... ( se ) ...
8 - ... cursor:sw-resize;    ... flèche vers le bas-gauche ... ( sw ) ...



... pour le bouton à droite ... cookies : ...
... alt="bouton de redirection: explication des cookies" ...
... donne aussi une double flèche haut et bas ...








Image de fond en XHTML.



... une ou plusieurs images de fond peuvent se trouver à plusieurs niveaux et ne pas se mélanger ...
... elles participent de l'apparition de l'effet ... volume 3D ...
... cette explication montre comment réaliser la fenêtre sur l'univers ... !! ...
... en réalisant ...  la même image fixe  ... dans ... body ...  et  ... dans ... div ...
➽ ➽ ➽ ... dans la feuille de style, dans le fichier ... .css ...

   ➽ ➽ ➽ ... pour aller à l'explication ...  fenêtre sur l'univers  ...

Image de fond dans body :


... c'est dans le ... background ... que se défini l'image ...
... avec le nom de l'image ... sa position ... sa répétition ... et son attachement ...

... et le ... background-image ... se définit dans le fichier extérieur ... .css

... •  le nom de l'image : background-image: url(007.gif); ...
... avec son ... url ... terminé par le point-virgule ... et le nom de l'image est entre parenthèses ...
... •  la position de l'image : background-position: left top; ...
... une première valeur horizontale ... avec : left, ... center ... ou ... right ...
... une deuxième valeur verticale ... avec : top, ... center ... ou ... bottom ...
... •  la répétitiopn de l'image : background-repeat: no-repeat; ...
... deux possibilités principales : ... repeat ... et ... no-repeat ...
... repeat ... seul exécute la répétition en ...x et y ... (horizontal et vertical) ...
... repeat-x ... exécute la répétition en ...x ... (horizontal) ...
... repeat-y ... exécute la répétition en ...y ... (vertical) ...
... •  l'attachement de l'image : background-attachment: fixed; ...
... deux possibilités : ... fixed ... (fixe) ... et ... scroll ... (défilante) ...

Un exemple concret :


En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


... nous avons ici ... quatre images de fond ... (celles sur mon site web) ... dans ... body
... le logo de LigneWeb en bas ( 70% ) à gauche ...
... un petit carré à gauche en haut répété en x et en y ...
... les fleurs en haut à droite ... et ... en bas à droite ...

... le fond (body) ... avec les images fixes qui s'y trouvent ... ne bouge pas ...
... contrairement à un bloc en-tête, par exemple, qui lui bouge ... avec Safari 6, ...
... mais plus dans Safari 7 ... ni dans les autres navigateurs ...
... même s'il se trouve dans body ...  ... car définit dans le fichier CSS  ...
... mais bouge à nouveau avec Safari 10.0 ...
... il en sera de même pour toute image de fond fixe qui se trouverait dans n'importe quel bloc ...
... il y a indépendance entre une image de fond fixe et tout le reste ...
...  toute image fixe définie dans css body ... existe hors des mesures de body  ...
... on le voit très bien dès qu'on met le site web en plein écran ... voir la ...  fenêtre sur l'univers  ...

Image de fond dans un bloc div :

... on peut réaliser la même chose dans un ... bloc div ...

Un exemple concret (avec zoom) :

En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .

en pratique ... utilisé sur ce site web ... : ... (avec zoom courbe) ...

... voici la même space-8 ... avec texte ...

... le bloc (div) ... space-8 ... a une image de fond qui ne se répète pas en x horizontalement ...
... il a une hauteur de ... 135px ... défini ... et n'a pas d'attachement ... (scroll) ...
... le background-color: transparent; ... permet d'avoir la couleur de fond du bloc à l'arrière de space-8 ...

... avec la souris sur le bloc, on découvre la transparence grâce à la propriété zoom en CSS 3 ...
... la souris sur le bloc est ...  a:hover  ... ( voir le fichier css ci-dessus ) ...

... et la fenêtre sur l'univers ...
... avec une partie en CSS 3.0 ... :

... pouvant fonctionner en XHTML grâce à des sélecteurs spécifiques ...
... ce qui est montré sur tout ce site web réalisé en XHTML transitionnel ...

  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'écritur 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-5f ... dans le fichier css ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


... 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-5p ... dans le fichier css ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


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

....autre regard ...

... l'image de fond doit être mise dans le fichier css du bloc ...
... en : center center ... et ... fixed ...


... ce qui nous amène à cette composition ...  avec la propriété de transition  ...

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


... 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 fenêtre sur l'univers traverse la page du navigateur ...
... puisqu'elle ne débouche pas sur le background de body ...
... illusion ... effet d'optique ... effet 3D ...




... des trous dans le corps de la page ... 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 XHTML avec du CSS 2 et du CSS 3 ...
... mais réalisable aussi en HTML 5 avec 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 XHTML avec du CSS 2 et du CSS 3 ...
... mais réalisable aussi en HTML 5 avec 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 ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


  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 7.1... et 10.0 ...
 i
 n
 f
 o



... design 3 D ...

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





 MENU CSS 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
  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