TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Handledning för textruta i CSS

9

Textrutor används för att visa upp olika typer av innehåll som infomeddelanden, menyer, sociala widgetar, blockcitat, etc. Så långt vi har kontrollerat erbjuder inget tema som standard anpassningsbara textrutor och du måste göra ditt eget för att passa dina behov. I den här artikeln kommer vi att skapa olika typer av textrutor för olika ändamål och du kan kopiera och klistra in koden på din webbplats för att lägga till widgeten.

Inline textruta

När du bara vill skapa en eller två textrutor är det rekommenderade sättet att använda inbyggd CSS på elementnivå istället för att lägga till CSS på platsnivå. Nedan finns en exempelkod för att konvertera ett stycke till en ruta med bakgrund.

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

Du kan bara lägga till klistra in koden var som helst på sidans kropp och det kommer att se ut som nedan på den publicerade webbplatsen:

Detta är en exempeltextruta med bakgrundsfärg som läggs till med inline CSS. Detta är det enklaste sättet att lägga till textrutor på din webbplats.

Du kan anpassa bakgrundsfärgen och teckensnittsattributen för att anpassa rutan på din webbplats.

Textrutor som infomeddelanden

Infomeddelanden är användbara för att visa olika stilar av meddelanden till din publik som varning, varning, tillkännagivande, fara, etc. Vi använder fantastiska teckensnittsikoner för att lägga till ikoner framför texten och CSS för informationsmeddelanderutan ges nedan:

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

HTML -koden för infomeddelandet är följande:

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

Du kan lägga till olika typer av meddelanden genom att lägga till den nödvändiga ikonen och nedan är några av exemplen för infomeddelande rutor:

Detta är informationsrutan – Du kan mata in så mycket eller så lite information!

Detta är hjälprutan – Du kan mata in så mycket eller så lite information!

Detta är tipsrutan – Du kan mata in så mycket eller så lite information!

Detta är meddelanderutan – Du kan mata in så mycket eller så lite information!

Detta är framgångsrutan – Du kan mata in så mycket eller så lite information!

Detta är farlådan – Du kan mata in så mycket eller så lite information!

Detta är varningsrutan – Du kan mata in så mycket eller så lite information!

Läs mer om hur du skapar meddelandefält.

Blockera citat med textruta

Blockera citat på din webbplats kan dekoreras med textrutor så att det ser attraktivt och vackert ut på webbplatsen. Nedan är ett exempel på anpassning av blockcitat med 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 -koden ska vara som nedan:

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

Genom att justera bakgrunden och citatfärgen kan du få resultat som nedan:

Detta är blockcitatelement anpassat med CSS -textrutaegenskaper. Du kan anpassa mer efter behov …

Detta är blockcitatelement anpassat med CSS -textrutaegenskaper. Du kan anpassa mer efter behov …

Detta är blockcitatelement anpassat med CSS -textrutaegenskaper. Du kan anpassa mer efter behov …

Läs mer om hur du skapar anpassade blockstrapstilar för din webbplats.

Menyboxar

Textrutor kan användas för att visa menyer eller ett listat innehåll för att spara mycket utrymme på din webbplats. Här visar vi två sådana lådor som grundläggande, faktiskt kan du göra mycket mer.

CSS för menyruta 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 menyruta 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>

Menyrutan 1 kommer att vara som nedan på den publicerade webbplatsen:

CSS för menyruta 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 menyruta 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>

Menyrutan 2 kommer att se ut nedan:

Öppettider

  • Frukost: 08.00-11.00
  • Grillmeny: 12.00 – 12.00
  • Livemusik: 08.00-11.00

Slutsats:

Det finns många möjligheter att skapa textrutor med enkel CSS. Ovan är bara några exempel och du kan anpassa bakgrunden, ramarna, färgerna och texten efter behov. Du kan leka med dessa grundläggande exempel och bygga fler anpassade textrutor för dina behov.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer