Css-hover-tehoste hoverissa. CSS:hover. Alkuperäiset hover-efektit. Kauniita hover-tehostekuvia

Ajatus tiedon esittämisen erottamisesta sitä luovasta ja käsittelevästä koodista on tullut radikaalisti uudeksi. Se oli vahva ratkaisu kerran, mutta tätä kohtaa ei silloin täysin tunnistettu. Kun ohjelmointi erottui yksittäisestä tietokoneesta, mutta ei tullut voittajaksi paikallinen verkko tai yksittäinen aluealue, ja levisi välittömästi kaikkialle, vasta sitten kävi selväksi, että tiedon esittäminen (suunnittelun kannalta) ja sen kanssa työskentely (koodin suhteen) ovat kaksi puolta samalla tasolla.

Verkkosivustojen kehittämisen kolme puolta

Muodollisesti verkkosivuston muodostavat kolme pääkomponenttia (eri syntaktisissa muodoissa): PHP-koodi, JavaScript-koodi ja kuvaukset CSS-tyylejä. Sillä ei ole lainkaan väliä, mitä tämän tai toisen komponentin nimeä tai versiota käytetään, mitä HTML-versio käytetty merkintä ja mikä selaimen versio on asennettu. Yhteensopivuutta ei nykyään arvosteta korkeassa arvossa, koska kullakin ajanhetkellä on olennaista: mitä koodataan ja mitä koodatusta voidaan näyttää ja suorittaa.

Jos aiemmin kielet taistelivat ideoista, nykyään Internet-teknologioiden ja -selaimien standardientekijät taistelevat mieluummin turhaan.

Henkilökohtaista ja julkista

Internetiin pääsee monella tavalla (tietokoneet, kannettavat tietokoneet, tabletit, älypuhelimet), ja myös selaimia on runsaasti. Ei ole takeita siitä, että yksittäinen laite näyttää sivuston siinä muodossa, jossa kehittäjä sen loi. Jälkimmäisten ponnistelut eivät aina saavuta tavoitetta ja tarjoavat web-suunnitteluun yhtä monimuotoisuutta, eli olemuksen yhtenäisyyttä, missä tahansa se paljastetaan kävijälle.

Erottelemalla henkilökohtaisen ja julkisen, käyttämällä vain jälkimmäisessä toimivaa, voit saavuttaa huomattavaa menestystä suunnittelussa. Kauneus, taiteellinen hetki ja web-suunnittelu ovat asiaankuuluvien asiantuntijoiden ja kykyjen kohtaloa. CSS on koodi, vaikkakin hyvin ainutlaatuinen. Hänen huolensa on kuvata tyylejä (vaihtoehdot tiedon esittämiseen). Adventin kanssa mobiililaitteet CSS oli ladattu todellisella koodauksella mediakyselyjen muodossa. Suunnittelun ja koodin uudelleenavioitumisen mahdollisuus ei siis ole niin epärealistinen kuin se saattoi näyttää vielä pari vuotta sitten.

CSS-tyylejä kehittäessään kehittäjä luottaa henkilökohtaiseen, todistettuun kokemukseensa ja niihin CSS-malleihin, jotka toimivat useimmilla selaimilla ja tyydyttävät suurimman osan sivuston vierailijoista. Ensimmäistä tulisi käyttää mahdollisimman paljon ja toista mahdollisimman vähän, niin on paljon suurempi mahdollisuus saada tulos, joka toimii melkein aina ja kaikkialla.

Ensimmäinen sääntö: toivo standardia, mutta älä tee virhettä itse

CSS:hover tarkoittaa, että hiiri "syöttää" sivuelementin. Kun hiiri napsauttaa elementtiä, se aktivoituu, mutta kun osoitin siirtyy sivulle, se voi taas muuttua ja näyttää itsensä aktiivisessa tilassa. ":hover", "active" ja "visited" ovat suosituimpia pseudo-luokkia tyylejä kuvattaessa.

Sivuston koodissa on erittäin kätevää olla huolehtimatta sellaisista pienistä asioista kuin hiiren siirtäminen elementtien päälle. Antamalla kaksi kuvausta tyylin kuvaustaulukossa:

taustaväri: vihreä;

Saamme sen, kun siirrät hiiren elementin päälle automaattinen muutos tekstin värittäminen mustasta valkoiseksi ja tämän elementin taustan muuttaminen vihreäksi. Pseudo-luokkia voidaan soveltaa mihin tahansa elementtiin ja niillä voidaan saavuttaa laaja valikoima visuaalisia tehosteita.

Toinen sääntö: kun luotat standardeihin, keskity koodiisi

