TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Tutoriel sur la zone de texte CSS

12

Les zones de texte sont utilisées pour présenter différents types de contenu tels que des messages d’information, des menus, des widgets sociaux, des citations de bloc, etc. Pour autant que nous ayons vérifié, aucun thème par défaut n’offre de zones de texte personnalisables et vous devez créer les vôtres en fonction de vos besoins. Dans cet article, nous allons créer différents types de zones de texte à des fins différentes et vous pouvez copier-coller le code sur votre site pour ajouter le widget.

Zone de texte en ligne

Lorsque vous souhaitez créer uniquement une ou deux zones de texte, la méthode recommandée consiste à utiliser le CSS en ligne au niveau de l’élément au lieu d’ajouter du CSS au niveau du site. Vous trouverez ci-dessous un exemple de code pour convertir un paragraphe en une zone avec un arrière-plan.

<p align=justify style="background-color:#02f3e5; border-radius:4px; font-size:16px; padding:15px; margin:5px;"><b> This is a Sample Textbox</b> </p>

Vous pouvez simplement ajouter coller le code n’importe où sur le corps de votre page et il ressemblera à ci-dessous sur le site publié :

Ceci est un exemple de zone de texte avec une couleur d’arrière-plan ajoutée à l’aide de CSS en ligne. C’est le moyen le plus simple d’ajouter des zones de texte à votre site.

Vous pouvez personnaliser la couleur d’arrière-plan et les attributs de police pour aligner la boîte sur votre site.

Zones de texte en tant que messages d’information

Les messages d’informations sont utiles pour afficher différents styles de messages à votre public, tels que avertissement, alerte, annonce, danger, etc. Nous utilisons des icônes de police géniales pour ajouter des icônes devant le texte et le CSS pour la boîte de message d’information est donné ci-dessous :

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css"> .webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; }

Le code HTML de la boîte de message d’information est le suivant :

<div class="webnots-information webnots-notification-box"> This is the info box - You can input as much or as little information! </div> <div class="webnots-question webnots-notification-box"> This is the help box - You can input as much or as little information! </div> <div class="webnots-tip webnots-notification-box"> This is the tip box - You can input as much or as little information! </div>

Vous pouvez ajouter différents types de messages en ajoutant l’icône requise. Vous trouverez ci-dessous quelques exemples de boîtes de message d’information :

Il s’agit de la zone d’information – Vous pouvez saisir autant ou aussi peu d’informations !

Ceci est la boîte d’aide – Vous pouvez entrer autant ou aussi peu d’informations !

C’est la boîte à astuces – Vous pouvez entrer autant ou aussi peu d’informations !

Ceci est la boîte de notification – Vous pouvez entrer autant ou aussi peu d’informations!

C’est la boîte à succès – Vous pouvez saisir autant ou aussi peu d’informations !

C’est la zone de danger – Vous pouvez saisir autant ou aussi peu d’informations !

Ceci est la boîte d’avertissement – Vous pouvez entrer autant ou aussi peu d’informations!

En savoir plus sur la création de boîtes de message de notification.

Bloquer les guillemets avec zone de texte

Les citations en bloc sur votre site peuvent être décorées avec des zones de texte afin qu’elles soient attrayantes et belles sur le site. Vous trouverez ci-dessous un exemple de personnalisation des guillemets de bloc avec CSS :

blockquote { font-style:italic; line-height:32px; font-size:20px; color:#fff; background: #3F51B5; margin:10px; padding: 15px 20px 15px 20px; border-radius: 5px; } blockquote:before, blockquote:after { position: relative; vertical-align: middle; font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; line-height: 0; color: #FBC02D; } blockquote:before { left: -5px; content: '201C'; } blockquote:after { content: '201D'; }

Le HTML devrait être comme ci-dessous :

<blockquote> This is block quote element customized with CSS text box properties. You can customize more as you need... </blockquote>

En ajustant la couleur de l’arrière-plan et des citations, vous pouvez obtenir des résultats comme ci-dessous :

Il s’agit d’un élément de citation de bloc personnalisé avec les propriétés de la zone de texte CSS. Vous pouvez personnaliser davantage selon vos besoins…

Il s’agit d’un élément de citation de bloc personnalisé avec les propriétés de la zone de texte CSS. Vous pouvez personnaliser davantage selon vos besoins…

Il s’agit d’un élément de citation de bloc personnalisé avec les propriétés de la zone de texte CSS. Vous pouvez personnaliser davantage selon vos besoins…

En savoir plus sur la création de devis de bloc de style bootstrap personnalisés pour votre site.

Boîtes de menu

Les zones de texte peuvent être utilisées pour afficher des menus ou un contenu répertorié pour économiser beaucoup d’espace sur votre site. Ici, nous montrons deux de ces boîtes comme basiques, en fait, vous pouvez faire beaucoup plus.

CSS pour la zone de menu 1 :

.container-box { width: 300px; padding: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .block { display: block; width: 100%; padding-right: 0; padding-left: 0; background-color: #5cb85c; } .item-list { display: inline-block; padding: 6px 12px; margin-bottom: 5px; font-size: 20px; font-weight: 600; line-height: 28px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: lightyellow; }

HTML pour la zone de menu 1 :

<div class="container-box"> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> </div>

La case de menu 1 sera comme ci-dessous sur le site publié :

CSS pour la zone de menu 2 :

.box-column { width: 350px; border: 1px groove; padding: 5px; } .color-box { padding: 0; margin: 0; list-style: none; } .color-box li { color: #fff; padding: 10px 10px 10px 15px; background-color: brown; margin-bottom: 3px; font-size: 26px; }

HTML pour la zone de menu 2 :

<div class="box-column"> <h3>Opening Hours</h3> <ul class="color-box"> <li>Breakfast: 8AM - 11AM</li> <li>Grill Menu: 12AM - 12PM</li> <li>Live Music: 8AM - 11AM</li> </ul> </div>

La boîte de menu 2 ressemblera à ci-dessous :

Horaires d’ouvertures

  • Petit déjeuner: 8h – 11h
  • Menu Grillades: 12h – 12h
  • Musique en direct : de 8 h 00 à 11 h 00

Conclusion:

Il existe de nombreuses possibilités de créer des zones de texte avec de simples CSS. Ci-dessus ne sont que quelques exemples et vous pouvez personnaliser l’arrière-plan, les bordures, les couleurs et le texte selon vos besoins. Vous pouvez jouer avec ces exemples de base et créer davantage de zones de texte personnalisées selon vos besoins.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails