Kui teil on ideid ja otsite ideid, kuidas muuta veebisaidid pärast A Song of Fire and Ice (Troonide mängu seeria, mis on mõeldud mitteraamatulugevale elanikkonnale) järgmiseks suureks asjaks ilma oma ajusid raputamata, vaadake neid 15 CSS3 efektid, mille oleme teie jaoks kokku koondanud.

Alates õpetustest kuni tehinguteni – pakume teile 15 hämmastavat efekti, mis muudavad veebisaidid blah-st vau-ni!

Parallaksi efekt

Kas olete sirvinud ihatetomatoesi veebisaiti, mis tähistab Nintendo Game Boy 25. aastapäeva? Kus sa said ka Tetrist mängida?

Või äkki sirvisite Rimmeli veebisaiti, olles üllatunud sellest, kui suurepäraselt ilmuvad esemed modellide värvikale taustale?

3D-efekti, mis näib olevat praegu projekteerimisel kõige populaarsem, nimetatakse tehniliselt parallaksi efektiks. Disaineritele meeldib nendega mängida, kuid peate olema peen ja strateegiline, kuna see võib anda tagasilöögi ja tekitada segase segaduse.

Parallaksi efekt või parallaksi kerimine tuleneb tausta laadimisest aeglasema kiirusega kui teie esiplaan, luues rohkem 3D-ilme. Kas see tundub palju tööd? Mitte keegi, kes töötab nutikalt, tehke Parallaxi teema juba Cyberchimpsis täielikult valmis .

Ken Burnsi efekt

Dokumentalist lõi staatilise pildi panoraamimise ja suumimise idee. Graafiline disainer kasutas seda efekti ohtralt ja olete võib-olla isegi paljudel veebisaitidel seda kohanud.

See efekt mitte ainult ei juhi silmamuna sõna otseses mõttes sinna, kuhu soovite fookuse panna, vaid lisab pildile ka intensiivsust. Kas mäletate filmi vaatamist, kus vana foto vilkus üle ekraani ja jutustaja räägib millestki pildil, samal ajal kui kaader aeglaselt panoraamib ja suumib sellele objektile?

Ken Burnsi efekt on muutunud üsna populaarseks ja õigustatult, kuna see annab kohese ilme igale veebisaidile.

Poolringikujuline navigeerimismenüü

Sa ei pea oma veebisaidi välimuse muutmiseks kõike pingutama. Mõnikord võib abi olla nii vähe kui vanade ja igavate meeste valikust loobumine.

Selle asemel valige stiilne ringikujuline või poolringikujuline navigeerimisvalik, mis aitab esitleda mitmeid menüüvalikuid. Mõned disainerid lisavad selle ainult sotsiaalmeedia jagamisnuppude jaoks, kuid teid üllatab selle mitmekülgsus.

Alates ilmsetest muusikakonsooli ja sotsiaalmeedia jagamise ikoonidest kuni põhimenüü ja profiiliikoonideni on selle kasutamiseks palju võimalusi.

Kas te ei taha selle CSS3 efekti loomisel oma ajusid üle raputada? Hankige see DealFuelilt tasuta.

Kuva/peida sisselogimispaneel

Tänapäeval kasutatakse tavaliselt liugpaneele, kuid see on mõeldud peamiselt liiga paljude vahelehtede koormuse vähendamiseks. Selle valiku potentsiaaliga ei katseta piisavalt disainereid, sest lükandpaneelid võivad olla kasulikud mitmel viisil.

Esitage sisuteemasid, looge segadustevaba välimus, tõstke esteetikat või erinege lihtsalt tavapäraselt kujundatud veebisaitidest. Sisselogimispaneel Kuva/Peida on kohustuslik iga WordPressi veebisaidi jaoks, see annab pärast sisselogimist ülevaate mitme menüüvalikuga armatuurlauast. Lisateavet selle paneeli kohta leiate siit.

Liugur sisselogimisvorm

Veel üks sisselogimispaneeli valik, mis libiseb, et kuvada rohkem sisu, on suurepärane samm, kui soovite, et tellijad sisestaksid natuke rohkem teavet kui lihtsalt e-posti aadress ja nimi, kuid samal ajal ei taha neid üle koormata.

Ruumi vähendamiseks vaadake seda kindlasti, sest see oleks kasulik, kui loote minimalistliku teemaga veebisaite.

3D-lindid ja 3D-efektid

Kui parallaksiefekt teid endiselt hirmutab ja kardate, et lähete sassi, alustage väikesest. Kasutage 3D-linte, erinevaid toone ja varje, et luua oma veebisaidil üldine sügavuse illusioon, muutes seeläbi 3D-efekti.

3D-lindid iseenesest näevad välja täiesti hämmastavad. Kasutage seda veebisaidi osa või ametliku sertifitseerimisdokumendi esiletõstmiseks, mida soovite üles panna, see suurendab lehe üldist visuaalset atraktiivsust.

Tea, kuidas luua efekti CSS3 abil pvmgarage’is.

Kattevoolu efekt

Kasutatakse peamiselt raamatupõhistel veebisaitidel, olete kindlasti näinud seda efekti oma Macis või Apple’i seadmes, kui olete pilte sirvinud. Coverflow efekt kuvab mitmeid üksusi (nt raamatukaaned), kus saate seejärel kaane vaatamiseks libistada vasakule või paremale, vaadata hüpikakna üksikasju ja need valida.

