TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

CSS-Textfeld-Tutorial

50

Textfelder werden verwendet, um verschiedene Arten von Inhalten wie Infonachrichten, Menüs, soziale Widgets, Blockzitate usw. anzuzeigen. Soweit wir das überprüft haben, bietet kein Thema standardmäßig anpassbare Textfelder und Sie müssen Ihre eigenen an Ihre Bedürfnisse anpassen. In diesem Artikel erstellen wir verschiedene Arten von Textfeldern für verschiedene Zwecke und Sie können den Code kopieren und auf Ihrer Website einfügen, um das Widget hinzuzufügen.

Inline-Textfeld

Wenn Sie nur ein oder zwei Textfelder erstellen möchten, empfiehlt es sich, Inline-CSS auf Elementebene zu verwenden, anstatt CSS auf Site-Ebene hinzuzufügen. Unten ist ein Beispielcode zum Konvertieren eines Absatzes in einen Rahmen mit Hintergrund.

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

Sie können den Code einfach an einer beliebigen Stelle im Hauptteil Ihrer Seite einfügen und er sieht auf der veröffentlichten Website wie folgt aus:

Dies ist ein Beispieltextfeld mit Hintergrundfarbe, die mithilfe von Inline-CSS hinzugefügt wurde. Dies ist die einfachste Möglichkeit, Ihrer Website Textfelder hinzuzufügen.

Sie können die Hintergrundfarbe und die Schriftattribute anpassen, um das Feld auf Ihrer Website auszurichten.

Textfelder als Infonachrichten

Infonachrichten sind nützlich, um Ihrem Publikum verschiedene Nachrichtenstile wie Warnung, Warnung, Ankündigung, Gefahr usw. anzuzeigen. Wir verwenden großartige Schriftartensymbole, um Symbole vor dem Text hinzuzufügen.

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

Der HTML-Code für das Info-Nachrichtenfeld lautet wie folgt:

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

Sie können verschiedene Arten von Nachrichten hinzufügen, indem Sie das erforderliche Symbol hinzufügen. Nachfolgend finden Sie einige Beispiele für Info-Nachrichtenfelder:

Dies ist die Infobox – Sie können so viele oder so wenige Informationen eingeben!

Dies ist die Hilfebox – Sie können so viele oder so wenige Informationen eingeben!

Dies ist die Tippbox – Sie können so viele oder so wenige Informationen eingeben!

Dies ist das Hinweisfeld – Sie können so viele oder so wenige Informationen eingeben!

Dies ist die Erfolgsbox – Sie können so viele oder so wenige Informationen eingeben!

Dies ist die Gefahrenbox – Sie können so viele oder so wenige Informationen eingeben!

Dies ist das Warnfeld – Sie können so viele oder so wenige Informationen eingeben!

Erfahren Sie mehr über das Erstellen von Benachrichtigungsfeldern.

Zitate mit Textfeld blockieren

Blockzitate auf Ihrer Site können mit Textfeldern dekoriert werden, damit sie auf der Site attraktiv und schön aussehen. Unten ist ein Beispiel für das Anpassen von Blockzitaten mit 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'; }

Der HTML-Code sollte wie folgt aussehen:

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

Durch Anpassen der Hintergrund- und Anführungszeichenfarbe können Sie Ergebnisse wie folgt erzielen:

Dies ist ein Block-Zitat-Element, das mit CSS-Textfeldeigenschaften angepasst wurde. Sie können mehr nach Bedarf anpassen…

Dies ist ein Block-Zitat-Element, das mit CSS-Textfeldeigenschaften angepasst wurde. Sie können mehr nach Bedarf anpassen…

Dies ist ein Block-Zitat-Element, das mit CSS-Textfeldeigenschaften angepasst wurde. Sie können mehr nach Bedarf anpassen…

Erfahren Sie mehr über das Erstellen von benutzerdefinierten Blockangeboten im Bootstrap-Stil für Ihre Website.

Menüboxen

Textfelder können verwendet werden, um Menüs oder einen aufgelisteten Inhalt anzuzeigen, um viel Platz auf Ihrer Website zu sparen. Hier zeigen wir zwei solcher Boxen als Basic, eigentlich kann man noch viel mehr machen.

CSS für Menüfeld 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 für Menüfeld 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>

Die Menübox 1 sieht auf der veröffentlichten Site wie folgt aus:

CSS für Menü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 für Menüfeld 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>

Die Menübox 2 sieht wie folgt aus:

Öffnungszeiten

  • Frühstück: 8:00 – 11:00 Uhr
  • Grillmenü: 12:00 – 12:00 Uhr
  • Live-Musik: 8:00 – 11:00 Uhr

Abschluss:

Es gibt zahlreiche Möglichkeiten, Textboxen mit einfachem CSS zu erstellen. Oben sind nur einige Beispiele und Sie können den Hintergrund, die Ränder, Farben und den Text nach Bedarf anpassen. Sie können mit diesen grundlegenden Beispielen spielen und weitere benutzerdefinierte Textfelder für Ihre Bedürfnisse erstellen.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen