Home-theater-designers
Učinki lebdenja na sliki lahko vašemu spletnemu mestu dodajo dodatno raven sijaja. Ustvarijo gladek učinek, zaradi česar so galerije slik ali vrtiljaki prijetnejši za krmarjenje. Najboljši del je, da lahko te učinke ustvarite samo s CSS in brez JavaScripta.
Na svojih slikah lahko ustvarite različne sloge animacije. Ti vključujejo zameglitev ali povečavo ozadja, bledenje ali drsenje v besedilu in spreminjanje barve ozadja.
MAKEUSEOF VIDEO DNEVA POMIKITE SE ZA NADALJEVANJE Z VSEBINO
Ustvarjanje HTML-ja za
Začnite z ustvarjanjem index.html datoteko v prazno mapo v računalniku, nato pa datoteko odprite z urejevalnikom besedila. Znotraj datoteke ustvarite okostje HTML in dodajte naslednje oznake znotraj začetne in končne oznake telesa:
moj računalnik ne prepozna mojega zunanjega trdega diska
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
To je mrežni vsebnik s štirimi ovoji slik. Elementi div z ovoj slike služi kot ovoj za sliko in njeno ustrezno besedilo. Slika in vsebina vsakega razdelka imata dodan edinstven nabor razredov.
Znotraj slogovnega lista boste ciljajte na te elemente po njihovih imenih razredov in uporabite različne učinke oblikovanja in animacije. Besedilo privzeto ne bo prikazano; prikazali jo boste samo, ko se s kazalcem miške pomaknete nad ovoj slike, slika pa bo med tem podvržena različnim učinkom.
Dodajanje osnovnega CSS
Zdaj, ko ste ustvarili HTML, je čas, da ga oblikujete s CSS. Ustvariti style.css datoteko in povezavo do te slogovne datoteke iz vaše datoteke HTML znotraj datoteke
<link rel="stylesheet" href="style.css">
Znotraj vašega style.css datoteke, morate najprej ponastaviti rob na telesu na nič in nastaviti spodnji rob:
body {
margin: 0;
margin-bottom: 20rem;
}
Nato morate skrajno zunanjo posodo spremeniti v a Mreža CSS, ki jo lahko uporabite za postavitev elementov v dveh dimenzijah . Naslednja koda ustvari mrežo s toliko stolpci ali vrsticami, ki ustrezajo. Najmanjša velikost vsakega stolpca je 300 slikovnih pik, največja velikost pa je 1 del vsebnika:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Ker želite besedilo postaviti glede na vsebnik, morate nastaviti položaj glede na ovoj slike:
kako postaviti pas na jabolčno uro
.image-wrapper {
position: relative;
overflow: hidden;
}
Naslednji korak je oblikovanje slike. Prikažite sliko kot blok element, naj obsega širino celotnega vsebnika in jo postavite v sredino vsebnika:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Kar zadeva besedilo, ga postavite na sredino in dajte prozorno, svetlo sivo barvo ozadja:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Shranite datoteko CSS in jo odprite index.html v vašem brskalniku. Morali bi najti stran, podobno tisti na spodnji sliki.
Nastavitev vklopa prehoda in besedila
Zdaj, ko ste za slike uporabili osnovne sloge, je naslednji korak, da jim dodate nekaj animacije. Začnite tako, da obema slikama in njunemu ustreznemu besedilu dodate prehod:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
To pomeni, da bodo vsi učinki prehoda (tj. zatemnitev, povečava in zamegljenost) trajali 200 milisekund in imeli enako časovno krivuljo.
Zatemnitev in zameglitev animacije
Prvi slog animacije bledi v besedilu. Ko miškin kazalec premaknete nad določen ovoj slike, se vsebina, ki ima zbledi razredu bo uporabljen ta učinek (vstopanje in izstopanje animacije). To dosežete tako, da motnost nastavite na nič in jo spremenite v eno, ko miško premaknete na določen ovoj slike:
pri ponastavitvi tega računalnika je prišlo do težave
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Če shranite datoteko in preverite brskalnik, boste videli, da se animacija zatemni. Morda pa boste tudi opazili, da je besedilo nekoliko težko berljivo (če je slika ostra in ima veliko kontrasta). Ne pozabite, da imajo vse slike tudi ime razreda zamegljenost . To je za zameglitev slik, da dodate nekaj prepotrebnega kontrasta med njimi in besedilom:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Zdaj, ko miškin kazalec premaknete nad sliko, lahko vidite, da bo le zamegljena. Vrednost slikovnih pik lahko povečate, da bo zamegljenost na slikah bolj izrazita in s tem dodate večji kontrast med njo in besedilom.
Dodajanje drugih učinkov
Drugi učinki so drsenje besedila z leve, povečava slike in dodajanje sivine sliki. Tukaj je koda za doseganje vseh treh učinkov:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Shranite datoteko, nato pojdite v brskalnik in premaknite miškin kazalec nad vsako sliko. Morali bi videti različne učinke v akciji.
Za dokončanje drsnih učinkov lahko ustvarite še tri ovoje slik, od katerih vsak vsebuje sliko in besedilo. Vsak del besedila bi imel ime razreda slide-up , drsenje navzdol, oz rahlo desno . Nato bi posredovali pravilno vrednost pixel, em ali rem , znotraj transformacija() funkcijo za ustvarjanje vseh treh učinkov.
CSS Grid in Flexbox
CSS Grid in Flexbox sta dve funkciji, ki vam omogočata ustvarjanje fantastičnih postavitev za vaše spletno mesto. Z lahkoto lahko ustvarite tako rekoč katero koli postavitev, ki jo želite, in prilagodite vrstice in stolpce svojemu okusu. Tudi stolpci bodo privzeto odzivni. Če se naučite, kdaj uporabiti enega namesto drugega, vam bo pomagalo postati najboljši 1-odstotni razvijalec CSS.