TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda CSS -kuvatekstitehosteita?

1

Kun lataat kuvan palvelimelle, sillä on ominaisuuksia, kuten URL -osoite, otsikko, kuvateksti, vaihtoehtoinen teksti ja kuvaus. Voit kuitenkin nähdä vain kuvan ja kuvatekstin julkaistulla verkkosivustolla. Yleensä verkkovastaavat keskittyvät esittelemään kuvaa ja unohtavat tekstityksen tärkeyden. Tässä artikkelissa näytämme sinulle, kuinka luoda CSS -kuvatekstitehosteita kuvatekstien esittämiseksi houkuttelevalla tavalla.

Opi WordPress: Tutustu yli 400 ilmaiseen WordPress -opetusohjelmaan.

CSS -kuvatekstitehoste

Widgetit näyttävät alla olevilta.

Kuvateksti – Slide Down Style

Liu’uta tekstitys alas. Linkki mahdollinen.

Kuvateksti – vaakasuora jaettu tyyli

Horizontl Split Style Caption.

Kuvateksti – pystysuora jaettu tyyli

Pystysuora jaettu tyylinen kuvateksti

Kuvateksti – liukuva tyyli

Kuvan diaesitys

4 eri tyyliä

Kuten voit nähdä esittelyssä, voit luoda kuvatekstin neljällä eri tehosteella.

  • Liukua alas
  • Vaakajako
  • Pystyjako
  • Liu’uta ylös

Kuvatekstitehosteiden HTML

Selitämme ensin HTML -osan dia alas -tehosteella, jotta CSS -osa on helppo ymmärtää. Alla on dia alaspäin tehosteen HTML.

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

Sillä on seuraavat CSS -luokat:

  • yhteinen – tämä on yleinen tyylisarja, jota sovelletaan kaikkiin neljään tehosteeseen.
  • liukuva – tämä on tyylijoukko alaspäin tehosteen luomiseksi. Muita kolmea tehostetta varten olemme käyttäneet split-horiz, split-vert ja slideup CSS -luokkia. Voit vain korvata tämän luokan saadaksesi erilaisen vaikutuksen.
  • pic-caption- tämä luokka määrittelee kuvan tekstitykseen liittyvän vaikutuksen.

Huomautus: Kuvakokoa 300 × 300 px käytetään, jotta mobiililaitteisiin ei tarvita lisäsäätöjä.

Kuvatekstitehosteiden CSS

Yllä olevassa HTML -koodissa olemme käyttäneet "imagecaption.css" -tiedostoa tuodaksemme kaikki tarvittavat CSS -tiedostot ulkoisesta tiedostosta. Alla on CSS dia -alas -tehosteelle ja voit ladata täydelliset CSS- ja HTML -tiedostot napsauttamalla alla olevaa painiketta.

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • Yleisen tyylin osiossa olemme luoneet upotettuja lohkoja kunkin kuvalohkon näyttämistä varten.
  • Pseudo -elementtejä (:: ennen ja :: jälkeen) käytetään luomaan liukusäätimen vaikutus kuvaan.
  • Näet kuvatekstin vain hiirellä ja se on näkymätön, kun sivu latautuu.
  • "Kuvateksti" -luokka määrittää vaalean keltaisen värin kuvatekstille ja lataa kuvatekstin 50% kuvan sijainnin yläosasta.
  • CSS -siirtyminen ja muuntaminen auttaa liu’uttamaan kuvatekstiä kuvan vasemmalta oikealle.
  • "Slide down caption" -kohdan osio auttaa näyttämään liukusäätimen ja sitten kuvatekstin CSS -muunnos- ja siirtymäominaisuuksien avulla.

Käyttö verkkosivullasi

Lataa zip -tiedosto "Image Caption Effects.zip”, joka sisältää täydelliset HTML- ja CSS -koodit kaikille neljälle kuvatekstitehosteiden tyylille.

Zip -arkistossa on kaksi tiedostoa “imagecaption.css” ja “Imagecaption.html”.

  • Lataa CSS -tiedosto samaan HTML -kansioon tai anna täydellinen linkki CSS -tiedostoon HTML -koodina.
  • Voit myös lisätä CSS: n HTML -otsikkoon… -tagien avulla.
  • Upota HTML -koodi verkkosivusi body -tunnisteiden väliin.
  • Voit käyttää vain tietyn tehosteen kannalta relevanttia HTML -div -osiota.

Kaikkien neljän tyylin täydellisen HTML -koodin pitäisi näyttää tältä:

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja