Budući da su nove mogućnosti veličine Divi objavljeno, postoji nekoliko vodiča koji vam pokazuju kako stvoriti lebdeća otkrića. U ovim vodičima, sadržaj maskiran je postavljen okomito. Međutim, u nekim slučajevima možda ćete htjeti stvoriti vodoravno otkriće. U ovom vodiču pokazat ćemo vam kako otkriti slike korištenjem lebdećih rešetki i opcija prelijevanja. Divi. Obavljanje ovog posla zahtijeva nešto drugačiji pristup. Koristit ćemo red od jednog stupca i postaviti sve module jedan ispod drugog. Dok lebdite, stupac ćemo pretvoriti u horizontalnu mrežu. Također možete besplatno preuzeti JSON datoteku!
Idemo.
pregled
Prije nego što uđemo u tutorial, pogledajmo kako to izgleda na različitim veličinama zaslona.
Krenimo rekreirati!
Dodajte novi odjeljak
Započnite dodavanjem novog redovnog odjeljka stranici na kojoj radite.
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak pomoću sljedeće strukture stupca:
Zadana pozadina gradijenta
Bez dodavanja dodatnih modula, otvorite parametre retka i dodajte sljedeću pozadinu gradijenta:
- Boja 1: #b1ffc4
- 2 boja: #ffffff
- Tip gradijenta: radijalni
- Radijalni pravac: središte
- Početna pozicija: 28%
- Krajnji položaj: 28%
Leteći iznad pozadine gradijenta
Promijenite pozadinu nagiba ispod pokazivača miša.
- Boja 1: #b1ffc4
- 2 boja: #ffffff
- Tip gradijenta: radijalni
- Radijalni smjer: lijevo
- Početna pozicija: 5%
- Krajnji položaj: 5%
razmak
Idite na postavke razmaka, a zatim promijenite vrijednosti popunjavanja i margine.
- Gornja obloga: 0px
- Donja obloga: 0px
- Gornja margina: 50px
- Donja marža: 50px
Zadana granica
U gornji desni i donji desni kut dodajte polumjer obruba od 50 piksela.
Zadržite granicu
Dovedite uglove da lebde "0px".
Zadana sjena
Zatim dodajte suptilnu sjenu okvira koristeći sljedeće parametre:
- Kutija sjena zamućenja sjena: 50px
- Boja sjene: rgba (0,0,0,0.09)
Hover kutije sjene
Kada letite iznad, sjenu iz okvira uklonite, zamjenjujući boju sjene potpuno prozirnom bojom.
- Boja sjene: rgba (0,0,0,0)
Dodajte tekstualni modul u stupac
Dodajte H2 sadržaj
Vrijeme je da počnete dodavati module, počevši od tekstualnog modula. Uđi sadržaj H2 po vašem izboru.
Postavke teksta H2
Prebacite se na karticu Dizajn i u skladu s tim promijenite postavke teksta H2:
- Naslov 2 Font: Acme
- Naslov 2 Stil fonta: Podcrtavanje
- Naslov 2 Podcrtana boja: #00ff3f
- Naslov 2 Boja teksta: #000000
- Naslov 2 Veličina teksta: 3vw
razmak
Zatim dodajte vrijednosti prilagođenog ispunjavanja.
- Najbolja obloga: 6vw
- Donja obloga: 7vw
- Lijeva obloga: 2vw
U stupac dodajte modul slike
Postavi sliku
Drugi modul koji nam treba u ovom stupcu je slikovni modul. Prenesite pejzažnu sliku po vašem izboru.
Svjetlosna kutija
Tada u postavkama veze aktivirajte opciju lightbox.
- Otvori u pregledniku: da
dimenzioniranje
I prisilite punu širinu na sliku u postavkama veličine. To će osigurati da slika ostane osjetljiva na svim veličinama zaslona.
- Snaga pune širine: Da
Klonirajte modul slike dva puta
Nakon što završite prvi modul slike, možete ga kopirati dva puta.
Promjena slika
Promijenite slike u dva duplikata. Pazite da slike koje prenesete budu iste veličine kao i prva slika.
Redu dodajte efekt prevrtanja
dimenzioniranje
Sad kad smo dovršili osnovne postavke redaka i mahuna, vrijeme je da stvorimo efekt lebdenja! Počet ćemo s promjenom visine i širine crte i sakriti preljeve. Otvorite postavke veličine retka i unesite sljedeće promjene:
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 1
- Širina: 20%
- Maksimalna širina: 100%
- Visina: 15.9vw
lebdeći
Smanjite širinu na "100%" tijekom lebdenja. To će omogućiti prikaz slika nakon što se linija zadrži.
- Širina: 100%
vidljivost
Prijeđite na sljedeću naprednu karticu i sakrijte preljeve. Ovo će osigurati da slike budu maskirane prije posjetitelji lebdite (stolno računalo) ili kliknite (tablet/mobilni) na tekstualni modul.
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
prijelazi
Također mijenjamo trajanje prijelaza u parametrima prijelaza.
- Trajanje prijelaza: 0ms
Element prevrtanja glavnog stupca
Da bismo stvorili mrežu lebdenja, otvorit ćemo postavke stupaca, otići na karticu Napredne mogućnosti i u glavni element lebdenja smjestiti sljedeće redove CSS koda:
prikaz: rešetka; grid-template-stupci: 20% 25% 25% 25%; razmak mreže: 10px;
Klonirajte liniju dva puta
Nakon što dovršite prvi red, možete ga klonirati koliko god puta želite. Za ovaj određeni primjer dizajna kloniramo red dva puta.
Izmijenite pozadinu gradijenta linije 1
Promijenite boju prvog gradijenta u pozadini gradijenta drugog retka.
- Boja 1: # ffdc96
Promijenite pozadinu gradijenta linije 2
Učinite isto za treći red.
- Boja 1: # b7c7ff
Promijenite kopiju tekstualnog modula i boju podvlake dvaju duplikata
Nastavite mijenjanjem podcrtane boje duplikata tekstualnog modula s kopijom i gotovi ste!
- Podvučena boja # 1: # ffaa00
- Podvučena boja # 2: # 0037ff
Završne misli
U ovom vodiču smo vam pokazali kako prikazati slike u vodoravnim lebdećim rešetkama pomoću opcija prelijevanja. Divi. Slike su otkrivene kada se zadrži miš na radnoj površini i klikne na tabletu/telefonu. Iako smo otkrili slike, vi ih možete otkriti sadržaj po vašem izboru mijenjanjem parametara u generatoru. Nadamo se da će vas ovaj vodič nadahnuti za stvaranje vlastitih alternativnih dizajna lebdeće mreže! Ako imate pitanja ili prijedloga, svakako ostavite komentar u odjeljku za komentare u nastavku!