Kaikki olisi hyvin, jos edistyminen pysyisi hiirillä varustettujen tietokoneiden ja kannettavien tietokoneiden tasolla ja edistyisi sisään matkapuhelinviestintä ei johtanut älypuhelimien, tablettien ja muiden mobiililaitteiden syntymiseen, joihin tällaisen laitteen yhdistäminen on erittäin ongelmallista.

Toisaalta vain erityisellä kosketusnäytöllä varustetuissa laitteissa on mahdollista käsitellä sormia suoraan kosketusnäyttö, kuten on jo yleistynyt älypuhelimissa, tableteissa ja vastaavissa laitteissa.

Siinä on merkittävä ero, ja:hover ei toimi ollenkaan niin kuin haluaisimme. Et voi tehdä tätä ilman koodia, ja mediakyselyjen käyttäminen ei ratkaise kaikkia ongelmia.

Yhteensopivuus on nykyään liian kallista tiedon maailma, joten jotta varmistetaan sivuston asianmukainen toimivuus web-suunnittelulle ja toiminnallisuuden toteuttamiselle asetettujen vaatimusten mukaisesti, on suositeltavaa keskittyä vähimmäisvaatimuksiin: CSS hover, CSS keskitä tarkennus, CSS-hover aktiivinen (vierailtu). Mitä enemmän koodia (sekä selaimessa että palvelimella) ohjaa verkkosuunnittelua, sitä parempi. Ohjelma on ohjaus, on parempi, kun tätä ohjausta ei viljellä nykyiset standardit, jolta et usein tiedä mitä odottaa.

Painikkeet ja muut sivuelementit

Painike vie hiiri CSS:ään- Loistava ratkaisu, mutta suurelta osin jokainen sivuelementti on "painike". Sivuston on ensinnäkin oltava elossa, ja jos tämä ei sisälly koodiin, jos tehtävänä on luoda sivusto, joka kehittyy sovellusalueelle sopivasti ja toimii vierailijan käyttäytymisen huomioon ottaen, niin ainakin CSS-tyyleillä voit lisätä sivuelementteihin eloisuutta.

Hover-tehosteiden käyttö on kätevää. Niiden avulla voit helposti lisätä elämää sivuille, mutta koodi ei tiedä mitä hiiri tekee näytöllä, jos sillä ei ole kykyä seurata sen liikettä. Tästä näkökulmasta, eli kun koodi ohjaa hiiren liikettä (= sormen liike älypuhelimessa), se voi itsenäisesti korostaa elementin tai muuttaa sen. Tällä ei ole mitään tekemistä pseudo-luokkien kanssa, mutta se antaa täysi hallinta sivun ulkoasun yläpuolella oleva koodi, jonka avulla voit näyttää sen riittävästi erilaisia laitteita eri selaimissa.

Sudenkuoppia tyylisivuissa

On mahdotonta sanoa, että standardit CSS-tyylien kuvaamisen alalla eivät tiedä mitä he tekevät, mutta on myös mahdotonta sanoa, että ne ovat täysin vuorovaikutuksessa muiden Internet-ohjelmoinnin alan standardien kanssa.

Tyylit ja pseudo-luokat voidaan kuvata sivun koodausvaiheessa, sillä hetkellä, kun palvelin luo sivun ja dynamiikassa: jo selaimen sisällä voit luoda helposti uusi tyyli ja muuttaa nykyistä.

Käyttämällä AJAXia, kun sivua ei tarvitse luoda uudelleen näyttääkseen reaktion vierailijan toimintaan, vaan sen elementin tai useiden elementtien vaihtaminen lisää hieman "maustetta". Koodien "ystävyys" - mikä on jo selaimessa (JavaScript) ja mikä on palvelimella (PHP) - on sivuston tekijän (ohjelmoijan) osa.

Ei vain sen elementtien näyttäminen sivulla, vaan myös niiden myöhempi havaitseminen koodilla riippuu merkittävästi siitä, kuinka tämän vuorovaikutuksen algoritmi suoritetaan. Yksinkertaisesti sanottuna pseudo-luokat (erityisesti) ovat erittäin hyviä staattisiin olosuhteisiin, tavallaan kuin purjeveneelle kirkkaalla merellä kevyt tuuli- Kaikki on ilmeistä, saatavilla ja hallittavissa. Jos sää muuttuu, tuuli voimistuu tai vierailija aiheuttaa hätätilan, voit nopeasti osua riutalle ja menettää vierailijan.

Standardi ja sen emulointi

Hover voidaan emuloida JavaScriptin kautta käyttämällä onmouseover- ja onmouseout-tapahtumia. Usein tähän kaikki päättyy. Terveen järjen näkökulmasta kun me puhumme Kun tulee luomaan todella toimiva verkkosivusto, on parempi pitää hallinta omissa käsissäsi kuin jättää se myyttisten standardien armoille, jotka muuttuvat kehittäjän tahdon ja halun ulkopuolella.

