Les div CSS3 n’auront plus de secret pour vous !

Et voici la suite du cours précédent sur les blocs div.

Dans ce cours vidéo, vous en apprendre encore plus sur la personnalisation de vos blocs div grâce à CSS3.

Regardez ci-dessous !

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Les div CSS3 n’auront plus de secret pour vous !

Bonjour à tous et bienvenu sur Développement Facile.

Dans le cours précédent, vous avez commencé à apprendre à utiliser les blocs div qui est une notion essentielle et fondamentale avec CSS 3 html 5. Là ensemble nous allons passer à la partie 2, voir les autres propriétés valeurs que vous utilisez en CSS pour personnaliser vos blocs div.

La couleur de la bordure

Vous avez une bordure sur tous vos blocs, vous avez déjà vu des exemples de code source mais je vais vous montrer la propriété border-color qui permet de définir la couleur de la bordure d’un bloc. Bien évidemment vous pouvez définir border-top-color la couleur de la bordure supérieure, border-right-color la couleur de la bordure droite, border-bottom-color la couleur de la bordure basse, et border-left-color la couleur de la bordure gauche. Vous avez même la valeur transparente, la couleur de la bordure est transparente donc vous ne la voyez pas, mais elle existe enfaite.

Je vous ai mis un exemple de code source, pour, sur une div, un bloc div de 300 pixels par 300, définir une bordure avec des couleurs différentes top et bottom en gris, left et right en bleu, et la couleur de div de fond, background color, en DDD, je vous invite à reprendre l’exemple de code source dans un de vos document HTML pour voir le résultat.
Comme je vous le dis, je ne vous donne pas le résultat visuellement sur la vidéo, parce que je préfère que vous réécriviez le code source pour mettre en pratique, et vous rendre compte, vous amuser avec les différentes propriétés CSS, et à votre tour comprendre comment ça fonctionne, c’est en faisant des exercices que l’on progresse, vous avez à chaque cours vidéo un exemple de code source, après c’est à vous de reprendre les exemples de code sources dans la vidéo pour les mettre en œuvre dans vos pages Web.

L’épaisseur de la bordure

Vous pouvez définir l’épaisseur de la bordure d’un bloc, avec border-width, border-top-width, border-right-width, border-bottom-width et border-left-width, c’est la largeur de la bordure, bien évidemment, largeur top, largeur haute, largeur droite, largeur basse, largeur gauche avec border-left, bottom, right et top.
La valeur thin ça vous permet d’avoir une bordure très fine, medium pour une bordure moyenne et thick pour une bordure épaisse. Thin, medium, thick, épaisse, donc si vous utilisez ces mots-clés l’épaisseur de la bordure sera en fonction du navigateur que l’utilisateur utilise.

Voici un exemple de code source avec une bordure épaisse et fine.

Le style de la bordure

Vous pouvez définir le style de la bordure donc, en pointillé, trait plein, avec des points, donc utilisez la propriété border-style, bien évidemment, top-style pour la bordure haute, bottom-style pour la bordure basse, border-right pour la bordure droite, border-left pour la bordure gauche, donc border-left-style, évidemment je vais un peu plus vite, si vous avez compris, quand on a compris comment une propriété fonctionne, on les a toutes comprises. Vous pouvez définir des traits pleins avec solid, des tirets avec dashed, des pointillés avec dotted, des doubles traits pleins avec double, groove ça fait un effet 3D, ridge un autre effet 3D, inset des bordures rentrantes incrustées, outset des bordures sortantes de la page, c’est pour les effets sur le bouton, souvent vous avez des boutons en CSS, ils ont utilisés inset, outset pour faire les effets de profondeur sur le bouton, c’est avez des bordures de ce style. Hidden pas de bordure, donc ça influe sur la bordure adjacente, et none ce n’est pas de bordure.

Je vous ai mis un exemple de code source pour vous puissiez vous amuser avec les styles de bordures, là vous avez toutes les propriétés des bordures, donc lorsque vous ferrez vos formulaires, maintenant, rappelez-vous le cours sur les formulaires en CSS, en JavaScript, et en PHP, là vous pourrez rajouter des boutons submit valider, ou reset effacer, avec des effets grâce au CSS, vous combinez toutes les technologies PHP, JavaScript, HTML 5, CSS, pour faire des sites internet de plus en plus interactifs, jolis et dynamique.

Un exemple de code source, à vous de jouer maintenant.

Votre plan d’actions !

Donc comme je vous l’ai dit, l’utilisation des blocs est vraiment fondamentale avec HTML 5, et CSS 3, retrouvez sous ce cours vidéo un exemple de code source à télécharger, si vous avez des questions posez-les directement sous la vidéo et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Voici un nouvel exemple CSS3 pour modifier l’affichage des blocs div.

Montrez-moi ce que vous faîtes avec CSS3

Utilisez la zone commentaires, pour partager vos réussites avec CSS3 et l’affichage de vos blocs div.