TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Samouczek dotyczący pola tekstowego CSS

6

Pola tekstowe służą do prezentowania różnych rodzajów treści, takich jak wiadomości informacyjne, menu, widżety społecznościowe, cytaty blokowe itp. O ile sprawdziliśmy, żaden motyw domyślnie nie oferuje dostosowywalnych pól tekstowych i musisz stworzyć własne, aby dopasować je do swoich potrzeb. W tym artykule utworzymy różne typy pól tekstowych do różnych celów i możesz skopiować i wkleić kod na swojej stronie, aby dodać widżet.

Wbudowane pole tekstowe

Jeśli chcesz utworzyć tylko jedno lub dwa pola tekstowe, zalecanym sposobem jest użycie wbudowanego CSS na poziomie elementu zamiast dodawania CSS na poziomie witryny. Poniżej znajduje się przykładowy kod do konwersji akapitu na ramkę z tłem.

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

Możesz po prostu wkleić kod w dowolnym miejscu w treści swojej strony, a będzie on wyglądał jak poniżej na opublikowanej witrynie:

To jest przykładowy tekst z kolorem tła dodanym za pomocą wbudowanego CSS. To najprostszy sposób na dodanie pól tekstowych do Twojej witryny.

Możesz dostosować kolor tła i atrybuty czcionki, aby wyrównać pole w swojej witrynie.

Pola tekstowe jako wiadomości informacyjne

Wiadomości informacyjne są przydatne do pokazywania odbiorcom różnych stylów wiadomości, takich jak ostrzeżenia, alerty, ogłoszenia, niebezpieczeństwa itp. Używamy niesamowitych ikon czcionek, aby dodać ikony przed tekstem, a CSS w polu wiadomości informacyjnej podano poniżej:

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

Kod HTML okna wiadomości informacyjnej jest następujący:

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

Możesz dodać różne typy wiadomości, dodając wymaganą ikonę, a poniżej znajduje się kilka przykładów okien wiadomości informacyjnych:

To jest pole informacyjne – możesz wprowadzić tyle lub za mało informacji!

To jest okno pomocy – możesz wprowadzić tyle lub za mało informacji!

To jest pole z poradami — możesz wprowadzić tyle lub za mało informacji!

To jest okienko informacyjne – możesz wprowadzić tyle lub za mało informacji!

To jest pole sukcesu – możesz wprowadzić tyle lub za mało informacji!

To jest pole zagrożenia — możesz wprowadzić tyle lub za mało informacji!

To jest okno ostrzeżenia – możesz wprowadzić tyle lub za mało informacji!

Dowiedz się więcej o tworzeniu skrzynek z powiadomieniami.

Cytaty blokowe z polem tekstowym

Cytaty blokowe w Twojej witrynie można ozdobić polami tekstowymi, aby wyglądały atrakcyjnie i pięknie w witrynie. Poniżej znajduje się jeden przykład dostosowywania cytatów blokowych za pomocą 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'; }

HTML powinien wyglądać jak poniżej:

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

Dopasowując kolor tła i cudzysłowów, możesz uzyskać wyniki jak poniżej:

Jest to element cytatu blokowego dostosowany za pomocą właściwości pola tekstowego CSS. W razie potrzeby możesz dostosować więcej…

Jest to element cytatu blokowego dostosowany za pomocą właściwości pola tekstowego CSS. W razie potrzeby możesz dostosować więcej…

Jest to element cytatu blokowego dostosowany za pomocą właściwości pola tekstowego CSS. W razie potrzeby możesz dostosować więcej…

Dowiedz się więcej o tworzeniu niestandardowych cytatów blokowych w stylu bootstrap dla Twojej witryny.

Pudełka menu

Pola tekstowe mogą służyć do wyświetlania menu lub listy treści, aby zaoszczędzić dużo miejsca w witrynie. Tutaj pokazujemy dwa takie pudełka jako podstawowe, właściwie można zrobić znacznie więcej.

CSS dla pola 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 dla pola 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>

Pole menu 1 będzie wyglądało jak poniżej w opublikowanej witrynie:

CSS dla pola 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 dla pola 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>

Pole menu 2 będzie wyglądać jak poniżej:

Godziny otwarcia

  • Śniadanie: 8:00 – 11:00
  • Menu Grillowe: 12:00 – 12:00
  • Muzyka na żywo: 8:00 – 11:00

Wniosek:

Istnieje wiele możliwości tworzenia pól tekstowych za pomocą prostego CSS. Powyżej jest tylko kilka przykładów i możesz dostosować tło, obramowania, kolory i tekst według potrzeb. Możesz bawić się tymi podstawowymi przykładami i tworzyć więcej niestandardowych pól tekstowych dla swoich potrzeb.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów