Jos sinulla on ja etsit ideoita, joiden avulla verkkosivustoista tulee seuraava iso asia A Song of Fire and Ice (Game of Thrones -sarja ei-kirjoja lukevalle yleisölle) jälkeen ilman aivosi haravointia, katso nämä 15 CSS3:a. tehosteet, jotka olemme koonneet sinulle.

Opetuksista tarjouksiin, tarjoamme sinulle 15 hämmästyttävää tehostetta, jotka muuttavat verkkosivustot blaasta wowiksi!

Parallaksiefekti

Oletko selannut Nintendo Game Boyn 25-vuotisjuhlaa vievää ihatetomatoes- verkkosivustoa? Missä sait myös pelata Tetrisiä?

Tai ehkä selaat Rimmelin verkkosivustoa hämmästyneenä siitä, kuinka nerokkaasti esineet ponnaavat mallien värikkääseen taustaan?

3D-vaikutteista, joka näyttää olevan nyt suunnittelun huippu, kutsutaan teknisesti parallaksiefektiksi. Suunnittelijat rakastavat leikkiä näillä, mutta sinun on oltava hienovarainen ja strateginen, sillä se voi kostautua ja lopulta luoda sekavaa sotkua.

Parallax-tehoste tai Parallax-vieritys on seurausta siitä, että tausta latautuu hitaammin kuin etualalla, mikä luo enemmän 3D-ilmettä. Kuulostaako paljon työltä? Ei älykkäästi työskenteleville, vaan saa Parallax-teema valmiiksi jo Cyberchimpsissä.

Ken Burnsin efekti

Dokumenttielokuvantekijä oli edelläkävijä staattiseen kuvaan panoroimisesta ja zoomauksesta. Graafinen suunnittelija käytti tätä tehostetta runsaasti ja olet ehkä jopa törmännyt tähän monilla verkkosivustoilla.

Vaikutus ei vain ohjaa silmämunat kirjaimellisesti haluamaasi paikkaan, vaan lisää myös ripaus intensiteettiä kuvaan. Muistatko katsomasi elokuvaa, jossa vanha valokuva välähti ruudulla ja kertoja puhuu jostain kuvassa, kun taas kehys hitaasti panoroi ja zoomaa kyseiseen kohteeseen?

Ken Burns -efektistä on tullut varsin suosittu ja aivan oikein, koska se antaa välittömän kasvojenkohotuksen mille tahansa tylsälle verkkosivustolle.

Puoliympyrän muotoinen navigointivalikko

Sinun ei tarvitse tehdä kaikkesi muuttaaksesi verkkosivustosi ulkoasua. Joskus niin vähän kuin vanhojen ja tylsien miesten vaihtoehdoista luopuminen voi auttaa.

Valitse sen sijaan tyylikäs pyöreä tai puolipyöreä navigointivaihtoehto, joka auttaa esittelemään useita valikkovaihtoehtoja. Jotkut suunnittelijat sisällyttävät tämän vain sosiaalisen median jakamispainikkeisiin, mutta yllätyt sen monipuolisuudesta.

Ilmeisistä musiikkikonsolin ja sosiaalisen median jakamiskuvakkeista ensisijaiseen valikkoon ja profiilikuvakkeisiin on monia tapoja hyödyntää tätä.

Etkö halua haravoida aivojasi luodaksesi tämän CSS3-efektin tyhjästä? Hanki sellainen ilmaiseksi DealFuelilta.

Näytä/piilota kirjautumispaneeli

Liukupaneeleja käytetään nykyään yleisesti, mutta se on pääasiassa liian monen välilehden kuormituksen keventämiseksi. Ei tarpeeksi suunnittelijoita kokeile tämän vaihtoehdon mahdollisuuksia, koska liukupaneelit voivat olla hyödyllisiä niin monella tapaa.

Esittele sisältöaiheita, luo sotkuinen ilme, korosta estetiikkaa tai erotu perinteisesti suunnitelluista verkkosivustoista. Näytä/piilota kirjautumispaneeli on pakollinen jokaiselle WordPress-sivustolle, se antaa yleiskatsauksen kojelaudasta, jossa on useita valikkovaihtoehtoja kirjautumisen jälkeen. Lisätietoja paneelista täällä.

Liukusäätimen kirjautumislomake

Toinen kirjautumispaneelivaihtoehto, joka liukuu paljastaakseen enemmän sisältöä, on loistava askel, kun haluat tilaajien antavan hieman enemmän tietoja kuin vain sähköpostiosoitteen ja nimen, mutta samalla et halua kuormittaa heitä.

Katso tämä ehdottomasti myös tilan säästämiseksi, sillä se olisi kätevää luoessasi minimalistisia aiheita sisältäviä verkkosivustoja.

3D-nauhat ja 3D-tehosteet

Jos olet edelleen peloissasi Parallax-efektistä ja pelkäät sotkeutuvasi, aloita pienestä. Käytä 3D-nauhoja, erilaisia sävyjä ja varjoja luodaksesi yleisen illuusion syvyydestä verkkosivustollesi ja näin luodaksesi 3D-vaikutelman.

3D-nauhat itsessään näyttävät aivan uskomattomilta. Käytä tätä korostaaksesi osan verkkosivustosta tai virallisesta sertifiointiasiakirjasta, jonka haluat laittaa, tämä lisää sivun yleistä ulkonäköä.

Tiedä kuinka luoda tehoste käyttämällä CSS3:a pvmgaragessa.

Coverflow vaikutus

Pääasiassa kirjapohjaisilla verkkosivuilla käytettyä vaikutusta olet varmasti nähnyt Macillasi tai Apple-laitteellasi, kun selaat kuvia. Coverflow-tehoste esittelee useita kohteita – kuten kirjojen kannet –, joissa voit sitten pyyhkäistä joko vasemmalle tai oikealle nähdäksesi kannen, saada joitain ponnahdusikkunoita ja valita ne.

Kuulostaako tämä mielenkiintoiselta? Haluatko toteuttaa tämän projektissa? Jos kyllä, niin selaa ehdottomasti tätä kappaletta.

CSS3-siirtymät

Suunnittelijat, jotka pelaavat mieluummin fiksua kuin kovaa, tietävät, että ei vaadi paljoa lisätäksesi mojoa verkkosivustollesi, vaihda teema tähän, muutama sävy ja varjoelementti sinne ja voit itse muuttaa sivusi. Toinen tapa tehdä se on animoida sivusi sisältö CSS3-siirtymien kautta.

Kirjainvälistä tekstin varjoihin, pelaa ympärillesi ja katso, mikä sopii parhaiten. Tässä on myös loistava ilmaispaketti, joka sisältää kattavan valikoiman siirtymätehosteita.

Lumiteemainen CSS3-animaatio

Oletko edelleen lomakauden jälkivaikutuksessa? Lumiaiheisissa CSS3-animaatioissa ei ole vain juhlavaa tunnelmaa, vaan ne toimivat myös erittäin hyvin tietyillä verkkosivuilla, kuten jäätelöbrändillä.

Se on nopea ja helppokäyttöinen, ja se voi muuttaa verkkosivustosi tai blogisivusi ulkoasua teeman tai vuodenajan mukaan.

Animaatio

Animaatiot voivat tehdä ihmeitä verkkosivustoilla, vaikka ne olisivat hienovaraisia. Se kiinnittää huomion ja auttaa myös konversioissa, koska huomio kohdistuu toimintakehotukseen.

Tai yksinkertaisesti se lisää sivun nimellisarvoa, ellei muuta. Tässä on joitain hienoja erikoisanimaatiotehosteita, joita voit tarkistaa.

Kohopainotehoste

Olet luultavasti nähnyt ne Instagram-lainausviestit, joissa tekstin ulkoasu on poistettu? Tältä Letterpress-efekti näyttää ja siitä on tulossa myös melko suosittu web-suunnittelussa.