Joskus voit lukea jotain kuten " Tämä mahdollisuus on saatavilla jopa IE:ssä”, mutta useammin voit lukea, mitkä tyylikuvaukset tietyssä selaimessa havaitsevat. Paljon harvemmin voit oppia, miten JavaScript eroaa tietyissä selaimissa.

Kertyneen kokemuksen arvioiminen, Chromen ja Operan ominaisuuksien ihailu, selaimen hitauden ja hitauden kritisoiminen valmistajalta (unohtumaton IE-ohjelmoija Microsoftilta, jokaisen ohjelmoijan sydämelle rakas: "Vanha kunnon Internet Explorer Vain laiska ei moittinut. Tai joku, joka osaa vain pelata Klondikea tietokoneella.- lainaus tuntemattomalta Internet-kirjailijalta), kannattaa pitää kiinni kultaisesta keskikohdasta: käytä sitä, mikä toimii kaikkialla ja aina.

Ihmiset tarvitsevat rahaa työhön, kun he tarvitsevat jännitystä, he menevät yleensä maistraatille tai teatteriin, mutta eivät Internetiin.

Emulointi ja ohjaus

Aikaisemmin ohjelmoinnin noustessa jaloilleen oli tapana kuunnella vanhimpia ja kirjoittaa oikein. Nykyään vanhimpia on liikaa, kaikki muuttuu liian nopeasti, ja jos kuuntelee kaikkia, aika ei riitä edes kovin yksinkertainen työ, mahdollisimman vähän toimivalle verkkosivustolle.

Ohjelmointi on ennen kaikkea ohjausta, ja niissä tapauksissa, joissa standardi asettaa säännöt puolueellisesti tai säännössä on odotettavissa jyrkkä muutos, sen poistaminen ja uuden syntyminen, paras ratkaisu Aina ei ollut tehdä päätöksiä, vaan toteuttaa sivustolta vaadittu toiminnallisuus mahdollisimman pienellä, mutta todella toimivalla koodilla.

Ensinnäkin niille, jotka eivät ole vielä täysin perehtyneet aiheeseen tai eivät ollenkaan aiheeseen, selitän lyhyesti, mitä se on. Tämä erilaisia tehosteet (ponnahdusikkunat, työkaluvihjeet, sujuvat siirtymät, muunnos, kierto, suurennos, siirto jne.) sovelletaan verkkosivuston elementteihin hiiren kursorilla. Nämä voidaan toteuttaa joko käyttämällä erilaisia jQuery-laajennuksia tai puhtaana .
Tänään olen valmistellut suuren valikoiman alkuperäisiä hover-tehosteita kuviin, joilla on luotu CSS:n avulla 3, yhdistämättä JavaScript-kirjastoja. En puhu hover-tehosteiden toteuttamisen eduista ja haitoista puhtaassa CSS3:ssa, se on toinen aihe, katso vain esimerkkejä ja käytä tarvittaessa verkkosivustollasi haluamaasi. Kaikki katsauksessa esitetyt tehosteet toimitetaan demoesimerkin ja yksityiskohtaisen dokumentaation kanssa lähdekoodeilla. Oppaat ovat enimmäkseen porvarillista kieltä, mutta kaikki on enemmän tai vähemmän intuitiivista.

Haluan välittömästi kiinnittää huomiosi siihen, että kaikki nämä esimerkit toimivat oikein vain nykyaikaiset selaimet, jotka tukevat CSS3-ominaisuuksia.

Jotta kokonaiskuvaa ei pilata, en vääristänyt tehosteiden nimiä konekäännöksellä (joitakin lukuun ottamatta), jätin alkuperäiset nimikkeet kehittäjän nimeksi.

Erittäin mielenkiintoinen tehoste, kun viet hiiren osoitinta pikkukuvien päällä käyttämällä hienoja viivoja suunnittelussa ja typografiassa. Useita erityyppisiä tehosteita kuvien kuvatekstien, pehmeiden ja ei-tunkeilevien 3D-muunnosten ja pseudoelementtien sulavien siirtymien näyttämiseen. Toimii vain nykyaikaisissa selaimissa.

iHover on vaikuttava kokoelma puhtaita CSS3-hover-tehosteita, joissa on sisäänrakennettu Bootstrap 3 -tuki Scss CSS(tiedosto), jota on helppo muokata muuttujilla. Koodi on modulaarinen, koko tiedostoa ei tarvitse sisällyttää. Yli 30 erilaista tehostetta yhdessä paketissa. Kaikki on melko hyvin dokumentoitu ja tehosteet ovat erittäin helppokäyttöisiä. Sinun tarvitsee vain rakentaa HTML-merkintä oikein ja muodostaa yhteys CSS-tiedosto työskennellä.

Luo yksinkertaisia mutta tyylikkäitä hover-tehosteita kuvien kuvateksteihin. Ajatuksena on viedä hiiri pikkukuvien päälle, jolloin otsikko, tekijän nimi ja yhteystiedot tulevat näkyviin. Joissakin tehosteissa käytetään 3D-visuaalisia muunnoksia.

Hyvin yksinkertainen siirtymäefekti, ilman erityisiä kelloja ja pillejä, täysin pyöreä kuva kehyksessä, muuttuu vaihtamalla tarkennusta leijuttaessa ja siinä se.

Vie hiiritehosteet pikkukuville CSS3:lla

Kehittäjä sijoittaa työnsä esimerkkinä kuvagalleriasta, jossa on siirtymätehosteita, kun pikkukuviin ilmestyy huomautuksia (tekstit). Nykyaikaiset selaimet, mukaan lukien IE 9+, tukevat luotettavasti. Koko galleria Tietysti sitä on vaikea kutsua, mutta allekirjoitusten esiintymisen vaikutus on varsin mielenkiintoinen.

Seuraava setti CSS-säännöt, luodaksesi vaikuttavia muunnostehosteita, kun viet hiiren täysin pyöreiden pikkukuvien päällä. Paketti sisältää 7 tyyppiä CSS3-siirtymiä, erittäin yksityiskohtaista dokumentaatiota konfiguroinnista ja käytöstä. Kaikki nykyaikaiset selaimet tukevat tehosteita.

Pyörivät pikkukuvat osoitin päällä

Yksinkertainen vaikutus pyörivien pyöreiden pikkukuvien pyörittämisestä, kun siirrät hiiren osoittimen niiden päälle, suunnilleen saman voit nähdä blogissani, pääsivun viestien ilmoituksissa. Toteutettu parilla rivillä css-koodia.

Käännetty kirjaimellisesti: "Seksuaalinen vaikutus, kun leijuu yli". Tietenkin et todennäköisesti huomaa mitään niin seksikästä tässä efektissä, ellei sinulla ole villiä mielikuvitusta, mutta vaikutus on omalla tavallaan mielenkiintoinen ja siihen kannattaa kiinnittää huomiota.

Viisi erilaista tehostetta kuville, kun vie hiiri niiden päälle. Pop-up-allekirjoitukset kolmessa muunnelmassa, verhot läpinäkyvyysasteen muuttamisen ja pyörimisen muodossa vaakasuuntaisella liikkeellä.

4 Animaatiotehosteiden tyypit kuvien kuvateksteille, toteutettu yksinomaan CSS3:lla. Eri asennot ilmestyessään ja siirtymäefektit, melko vakiomuotoilu. Jos haluat ymmärtää, kuinka animaatio toimii, katso lähde En löytänyt esittelysivuja tai erillisiä asiakirjoja.

Pienoiskokoiset galleriat, jotka on järjestetty ruudukkoon erilaisilla tehosteilla allekirjoitusten, pyörimisen, kehityksen, ponnahdusikkunoiden jne. Käyttö- ja konfigurointidokumentaatio on melko niukkaa, mutta jos todella haluat, voit selvittää sen.

Tämä tehoste ei ole mikään erikoinen, banaali muutos kuvien kirkkaudessa leijuttaessa, paitsi että animaatioelementtejä on lisätty. Sinun on selvitettävä toteutuksen yksityiskohdat itse laatimalla demon lähdekoodi.

Toinen sarja 10 hover-tehostetta kuville, erilaiset pikkukuvien muokkaukset leijuttaessa, suurennus, kierto, kierto, himmennys jne.

Erilaiset kehysanimaatiotehosteet kuvien ympärillä näyttävät varsin houkuttelevilta, niiden asettamiseen ja käyttöön on olemassa yksityiskohtainen opas.

Alkuperäiset hover-efektit CSS3:ssa, jota käytetään kuvien pikkukuvatekstien tehokkaaseen näyttämiseen hiirellä. CSS-sääntösarja sisältää 10 erilaista tehostetta, joita voit käyttää yksitellen erilaisia kuvia. Tehosteet ovat todella vaikuttavia, varsinkin kun otetaan huomioon, että kaikki tehtiin CSS3:lla. Yksityiskohtainen opas, auttaa sinua selvittämään, mikä on mitä.

Ajatuksena on luoda SVG, joka on taustamuoto jollekin tekstille ja muuttuu toiseksi muodoksi vietäessä hiiren osoitinta. Tällä tavalla voit tehdä monia erilaisia vaihtoehtoja, esimerkissä näytetään kolmen tyyppisiä siirtymätehosteita. Arvokkuus käyttäen SVG:tä on, että voimme muuttaa lomakkeen kokoa vastaamaan ylätason säilön kokoa.

Liukuvat kuvat

Tämän tehosteen ydin on, että kuva liikkuu ylös ja alas saadakseen kuvatekstin näkyviin. Jos työskentelet tyyliparametrien kanssa, uskon, että voit saavuttaa melko mukavia tehosteita, mutta oletusarvoisesti kaikki näyttää hyvin yksinkertaiselta.

Tällä tehosteella kaikki on yksinkertaista, kuvien tekstitykset liukuvat ulos oikeasta yläkulmasta tai vasemmasta alareunasta läpikuultavan nauhan muodossa tumma tausta, kaikki on hyvin yksinkertaisesti muotoiltu uudelleen css-ominaisuuksien avulla.

Mielenkiintoinen ratkaisu: pikkukuvat esitetään tummennetussa muodossa, kun siirrät hiiren niiden päälle, kuvat tulevat näkyviin ja allekirjoitus ponnahtaa esiin vaalealla taustalla.

Kuvan kuvateksti näkyy kulmasta ja laajenee vinosti koko kuvan alueelle.

Useita Vielä mielenkiintoisia ratkaisuja ottaa käyttöön ponnahdusikkunoiden kuvatekstit kuvien pikkukuville. Online-editorissa voit kokeilla parametreja ja saavuttaa vaikuttavampia tuloksia.

Pakki kauniita tehosteita kun viet hiiren pikkukuvien päälle, kuvien erilaiset ulkoasut ja kuvatekstit. Ohuet viivat vastakohtana hieman tummennetulle taustalle luovat helposti luettavia tietolohkoja.

Outoja muotoja ja suurentava vaikutus yhdistettynä animaatioefekti kuvien pikkukuvien kuvatekstit.

Upeat vaikutukset päällekkäisten kuvakkeiden kuvien pikkukuvien eri muunnelmissa ulkoasu. Esimerkissä käytetään (+)-symbolia, joka on piirretty ympyrään käyttämällä border-radius:a: CSS:ssä voit myös käyttää kuvakefontteja, jotta ponnahduspaneelista tulee informatiivisempi.

Esimerkki visuaalisen diatehosteen luomisesta kuvien 3D-tekstitysten näyttämiseen käyttämällä vain CSS3:a ja HTML5:tä.

6 kuvatekstit kuville

6 Vaihtoehtoja ponnahdusikkunoiden kuvatekstien näyttämiseksi hiirellä CSS3:lla. Yksityiskohtainen oppitunti toteutuksesta ja määrityksestä, ladattavat lähteet.

Ja lopuksi, en voi olla mainitsematta yksinkertaisinta tapaa luoda ponnahdusikkunan kuvateksti pikkukuvalle CSS3:n avulla.

Puhuin tästä menetelmästä yhdellä edellisellä oppitunnillani:.

Kaikella kunnioituksella, Andrew

Ensinnäkin niille, jotka eivät ole vielä täysin perehtyneet aiheeseen tai eivät ollenkaan aiheeseen, selitän lyhyesti, mitä se on. Nämä ovat erityyppisiä tehosteita (ponnahdustekstit, työkaluvihjeet, sujuvat siirtymät, muunnos, kierto, suurennus, siirto jne.), joita käytetään verkkosivuston elementteihin, kun viet hiiren osoitinta niiden päälle. Nämä tehosteet voidaan toteuttaa käyttämällä erilaisia jQuery-laajennuksia tai pure .
Tänään olen valmistellut suuren valikoiman alkuperäisiä hover-tehosteita kuville, jotka on luotu CSS3:lla ilman JavaScript-kirjastojen yhdistämistä. En puhu hover-tehosteiden toteuttamisen eduista ja haitoista puhtaassa CSS3:ssa, se on toinen aihe, katso vain esimerkkejä ja käytä tarvittaessa verkkosivustollasi haluamaasi. Kaikki katsauksessa esitetyt tehosteet toimitetaan demoesimerkin ja yksityiskohtaisen dokumentaation kanssa lähdekoodeilla. Oppaat ovat enimmäkseen porvarillista kieltä, mutta kaikki on enemmän tai vähemmän intuitiivista.

Haluan välittömästi kiinnittää huomiosi siihen, että kaikki nämä esimerkit toimivat oikein vain nykyaikaisissa selaimissa, jotka tukevat CSS3-ominaisuuksia.

Jotta kokonaiskuvaa ei pilata, en vääristänyt tehosteiden nimiä konekäännöksellä (joitakin lukuun ottamatta), jätin alkuperäiset nimikkeet kehittäjän nimeksi.

iHover on vaikuttava kokoelma puhtaita CSS3-hover-tehosteita, joissa on Bootstrap 3 -tuki, joka on rakennettu Scss CSS:lle (tiedosto), jota on helppo muokata muuttujilla. Koodi on modulaarinen, koko tiedostoa ei tarvitse sisällyttää. Yli 30 erilaista tehostetta yhdessä paketissa. Kaikki on melko hyvin dokumentoitu ja tehosteet ovat erittäin helppokäyttöisiä. Sinun tarvitsee vain rakentaa HTML-merkintä oikein ja sisällyttää CSS-tiedosto työhösi.

Hyvin yksinkertainen siirtymäefekti, ilman erityisiä kelloja ja pillejä, täysin pyöreä kuva kehyksessä, muuttuu vaihtamalla tarkennusta leijuttaessa ja siinä se.

Vie hiiritehosteet pikkukuville CSS3:lla

Kehittäjä sijoittaa työnsä esimerkkinä kuvagalleriasta, jossa on siirtymätehosteita, kun pikkukuviin ilmestyy huomautuksia (tekstit). Nykyaikaiset selaimet, mukaan lukien IE 9+, tukevat luotettavasti. Tietysti sitä on vaikea kutsua täysimittaiseksi galleriaksi, mutta allekirjoitusten esiintymisen vaikutus on varsin mielenkiintoinen.

Toinen joukko CSS-sääntöjä, jotka luovat vaikuttavia muunnostehosteita, kun osoitinta pidetään täydellisen pyöreiden pikkukuvien päällä. Paketti sisältää 7 tyyppiä CSS3-siirtymiä, erittäin yksityiskohtaista dokumentaatiota konfiguroinnista ja käytöstä. Kaikki nykyaikaiset selaimet tukevat tehosteita.

Pyörivät pikkukuvat osoitin päällä

Kääntääksesi sen kirjaimellisesti: "Seksuaalinen vaikutus vietäessä hiiri päälle". Tietenkin et tuskin huomaa tässä efektissä mitään niin seksikästä, ellei sinulla ole villiä mielikuvitusta, mutta vaikutus on omalla tavallaan mielenkiintoinen ja siihen kannattaa kiinnittää huomiota.

4 Animaatiotehosteiden tyypit kuvien kuvateksteille, toteutettu yksinomaan CSS3:lla. Eri asennot ilmestyessään ja siirtymäefektit, melko vakiomuotoilu. Ymmärtääksesi kuinka animaatio toimii, katso esittelysivun lähdekoodia, en löytänyt mitään erillistä dokumentaatiota.

Toinen sarja 10 hover-tehostetta kuville, erilaiset pikkukuvien muokkaukset leijuttaessa, suurennus, kierto, kierto, himmennys jne.

Erilaiset kehysanimaatiotehosteet kuvien ympärillä näyttävät varsin houkuttelevilta, niiden asettamiseen ja käyttöön on olemassa yksityiskohtainen opas.

Alkuperäisiä CSS3-hover-tehosteita, joita käytetään kuvien pikkukuvatekstien tehokkaaseen ulkoasuun, kun osoitinta vietetään. CSS-sääntösarja sisältää 10 erilaista tehostetta, joita voit käyttää erikseen eri kuville. Tehosteet ovat todella vaikuttavia, varsinkin kun otetaan huomioon, että kaikki tehtiin CSS3:lla. Yksityiskohtainen opas auttaa sinua selvittämään, mikä on mitä.

Ajatuksena on luoda SVG, joka on taustamuoto jollekin tekstille ja muuttuu toiseksi muodoksi vietäessä hiiren osoitinta. Tällä tavalla voit tehdä useita eri vaihtoehtoja esimerkissä näytetään kolmen tyyppisiä siirtymätehosteita. SVG:n käytön etuna on, että voimme muuttaa lomakkeen kokoa pääsäilön koon mukaan.

Liukuvat kuvat

Tällä tehosteella kaikki on yksinkertaista, kuvien kuvatekstit liukuvat ulos oikeasta yläkulmasta tai vasemmasta alakulmasta nauhan muodossa, jossa on läpikuultava tumma tausta, kaikki on hyvin yksinkertaisesti muotoiltu uudelleen css-ominaisuuksien avulla.

Mielenkiintoinen ratkaisu: pikkukuvat esitetään tummennetussa muodossa, kun siirrät hiiren niiden päälle, kuvat tulevat näkyviin ja allekirjoitus ponnahtaa esiin vaalealla taustalla.

Kuvan kuvateksti näkyy kulmasta ja laajenee vinosti koko kuvan alueelle.

Muutamia mielenkiintoisempia ratkaisuja ponnahdusikkunoiden kuvatekstien toteuttamiseen kuvien pikkukuvissa. Online-editorissa voit kokeilla parametreja ja saavuttaa vaikuttavampia tuloksia.

Joukko kauniita tehosteita vietäessä hiiren osoitinta pikkukuvien päällä, erilaisia ulkoasuja ja kuvien kuvatekstien suunnittelua. Ohuet viivat vastakohtana hieman tummennetulle taustalle luovat helposti luettavia tietolohkoja.

Outoja muotoja ja suurennustehoste yhdistettynä kuvien pikkukuvien kuvatekstien animoituun vaikutukseen.

Esimerkki visuaalisen diatehosteen luomisesta kuvien 3D-tekstitysten näyttämiseen käyttämällä vain CSS3:a ja HTML5:tä.

6 kuvatekstit kuville

6 Vaihtoehtoja ponnahdusikkunoiden kuvatekstien näyttämiseksi hiirellä CSS3:lla. Yksityiskohtainen oppitunti toteutuksesta ja määrityksestä, ladattavat lähteet.

Ja lopuksi, en voi olla mainitsematta yksinkertaisinta tapaa luoda ponnahdusikkunan kuvateksti pikkukuvalle CSS3:n avulla.

Tasainen siirtyminen yksivärisestä värilliseen osoitinta jQueryn avulla.

3. Hover-tehoste CSS:n ja jQueryn avulla

Valokuvien korvaamisen vaikutus, kun hiiren osoitinta pidetään. Valokuvat esitetään spriteinä (useita kuvia yhdistettynä yhdeksi).

4. Animoitu hover-tehoste

jQuery-tehoste: Elementti on himmennetty, kunnes hiiren osoitin siirretään sen päälle. Mahtava keino kiinnittää vierailijan huomion johonkin sivulla olevaan elementtiin.

5. Vaihda kuvaa hiiren osoitin jQuerylla

Erittäin mielenkiintoinen efekti. Kun pidät hiiren osoitinta, kuvat muuttuvat. Kun napsautat hiirtä, kaikki kuvat muuttuvat samanaikaisesti.

6. CSS-animoitu hover-tehoste

Vaihda kuvia hiirellä. Vaikutus ei tue IE:tä.

7. Hover Effect CSS Spriten ja jQueryn avulla

Kuvan tummennuksen vaikutus, kun hiiren osoitinta viedään sen päälle. CSS-spriitejä käytetään efektin toteuttamiseen.

8. jQuery-laajennus "jQueryZoom"

Tällä laajennuksella voit lisätä kuvan zoomaustehosteen osoitinta tai lisätä siihen peittokuvan. Plugin on helppo muokata tarpeidesi mukaan.

9. Vaihda kuvia osoitin

Vaihda kuvia viemällä hiiren osoitinta. Tälle jQuery-laajennukselle on helppo löytää käyttöä verkkokaupoista ja luetteloista.

10. Tasaisen värinmuutoksen jQuery-vaikutus leijuttaessa

Kun siirrät hiiren kohteen päälle, voit muuttaa sivun tietyn osan värejä.

11. jQuery-laajennus "Hover Image Zoom"

Suurentaa kuvaa, kun osoitinta pidetään. Läheisyysvaikutus.

12. jQuery hover -animaatio

Voidaan käyttää navigoinnin toteuttamiseen. Animaatiotehoste kahdessa versiossa: varjolla ja heijastuksella.

13. jQuery-hover-tehoste "Images Hover Cycle -tehoste"

Hover-tehosteet antavat kaikille sivustoille dynaamisen ja eloisan ilmeen. Yleensä niitä käytetään JavaScript-koodi, mutta CSS3:n myötä voit jo käyttää vain muotoilutyökaluja.

Annettu sisään tätä materiaalia tehosteet toimivat nykyaikaisissa selaimissa. IE-tuki on versiosta riippuvainen ja se on testattava perusteellisesti ennen kuin sitä käytetään todellisessa projektissa.

Nykiminen ylös

Tämä tehoste toimii hyvin, kun sinulla on useita vaakasuoraan kohdistettuja elementtejä. Hiiren osoittimen siirtäminen tällaista viivainta pitkin luo aallon.

Se on erittäin helppo tehdä. Jokaiselle elementille määritetään kenttä, ja kun viet hiiren osoitinta, kentän koko pienenee. Alkuarvo Marginaali on 15 pikseliä, se pienennetään 2 kuvapisteeseen, mikä saa kuvan "pomppaamaan ylös". Tätä tehostetta voidaan käyttää myös luettelon tekstissä.

Siirtymäominaisuutta käytetään tässä lisäyksenä, koska efekti näyttää hyvältä ilman sitä. Se antaa tasaisen vaikutuksen.

CSS

Ex1 img(reunus: 5px kiinteä #ccc; float: vasen; marginaali: 15px; -webkit-siirtymä: marginaali 0,5 s helpotus; -moz-siirtymä: marginaali 0,5 s helpotus; -o-siirtymä: marginaali 0,5 s help-out; .ex1 img:hover ( margin-top: 2px; )

Kun viet hiiren osoittimen kunkin kuvan päälle, sen koko kasvaa hitaasti, ja kun tarkennus häviää, se palaa alkuperäiseen kokoonsa.

Tätä tehostetta varten käytetään kuvasarjaa, jonka koko on 400x133 px. Niiden kokoa pienennetään sitten CSS-koodissa 300 x 100 pikseliksi ja laajennetaan hiiren osoitinta siirtäessä. Vaakakeskitystä käytetään, ja kuvan kokoa muutettu saattaa pilata kaiken, joten negatiivinen marginaaliarvo on puolet leveydestä.

CSS

#container (leveys: 300px; marginaali: 0 automaattinen; ) #ex2 img( korkeus: 100px; leveys: 300px; margin: 15px 0; -webkit-siirtymä: kaikki 1s helppous; -moz-siirtymä: kaikki 1s helppous; -o -siirtyminen: kaikki 1s helppous ) #ex2 img:hover ( korkeus: 133px; leveys: 400px; margin-vasen: -50px; )

Tämä vaikutus on hyvin samanlainen JavaScriptin avulla, kun siirrät hiiren yhden kohteen päälle, toinen tulee näkyviin. Tämän saavuttamiseksi kuva ja teksti sijoitetaan samaan div-säiliöön ja sitten kaikki siirretään vasemmalle niin, että molemmat elementit ovat samalla tasolla. Sitten käytämme ominaisuuksia väri: läpinäkyvä Ja rivin korkeus: 0px varten div-elementti. Tämä sijoittaa tekstin div-osan yläosaan ja piilottaa sen.

Tekstin saaminen näkyviin hiiren osoitinta muuttamalla vain väriä ja rivin korkeutta. Tämä luo skaalatun tekstin ilmentymisen vaikutuksen.

CSS

#ex3 (leveys: 730px; korkeus: 133px; rivin korkeus: 0px; väri: läpinäkyvä; fonttikoko: 50px; fonttiperhe: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, tekstimuunnos: isot kirjaimet -webkit-siirtymä: kaikki 0,5 s helppous: ex3: hover: #575858; img( float: left; margin: 0 15px; )

Tämä on yksi yksinkertaisimmista, mutta erittäin mielenkiintoisia tehosteita pikkukuvagalleriaa varten. Se perustuu kuvien joukon luomiseen ja kuvan pyörittämiseen, jonka päällä hiiren kohdistin sijaitsee.

Tätä vaikutusta varten monia uusia, erityisiä tietty selain CSS-ominaisuudet, joten käyttö vanhemmissa selaimissa ei toimi. Galleria käyttää varjoja, siirtymiä ja muunnoksia.

Jos haluat monipuolistaa tehostetta entisestään, voit käyttää pseudovalitsimia kuvien kiertämiseen eri kulmissa ja eri suuntiin.

CSS

#esimerkki moz-box-shadow: 4px 4px rgba(0,0,0,0.2): 4px 4px rgba(0,0,0,0.2); -moz-transition: kaikki 0,5s helppous; -o-siirtyminen: kaikki 0,5s helppo o-muunnos: pyöritä (-7 astetta)

Tämä on upea ja monimutkainen vaikutus. Aluksi kuvissa on hieman läpinäkyvyyttä. Sitten kun hiiren osoitin vie sen päälle, läpinäkyvyys poistetaan kokonaan, sen ympärille tulee hehku ja heijastus (vain Webkit-selaimet).

CSS

#ex5 (leveys: 700px; marginaali: 0 automaattinen; min-korkeus: 300px; ) #ex5 img (marginaali: 25px; peittävyys: 0,8; reunus: 10px kiinteä #eee; /*Transformation*/ -webkit-siirtymä: kaikki 0,5 s helppous: kaikki 0.5s helppous -o-transition: kaikki 0.5s helpot vasen alaosa, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); ) #ex5 img:hover ( opasiteetti: 1; /*Reflection*/ -webkit-box-reflect: alle 0px -webkit-gradient(lineaarinen, vasen ylhäällä, vasen alhaalla, from(transparent), color-stop(.7, läpinäkyvä), to(rgba(0,0,0,0,4))); /*Glow*/ -webkit-box-shadow: 0px 0px rgba(255,255,0,8); : 0px 0px 20px rgba(255,255,255,0,8);

Johtopäätös

Näytetyt viisi tehostetta ovat vain pieni esimerkki mitä voit tehdä CSS:llä. Älä pelkää kokeilla. Yhdistelemällä keskenään yksinkertaisia elementtejä voit saada vaikuttavia tuloksia.