Kas see kõlab huvitavalt? Kas soovite seda projektis ellu viia? Kui jah, siis sirvige see osa kindlasti läbi .

CSS3 üleminekud

Disainerid, kes mängivad pigem targalt kui kõvasti, teavad, et teie veebisaidile mojo lisamine ei nõua palju, teema muutmine siin, mõned varju- ja varjuelemendid ning saate oma lehe tegelikult muuta. Teine võimalus seda teha on lehe sisu animeerimine CSS3 üleminekute kaudu.

Alates tähtede vahedest kuni tekstivarjuni mängige kõike, mis teile meeldib, et näha, mis kõige paremini sobib. Lisaks on siin suurepärane tasuta kingitus, mis sisaldab laia valikut üleminekuefekte.

Lumeteemaline CSS3 animatsioon

Kas tunnete ikka veel pühadehooaja järelmõju? Lumeteemalistel CSS3 animatsioonidel pole mitte ainult pidulik hõng, vaid need toimivad märkimisväärselt hästi ka teatud veebisaitidel, näiteks jäätisebrändi veebisaidil.

Seda on kiire ja lihtne kasutada ning see võib muuta teie veebisaidi või ajaveebi lehe välimust, et täiendada teemat või hooaega.

Animatsioon

Animatsioonid võivad veebisaitidel imesid teha, isegi kui need on peenelt tehtud. See köidab tähelepanu ja aitab ka konversioonidel, kuna tähelepanu suunatakse üleskutsele tegevusele.

Või lihtsalt lisab see lehe nimiväärtust, kui mitte midagi muud. Siin on mõned suurepärased spetsiaalsed animatsiooniefektid, mida saate vaadata.

Kõrgpressi efekt

Olete ilmselt näinud neid Instagrami tsitaatide postitusi, millel on eemaldatud tekst? Just selline näeb välja kõrgpressiefekt ja on ka veebidisainimisel üsna populaarseks muutumas.

Sellel on pöördmasinaga kirjutatud tunne, kuid sellel on elegantne ja klanitud välimus. Kindlasti soovitatav, kui teie oma on veebiväljaanne või ajaveeb. See aitaks ka siis, kui soovite kasutada professionaalset puudutust ilma C-komplekti kasutamata. Siin on õpetus selle kohta, kuidas saate CSS3-ga kõrgpressiefekti kasutada .

Pööratav ring

Väike teave ei kahjusta kunagi kedagi, vaid võib olla ka veebisaidi USP. Veebisaidi, nagu see, mis iga värskendusega juhuslikke fakte paiskab, võiks kujundada omamoodi väikese käepidemega piltidega galeriiks, millel klõpsamisel avaneb lõbusaid pisiasju.

Kuid isegi tavalistel veebisaitidel on pöördring väga oluline. See tihendab teavet, nii et teil pole tekstist tulvil lehekülge. Ja sellel on ka lahe 3D-tunne. Siin on õpetus ümberpööratava ringi loomise kohta.

Mega menüü

Tõenäoliselt olete neid näinud e-kaubanduse veebisaitidel, kus palju kategooriaid tuleb paigutada otse sihtlehele, kuid ilma ülerahvastatud menüüriba loomata.

Valik Mega Menu on kohustuslik ka haridussektori jaoks. Kas teil on ülikooli veebisait, mis tutvustab kõiki suuremaid kursusi, sisseastumisteavet, üliõpilaste tulemusi ja palju muud?

Mega Menu võib aidata segadusest lahti saada, luua teravama ja elegantsema menüüriba valiku ega aja lugejaid segadusse klõpsama valele valikule pikemate ja tihedamate menüüvalikute tõttu. Samuti saate palju teenida, kui hankite tundliku Mega Menu tasuta.

Akordioni galerii

On kaks võimalust, kuidas hoida lugejaid oma saidil aktiivsena, välja tõmmata võimas sisu ja juhtida nende tähelepanu sellele võimsale sisule. Staatiline leht võib lugeja pilku püüda, kuid midagi interaktiivset, näiteks akordionigalerii, püüab lugeja pilku.

Akordionigaleriid – olenemata sellest, kas valite oma parima portfelli esitlemise või saate tähelepanu oma enimmüüdud tootele – töötavad alati. Lugeja tähelepanu köitmiseks ja lehel hoidmiseks on teil aega vaid 6 sekundit. Kasutage Akordioni galeriid, et saada ja hoida oma tähelepanu oma veebisaidil palju kauem. Siin on suurepärane kohandatav Accordion Gallery pistikprogramm, mille saate tasuta kaasa haarata.

Valguskast

Kui oluline on ruudustiku galerii? Kui olete fotograaf, kunstnik või lihtsalt blogija, võib see tähendada teie järgmist suurt esinemist.

Võrgugalerii paneb kõik teie parimad tükid otse välja! Alates vapustavast kaadrist päikeseloojangust mäe otsas ja lõpetades intensiivse tänavaportreega, oodake neid, saage teada või meelitage neid lihtsalt lepingut võitma – ruudustikugalerii võib olla teie parim CV.

Kujundajana peaksite seda mitte ainult oma kliendi töö, vaid ka oma veebisaidi puhul arvestama. Tooge oma töö võidule ja garanteerige oma loomingulise võimekuse eest – ruudustikugalerii on kulda väärt.

Kuid te ei saa sellest tehingust ilma asjata, nii et mine võta see kohe kinni!

Millist neist soovitaksite sõbrale?