TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Tutorial casella di testo CSS

15

Le caselle di testo vengono utilizzate per mostrare diversi tipi di contenuti come messaggi informativi, menu, widget sociali, citazioni di blocco, ecc. Per quanto abbiamo controllato, nessun tema offre di default caselle di testo personalizzabili e devi crearne di tue in base alle tue esigenze. In questo articolo creeremo diversi tipi di caselle di testo per scopi diversi e potrai copiare e incollare il codice sul tuo sito per aggiungere il widget.

Casella di testo in linea

Quando si desidera creare solo una o due caselle di testo, il modo consigliato è utilizzare CSS in linea a livello di elemento invece di aggiungere CSS a livello di sito. Di seguito è riportato un codice di esempio per convertire un paragrafo in un riquadro con sfondo.

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

Puoi semplicemente aggiungere incollare il codice ovunque nel corpo della tua pagina e apparirà come di seguito sul sito pubblicato:

Questa è una casella di testo di esempio con il colore di sfondo aggiunto utilizzando CSS in linea. Questo è il modo più semplice per aggiungere caselle di testo al tuo sito.

Puoi personalizzare il colore di sfondo e gli attributi del carattere per allineare la casella sul tuo sito.

Caselle di testo come messaggi informativi

I messaggi informativi sono utili per mostrare diversi stili di messaggi al tuo pubblico come avviso, avviso, annuncio, pericolo, ecc. Usiamo icone fantastiche per aggiungere icone davanti al testo e il CSS per la finestra del messaggio informativo è riportato di seguito:

<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; }

Il codice HTML per la finestra del messaggio informativo è il seguente:

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

Puoi aggiungere diversi tipi di messaggi aggiungendo l’icona richiesta e di seguito sono riportati alcuni esempi di finestre di messaggi informativi:

Questa è la casella delle informazioni: puoi inserire tante o poche informazioni!

Questa è la casella di aiuto: puoi inserire tante o poche informazioni!

Questa è la casella dei suggerimenti: puoi inserire tante o poche informazioni!

Questa è la casella di avviso: puoi inserire tante o poche informazioni!

Questa è la casella del successo: puoi inserire tante o poche informazioni!

Questa è la casella di pericolo: puoi inserire tante o poche informazioni!

Questa è la finestra di avviso: puoi inserire tante o poche informazioni!

Ulteriori informazioni sulla creazione di finestre di messaggio di notifica.

Blocca citazioni con casella di testo

Le citazioni di blocco sul tuo sito possono essere decorate con caselle di testo in modo che appaiano attraenti e belle sul sito. Di seguito è riportato un esempio di personalizzazione delle virgolette di blocco con 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'; }

L’HTML dovrebbe essere come di seguito:

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

Regolando lo sfondo e il colore delle virgolette puoi ottenere risultati come di seguito:

Questo è un elemento di citazione del blocco personalizzato con le proprietà della casella di testo CSS. Puoi personalizzare di più in base alle tue esigenze…

Questo è un elemento di citazione del blocco personalizzato con le proprietà della casella di testo CSS. Puoi personalizzare di più in base alle tue esigenze…

Questo è un elemento di citazione del blocco personalizzato con le proprietà della casella di testo CSS. Puoi personalizzare di più in base alle tue esigenze…

Ulteriori informazioni sulla creazione di preventivi personalizzati per blocchi in stile bootstrap per il tuo sito.

Scatole del menu

Le caselle di testo possono essere utilizzate per mostrare menu o un contenuto elencato per risparmiare molto spazio sul tuo sito. Qui mostriamo due di queste scatole come di base, in realtà puoi fare molto di più.

CSS per la casella 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 per la casella del 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 casella del menu 1 sarà come di seguito sul sito pubblicato:

CSS per Menu Box 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 per la casella del 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 casella del menu 2 avrà il seguente aspetto:

Orari di apertura

  • Colazione: 8:00 – 11:00
  • Menu alla griglia: 12:00 – 12:00
  • Musica dal vivo: 8:00 – 11:00

Conclusione:

Ci sono numerose possibilità di creare caselle di testo con semplici CSS. Sopra sono solo alcuni esempi e puoi personalizzare lo sfondo, i bordi, i colori e il testo di cui hai bisogno. Puoi giocare con questi esempi di base e creare più caselle di testo personalizzate per le tue necessità.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More