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 7 CSS 2  - introduction  - style des blocs div  / autres styles des blocs div 



Cours 7 CSS 2.0 :
le style des blocs div



 © LigneWeb  ... /style des blocs div.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Le style des blocs utilisés ici :


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 






... nous allons voir le style des différents blocs utilisés sur ce site dans le corps ...
... pour les arrondis et les ombrages ... voir ...  info css 3.0  ...
... nous montrons les blocs ... car c'est un site ... pédagogique ...
... mais aussi pour la beauté ... l'ergonomie de lecture ...



Space-1 :


...avec texte ...

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



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

... nous écrivons dans le fichier .html ... le code suivant ...


... participant ... à la visualisation du bloc, nous avons : ...

... la couleur de fond ... background-color ...
... l'épaisseur de la bordure ... border-width ... avec sa couleur ...
... pas d'ombrage du bloc ... box-shadow ...
... les coins arrondis ... border-radius ...

... une recherche des différentes couleurs est nécessaire ...
... et l'important est de visualiser le ou les blocs ...
... pour être sûr du résultat ... et ceci ... dans les différents navigateurs essentiels ...



Les autres styles.

Space-1j :


... avec texte ...

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



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

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




Space-2 :


... avec texte ...

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



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

... nous avons ... border-style: inset; ... ce qui crée une profondeur ...
... avec ombrage du bloc, ... mais un ombrage légé ...
... avec la couleur de fond en dégradé ... avec background:linear-gradient ...




Space-3 :


... avec texte ...

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



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

... ici, nous avons l'ombrage du bloc ... avec ...border style:solid; ...
... et l'ombrage est inversé et placé à l'intérieur du bloc ... qui permet cet effet 3D ...






Space-4 :


... avec texte ...

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



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

... ici, nous avons l'ombrage du bloc ... avec ...border style:outset; ...
... mais c'est l'utilisation des différentes couleurs ... qui permettent cet effet 3D ...
... avec la couleur de fond en dégradé ... avec background:linear-gradient ...




Space-5 :

... passons la souris sur ces deux blocs :

... avec texte ...

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



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

... ici, nous avons l'ombrage du bloc ... avec ...border style:inset; ...
... avec la transformation et la transition ... qui permettent cet effet 3D ...
... au passage de la souris ... et ceci est vu au ...  cours CSS 3  ...




Space-5p :


... design 3 D ...

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



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


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

... un autre exemple expliqué au ...  cours CSS 3  ...




Space-5f :


... design 3 D ...

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


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



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

... un autre exemple expliqué au ...  cours CSS 3  ...




Space-5column ( création de colonnes) :

... passons la souris sur ce bloc :
... avec texte ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

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



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

... un autre exemple expliqué au ...  cours CSS 3  ...




zoom :

... passons la souris sur ces deux blocs :

... avec texte ... et espaces ... et le troisième angle différent ...




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



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

... ici, nous avons un bloc ... avec ...width: 700px; ...
... dans lequel nous plaçons du texte et ou une image, un slideshow, ...

... avec les attributs spécifiques au   ZOOM   ... qui sont dans ce cas ... :

... transition:width 1s, height 1s; et transform: 1s; ... dans .zoom ...
... et transform:scale(1.3) translate(-50px, 1px); ... dans .zoom:hover ...
... avec border-radius {border-radius: 5px 5px 35px 5px / 25px 25px 10px 25px;} ...
... avec le troisième angle ayant en x : 35px ... et en y : 10px ...

... le zoom avec vidéo ne permet plus les commandes du vidéo ...






Space-6 :


... avec texte ...

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



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

... ici, nous avons l'ombrage du bloc ... avec ...border style:outset; ...
... mais c'est l'utilisation des différentes couleurs ... qui permettent cet effet 3D ...
... avec une différence dans les couleurs (table 3 et 4) ... ce qui produit un autre effet ...






Space-7 :


... avec texte ...

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



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

... ici, nous avons l'ombrage du bloc ... avec ...border style:outset; ...
... mais sans bordure ... qui permettent un autre effet 3D ...




Space-8 :

... passons la souris sur ces deux blocs :

... avec texte ...
ZOOM.

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



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

... ici, nous avons une image de fond avec ...background-image: url(fleurs_ligne_web1.png); ...
... nous avons également la transparence avec ... background-color: transparent; ...
... et également le zoom avec ... transition:width 1s, height 1s;, ... transform: 1s;, ... et ...
...transform:scale(1.3) translate(-50px, 1px); ... en survol de la souris ...
... avec le zoom, nous voyons bien la transparence apparaître ...




Space-9 :


... avec texte ...

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



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






Space-10 :


... avec texte ...

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



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




Space-12 :


... avec texte ...

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



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




Space-w :


... avec texte ...

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



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




Space-x :


... avec texte ...

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



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






Space-z :


... avec texte ...

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



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




Po :


... avec texte ...

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



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




Exemple :


... avec texte ...

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



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




Code :


... avec texte ...

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



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




Search :



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



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




Fournaise :



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



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

... ici, nous avons ... le style du ... retour au menu ... avec le lien hypertexte ...



... 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  - Info HTML 5  - Info 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