Découvrez toutes les balises CSS3 supplémentaires

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Voici un nouveau cours qui vous donne les dernières nouveautés CSS3 pour effectuer la mise en forme de votre texte.

Tout est dans la formation ci-dessous.

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

Découvrez toutes les balises CSS3 supplémentaires

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours sur CSS 3 et là je tenais dans ce nouveau cours ; à vous présenter des nouvelles balises qui sont apparues et qui vont sûrement vous êtres très utiles.

Balises CSS pour les paragraphes

Très rapidement, je vais vous présenter un peu les valeurs CSS 3, par exemple vous avez la valeur ou la propriété first-letter, qui permet, dans un paragraphe, de modifier l’apparence uniquement de la première lettre. Donc comme ça, ça va vous permettre de créer un effet de lettrine très sympa comme pour les romans écrits à l’ancienne où il y a la première lettre écrite en grande majuscule et après tout le texte qui s’affiche.

Voici un exemple simple de code source, vous avez la div classe qui prend la classe CSS externe avec une bordure de 2 pixels solides bleus, une marge gauche de 30 pixels, une largeur width de 200 pixels et une marge intérieure de 10 pixels, et vous avez une classe.letter, la classe letter :first-letter, on définit une marge droite de 8 pixels, et une taille de la police égale à 32 pixels. Dans le texte, en fait ce qui veut dire, dans votre texte, le Loren Lipsum est simplement du faux texte employé dans la composition et la mise en page avant impression, le L de le Loren Ipsum sera en taille 32 pixels avec une marge à droite de 8 pixels, don la première lettre sera vraiment mise en valeur par rapport à tout le contenu du texte.

Vous avez également la propriété first-line qui fonctionne exactement comme first-letter, sauf que first-line ça permet de définir la première ligne d’un paragraphe, donc il faut savoir que la longueur de la première ligne sur un paragraphe elle est variable, ça dépend de la largeur du bloc, de la taille de la police, de la police utilisée, donc tout dépendra de ça, en tout cas first-line ça va vous permettre de donner un style très particulier juste à la première ligne d’un paragraphe.

Là dans le teste on va dire que le Lorem Ipsum est simplement du faux, se sera notre première ligne, on a un bloc div avec la classe style-CSS-text1, une bordure, une marge gauche, une largeur, un padding, et .letter.first-line, appliqué à une deuxième div, avec font-weight :bold pour afficher la première ligne en gras, et font-size 28 pixels pour ajouter afficher à 28 pixels, la première ligne donc la taille des caractères. Vous verrez, reprenez cet exemple de code source dans vos documents HTML, et vous verrez la première ligne qui est affichée différemment du reste du bloc de texte.

Insérer du contenu

Vous avez également la propriété :before, associée à content ça vous permet d’insérer un contenu avant un bloc, donc ça peut être très pratique, comme dans l’exemple vous avez des types H1 et vous pouvez mettre une flèche, donc une image avant votre contenu H1, vous faites H1 : before content et l’URL vers votre image arrow fleche.png. Ce qui fait qu’à chaque fois que vous mettrez du texte entre les balises H1, juste avant votre texte, il y aura cette image de flèche qui indique votre texte. Egalement très pratique cette valeur before pour insérer très facilement, très rapidement du contenu avant chaque titre, avant des paragraphes, à vous de choisir, donc pareil vous pouvez réutiliser le code source, pour l’intégrer dans votre site Internet.

Vous avez la même chose, la propriétaire after, mais là au lieu que ce soit avant le texte, ce sera après le texte, pardon, toujours associé à content et ça va vous permettre d’insérer un contenu après un bloc, tout simplement.

H1 :after content URL new.png, donc au lieu d’être avant comme la flèche tout à l’heure, là il y aura h1 félicitation pour votre inscription et new.png, donc, nouveauté image, nouveauté.png après votre texte, à chaque fois que vous allez utiliser la balise H1, donc commencez votre premier exercice juste après, il y aura content URL new.png donc votre image. Ce sont des valeurs CSS très pratiques, peu connues, mais en tout cas qui peuvent vous être très utile pour mettre du contenu automatiquement en valeur.

Votre plan d’actions !

Là vous venez tout juste de découvrir de nouvelles propriétés et des valeurs CSS 3, c’est beaucoup plus simple et plus rapide de faire votre mise en forme avec des feuilles de styles CSS plutôt que de devoir recréer ces mêmes effets avec JavaScript donc profitez-en bien, retrouvez un code source à télécharger directement sous cette vidéo, si vous avez des questions posez-les sous le cours vidéo également, et je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code CSS3

Voici un exemple de code avec ces nouvelles balises CSS3.

Downloads

Utilisez-vous souvent ces nouvelles balises ?

Et dans quel cas, sites web, avez-vous déjà implémenté ces balises CSS3. Dites le moi dans la zone commentaires ci-dessous.

 

Créez des Sites Web Magnifiques avec la Formation Gratuite CSS3 Facile !

Apprenez comment utiliser les nouveautés de CSS3, les balises supplémentaires, la gestion simplifiée des blocs div...