Tässä on käänteinen kirjoituskoneella kirjoitettu tunnelma, mutta se näyttää tyylikkäältä ja sileältä. Suosittelen ehdottomasti, jos julkaisusi on verkkojulkaisu tai blogi. Tämä auttaa myös, jos haluat päästä ammattitaidolle ilman, että käytät kaikkea C-suitea. Tässä on opetusohjelma siitä, kuinka voit käyttää kohopainotehostetta CSS3:n kanssa.

Kääntöympyrä

Pieni tieto ei vain koskaan vahingoita ketään, vaan voi myös olla verkkosivuston USP. Sellainen verkkosivusto, joka heittää satunnaisia faktoja jokaisen päivityksen yhteydessä, voitaisiin tehdä eräänlaiseksi galleriaksi, jossa on kuvia, joissa on pieni kahva, jota napsautettuna avautuu hauskoja trivia.

Mutta jopa tavallisilla verkkosivustoilla kääntöympyrällä on suuri merkitys. Se pakkaa tietoa, joten sinulla ei ole tekstiä täynnä olevaa sivua. Ja siinä on myös hieno 3D-tunnelma. Tässä on opetusohjelma kääntöympyrän luomiseen.

Mega Menu

Olet luultavasti nähnyt niitä verkkokauppasivustoilla, joissa monia luokkia on sijoitettava suoraan aloitussivulle, mutta ei luoda tungosta valikkopalkkia.

Mega Menu -vaihtoehto on pakollinen myös koulutusalalle, onko sinulla yliopiston verkkosivusto, joka esittelee kaikki tärkeimmät kurssit, pääsytiedot ja opiskelijoiden tulokset ja paljon muuta?

Mega Menu voi auttaa poistamaan sotkua, luomaan terävämmän ja tyylikkäämmän valikkorivivaihtoehdon eikä hämmentäisi lukijoita napsauttamaan väärää vaihtoehtoa pidempien ja täyteläisempien valikkovaihtoehtojen takia. Voit myös ansaita paljon ansaitsemalla responsiivisen Mega Menun ilmaiseksi.

Harmonikkagalleria

On kaksi tapaa pitää lukijat sitoutuneena sivustoosi, poistaa tehokkaan sisällön ja kiinnittää heidän huomionsa mainittuun tehokkaaseen sisältöön. Staattinen sivu saattaa kiinnittää lukijan katseet, mutta jotain interaktiivista, kuten harmonikkagalleria, kiinnittää lukijan katseet.

Harmonikkagalleriat – valitsitpa sitten esitelläksesi parhaan portfolion kappaleesi tai saada huomiota myydyimmälle tuotteellesi – toimivat aina. Sinulla on vain 6 sekuntia aikaa kiinnittää lukijan huomio ja pitää hänet sivulla. Käytä Harmonikka-galleriaa saadaksesi ja pitääksesi heidän huomionsa verkkosivustollasi paljon pidempään. Tässä on loistava mukautuva Accordion Gallery -laajennus, jonka voit napata ilmaiseksi.

Lightbox

Kuinka tärkeä ruudukkogalleria on? Jos olet valokuvaaja, taiteilija tai yksinkertaisesti bloggaaja, se voi tarkoittaa seuraavaa suurta keikkaasi.

Ristikkogalleria tuo kaikki parhaat palasi suoraan esille! Upea kuva auringonlaskusta kukkulalla tai intensiivinen katumuotokuva, ihastu heitä, kerro sanasta tai houkuttele heidät vain voittamaan sopimus, ruudukkogalleria voisi olla paras ansioluettelosi eteenpäin.

Suunnittelijana tämä on asia, jota sinun ei tulisi ottaa huomioon vain asiakkaasi työssä, vaan myös omassa verkkosivustossasi. Saa työsi menestymään puolestasi ja takaa luovuudestasi, ruudukkogalleria on kullan arvoinen.

Mutta saat sen turhaan tässä sopimuksessa, joten mene nappaamaan se nyt!

Mitä näistä suosittelisit ystävällesi?