Epäilemättä yksi kirkkaimmista trendit 2012 kehitys on käynnissä CCS3, HTML5. Tänään tarjoamme laajan ja erittäin hyödyllisen yleiskatsauksen esimerkeistä " 20+: luovia ja hyödyllisiä oppitunteja CSS3:sta" tarjotaan päälle SpeckyBoy. Kaikki esimerkit on tehty puhdistaa ilman JavaScriptiä, esitetyt oppitunnit sisältävät demoja ja valmiit tiedostot CSS3 ladattavaksi.

Olemme varmoja, että näistä tekniikoista on hyötyä web-kehittäjille!

css3 oppitunnit :

1. CSS3-valokuvagalleriat, liukusäätimet, tehosteet kuvilla

1.1. CSS3:n liukusäädin

En voi uskoa sitä, mutta tämä liukusäädin erilaisilla tehosteilla on tehty yksinomaan CSS3:ssa, erittäin vaikuttava.

1.2. Tausta koko näytön verkkosivustolle liukusäätimellä CSS3:lla

Web-suunnittelijat ovat kokeilleet erilaisia ​​taustoja sivustolle pitkään, mutta tähän asti puhtaalla CSS:llä ei saatu aikaiseksi, vaan oli käytettävä JS:ää. Nyt CSS3 antaa sinulle mahdollisuuden tehdä sivustosi taustaa haluamallasi tavalla - sinulla voi olla yksi tausta, jossa on suuri, laadukas valokuva, voit vaihtaa useita taustoja erilaisilla tehosteilla ja tausta on skaalautuva näytöstä riippuen parametrit. Yleensä loistava tilaisuus luoville sivustoille.

1.3. Lightbox CSS3:lla

Tämän opetusohjelman avulla voit oppia luomaan Lightboxin erilaisilla tehosteilla puhtaan CSS:n avulla.

1.4. Kuvan ominaisuudet CSS3:ssa

Tämä opetusohjelma esittelee CSS3:n uusia ominaisuuksia kuvan ominaisuuksille, kuten pyöristetyt kulmat, varjot ja muut tehosteet.

1.5. Animoitu banneri CSS3:lla

1.6. Ladataan paneelia CSS3:ssa

1.7. 3D-nauha CSS3:lla

Katso demo tai lataa CSS3-kooditiedostoja →

2. CSS3-valikot, navigointi ja painikkeet

2.1. Apple.com-valikko CSS3:ssa

Opastus kuuluisan Apple.com-valikon luomiseen CSS3:ssa.

2.2. Animoitu vaakasuuntainen valikko CSS3:ssa

Yksinkertainen opetusohjelma, joka näyttää kuinka luoda animoitu valikko CSS3:ssa erilaisilla tehosteilla.

2.3. Animoitu pystysuora valikko CSS3:lla

2.4. Animoidut painikkeet CSS3:lla

Upea opetusohjelma, jossa on 7 esimerkkiä animoiduista luovista painikkeista.

2.5. Luova animoitu valikko kuvilla CSS3:lla

Tällä oppitunnilla esitetyt 10 esimerkkiä ovat yksinkertaisesti silmiä avaavia. Tällaisia ​​monimutkaisia ​​luovia valikoita luotiin aiemmin yksinomaan JS:llä. Vaikuttava!

2.6. Circle Navigation Effect CSS3:lla

Epätavallinen efekti vietäessä hiiren osoitin valitun navigointikohteen päälle ympyrän muodossa, jossa on kuva. Ota huomioon!

2.7. CSS3:n avattava valikko

Opastus yksinkertaisen alatasojen sisältävän pudotusvalikon toteuttamiseksi CSS3:ssa.

2.8. CSS3-navigointi animoiduilla siirtymillä

3. Erilaisia ​​tehosteita CSS3:ssa

3.1. Animoitu työkaluvinkki CSS3:ssa ilman jQueryä

Verkkoteknologioiden ja nykyaikaisten selainten kehityksen ansiosta voimme luoda monia tehosteita ilman Javascriptiä. Tämä on helpottanut verkkokehittäjien elämää huomattavasti. Koska nyt voimme luoda tehosteita puhtaalla CSS:llä ilman Javascriptiä. Siksi tässä artikkelissa haluan kertoa sinulle, onko mahdollista luoda bannereita puhtaalla CSS:llä, mitä tähän tarvitaan, sekä tämän lähestymistavan eduista ja haitoista.

CSS3 tarjoaa laajan valikoiman mahdollisuuksia, sinun tarvitsee vain käyttää niitä oikein. Esimerkkinä haluaisin tarjota linkkejä aikaisempiin töihini "Hahmot Pure CSS:ssä":

Ensinnäkin haluan antaa esimerkkejä CSS-bannereistani. Olet ehkä jo nähnyt ne sivustolla, mutta et edes tiennyt mitä ja miten ne on luotu.

Tietoja demosta: Jokaisen esimerkin (bannerin) alareunassa on kesto sekunneissa sekä "Päivitä"-painike, joka aloittaa bannerin näyttämisen alusta.

Banneri #1 — "Yksittäinen koulutus verkkosivujen rakentamiseen":

Tein tätä banneria noin 2 päivää. Miksi niin kauan? Koska bannerin mukauttaminen (kuminen) kesti jonkin aikaa koordinaatteja laskettaessa. Tällä hetkellä sen koko riippuu ylälohkon leveydestä (joka sisältää itse CSS-bannerin).

Tein tämän bannerin kirjaimellisesti 2-2,5 tunnissa. Ainoa asia, joka hidasti luomisprosessia, oli kuvakkeiden valinta. Koska ne piti valita läheltä bannerin teemaa.

Tämä banneri myös venyy riippuen sen lohkosäiliön leveydestä, jossa se sijaitsee. Luomiseen meni noin 1,5 tuntia.

Nämä bannerit näyttävät erittäin hyviltä, ​​mutta onko se todella niin yksinkertaista? Katsotaanpa tämän bannerien luontimenetelmän etuja ja haittoja.

CSS-bannerien edut ja haitat:

Kuinka luoda CSS-banneri?

1 Idea

Ensinnäkin sinun on tiedettävä tarkalleen, mitä animaatiota bannerissa tulisi olla (mitä, minne ja mistä sen pitäisi liikkua ja missä sen pitäisi näkyä). Voit ottaa A4-arkin ja piirtää mihin kukin elementti liikkuu ja mitä bannerissa pitäisi olla.

Loppujen lopuksi et voi aloittaa bannerin luomista, jos et tiedä mitä sen pitäisi olla ja miten se toimii.

2 HTML-rakenne

Seuraava askel on luoda HTML-merkintä, jotta elementtejä voidaan siirtää (ja luoda niille animaatio). Eli kaikkea ei voi tehdä yhdellä kuvalla, joka liikkuu oikealta tai vasemmalta ja animaatio on valmis.

Tyypillisesti on yksi yhteinen lohko, jossa kaikki muut sijaitsevat. Ja tässä yleislohkossa voimme hallita elementtejä tarpeen mukaan.

3 CSS-animaatio

Viimeinen vaihe on luoda lohkoille animaatioita sekä kirjoittaa niille tyylejä, koska jotkin animaation osat ovat oletuksena piilossa.

Jotta voit luoda oman bannerin, sinulla on oltava hyvä käsitys CSS:n ja HTML:n perusteista.

Opi perus CSS-animaatio tämän opetusohjelman avulla - .

Johtopäätös

Kaikki nykyaikaiset selaimet tukevat CSS3-ominaisuuksia, mikä tarkoittaa, että bannerit näkyvät oikein tällaisissa selaimissa. Mutta JS-laajennusten avulla voit luoda CSS-bannereita vanhemmille selaimille. Oppimalla CSS-animoinnin perusteet ymmärrät bannerin luomisprosessin ja luot pian ensimmäisen puhtaan CSS-bannerisi! 😉

Tehdään mainosbanneri CSS3:lla. Tällä hetkellä vain CSS3-animaatioita tuetaan täysin Firefox selaimet ja WebKit. Mutta se on tarpeeksi helppoa saada banneri toimimaan muissa selaimissa. Älä kuitenkaan odota erinomaista suorituskykyä kaikkialla (etenkin IE 7:ssä ja sitä vanhemmissa), kun kokeilet uusimpia CSS-tekniikoita.

Huomautus: Sivun tilan säästämiseksi kaikki selaimen valmistajan etuliitteet on jätetty pois. Katso koodi lähteistä.

HTML-merkintä

Katsotaanpa ensin HTML-bannerin rakennetta. Tässä vaiheessa meidän on kuviteltava, kuinka animaatio toimii:

Jos haluat ymmärtää merkintärakenteen syvemmälle, keskitytään veneeseen:

Veneessä tapahtuu kolme animaatiota:

Vene luistaa vasemmalla. Koskee järjestämätöntä luetteloa (ryhmää).

Vedessä keinuvan veneen jäljitelmä. Koskee luettelokohdetta (vene).

Kysymysmerkin esiintyminen. Koskee div-elementtiä (kysymysmerkki).

Jos katsot esittelysivua, näet, että luettelokohteen (vene) animaatio vaikuttaa myös sen sisällä olevaan div-elementtiin (kysymysmerkki). Myös järjestämättömän luettelon "liukuva ulos" -animaatio toimii luettelokohdassa (vene ja kysymysmerkki).

Tästä syystä voimme päätellä, että lapsielementit saavat animaatioita vanhemmiltaan omien toimiensa lisäksi. Nyt ei jää enää muuta kuin luetella vanhempi/lapsi-rakenteet.

CSS

Ennen kuin aloitat animaation luomisen analysoinnin, sinun on varmistettava taaksepäin yhteensopiva vanhemmilla selaimilla.

Taaksepäin yhteensopivuus

Varmistamme taaksepäin yhteensopivuuden muokkaamalla merkinnät ikään kuin CSS-animaatioita ei olisi ollenkaan. Jos joku katselee sivua vanhalla selaimella, hän näkee tavallisen staattisen kuvan, ei tyhjää välilyöntiä.

Esimerkiksi: entä jos käytät CSS:ää? samanlaisia ​​kuin alla, tulee ongelmia:

/* VÄÄRIN! */ @keyframe our-fade-in-animation ( 0% (opasiteetti:0;) 100% (opasiteetti:1;) ) div ( opacity: 0; /* Tämä div on oletuksena piilotettu - hups! */ animaatio: meidän -fade-in-animaatiomme 1s 1 )

Jos selain ei tue animaatioita, div-elementti jää käyttäjälle näkymättömäksi.

Ja näin varmistamme taaksepäin yhteensopivuuden vanhempien selainten kanssa:

/* TOSI */ @keyframe meidän-fade-in-animation ( 0% (opasiteetti:0;) 100% (opasiteetti:1;) ) div ( opasiteetti: 1; /* Tämä div on näkyvissä oletuksena */ animaatio: meidän -fade-in-animaatiomme 1s 1 )

Nyt div-elementti näytetään, vaikka animaatio ei käynnistyisikään. Ja sisään nykyaikaiset selaimet Div piilotetaan ensin animaation aikana.

Loimi

Nyt tiedämme kuinka varmistaa taaksepäin yhteensopivuus (mikä auttaa välttämään ongelmia työskennellessään oikeiden projektien kanssa). On aika luoda CSS-koodimme perusta.

Sinun on muistettava 3 kohtaa:

Koska banneria käytetään eri sivustoilla, teemme parhaamme CSS-valitsimet erityistä. Ne kaikki alkavat tunnisteella #ad-1. Tällä tavalla yritämme välttää päällekkäisyyttä koodimme ja sivustokoodin välillä.

Olemme tarkoituksella jättäneet huomioimatta animaation viiveen asennuksissa. Jos käytät animaatioviivettä asettaessasi tyylejä elementtien oletusnäkyvyydellä, bannerirakenne häiriintyy kuvan osien äkillisen katoamisen tai ilmestymisen vuoksi animaation valmistumisen jälkeen. Animaatioviivettä simuloidaan kehysten kestolla ja asetuksella.

Aina kun mahdollista Käytämme yhtä animaatiota useille elementeille. Näin säästämme aikaa ja pienennämme koodin kokoa.

Luodaan siis perusta bannerillemme. Asetetaan sille suhteellinen sijainti, jotta sisäiset elementit voidaan sijoittaa oikein. Piilottaa myös kaiken elementin laajuuden ulkopuolella:

#ad-1 (leveys: 720px; korkeus: 300px; float: vasen; marginaali: 40px automaattinen 0; taustakuva: url(../images/ad-1/background.png); taustan sijainti: keskellä; tausta -toisto: ei toistoa: piilotettu ruutuvarjo: 0px 6px #000;

Sitten asetamme tyylit teksti- ja syöttökentille. Kutsu sopivia animaatioita. Sinun on myös varmistettava, että sisällöllä on korkein z-indeksi liikkuville osille, jotta ne eivät mene päällekkäin:

#ad-1 #content ( leveys: 325px; float: oikea; marginaali: 40px; tekstin tasaus: keskellä; z-indeksi: 4; sijainti: suhteellinen; ylivuoto: näkyvä; ) #ad-1 h2 ( font-family: "Alfa Slab One", kursiivi: #137dd5:n tekstin korkeus: 0px 4px #fff: 1 easy-in-out; viive */ ) #ad-1 h3 ( kirjasinperhe: "Boogaloo", kursiivinen; väri: #202224; fontin koko: 31px; rivin korkeus: 31px; tekstin varjo: 0px 0px 4px #fff; animaatio: viivästetty -fade-animaatio 10s 1 helpotus sisään /* H3:n ulkoasu simuloidulla viiveellä -out; /* Liu'utetaan lomake sähköpostiosoitteen syöttämistä varten simuloidulla viiveellä */ ) #ad-1 #email (leveys: 158px; korkeus: 48px; float: vasen; täyttö: 0 20px; font-size: 16px; kirjasinperhe: "Lucida Grande", ilman varjoa: 1px 1px 0px #a2917d reunus-vasen-säde: 5px;

border: 1px solid #a2917d;

#ad-1 ul#water( /* Jos tarvitset vedelle toisen animaation, voit lisätä sen tähän */ ) #ad-1 li#water-back ( leveys: 1200px; korkeus: 84px; taustakuva: url( .. /images/ad-1/water-back.png: z-indeksi: absoluuttinen: -20px; #ad-1 li#water-front ( leveys: 1200px; korkeus: 158px; background-image: url(../images/ad-1/water-front .png); background-repeat: z-index: 3; pohja: -70px animaatio: 2s ääretön aaltojen roiskuminen. Animaatio suoritetaan hieman nopeammin perspektiivivaikutelman luomiseksi.

Asetetaan tyylit veneelle ja sen elementeille. Kutsumme myös vastaavia animaatioita:

#ad-1 ul#boat (leveys: 249px; korkeus: 215px; z-indeksi: 2; sijainti: absoluuttinen; pohja: 25px; vasen: 20px; ylivuoto: näkyvä; animaatio: vene animaatiossa 3s 1 helpotus ; /* Liu'uttaa ryhmän mainoksen alkaessa */ ) #ad-1 ul#boat li ( leveys: 249px; korkeus: 215px; background-image: url(../images/ad-1/boat.png); sijainti: absoluuttinen pohja: näkyvä animaatio 2s infinite easy-out /* Simuloi vedessä jo käytettyä animaatiota; ad-1 #question-mark (leveys: 24px; korkeus: 50px; taustakuva: url(../images/ad-1/question-mark.png); sijainti: absoluuttinen; oikea: 34px; ylhäällä: -30px animaatio: delayed-fade-animation 4s 1 help-in-out /* Häivytys kysymysmerkissä */ )

Luodaan nyt tyylejä pilville. Heille käytämme animaatiota loputtoman liikkeen vaikutuksella. Kuva osoittaa idean olemuksen:

Ja tässä on CSS-koodi:

#ad-1 #pilvet ( sijainti: absoluuttinen; ylhäällä: 0px; z-indeksi: 0; animaatio: pilvi-animaatio 30s ääretön lineaarinen; /* Vieritä pilviä vasemmalle, nollaa ja toista */ ) #ad-1 # cloud-group -1 (leveys:720px; sijainti: absoluuttinen; vasen:0px; ) #ad-1 #cloud-group-2 (leveys: 720px; sijainti: absoluuttinen; vasen: 720px; ) #ad-1 .cloud- 1 ( leveys: 172px; korkeus: 121px; url(../images/ad-1/cloud-1.png); sijainti: absoluuttinen huippu: 40px; (leveys: 121px; korkeus: 75px; taustakuva: url() ../images/ad-1/cloud-2.png: absoluuttinen: -25px ) #ad-1 (leveys: 132px; background-image); : url(../images/ad-1/cloud-3.png: absoluuttinen: -5px;

Animaatiot

Muistutus: Tästä eteenpäin mikään ei ole todellisuudessa animoitua. Jos katsot banneriamme nyt, näet staattisen kuvan. Täällä animaatiot luodaan ja niitä kutsutaan yllä olevassa koodissa.

Hengitetään nyt elämää kauniiseen staattiseen kuvaamme:

/* Simuloitua viiveanimaatiota käytetään useiden elementtien näyttämiseen. Viiveen simulointi suoritetaan käynnistämällä prosessi niin, että 80 % animaatiosta jatkuu (eikä heti). Tällä tavalla voit simuloida mitä tahansa viivettä: */ @keyframes delayed-fade-animation ( 0% (opasiteetti: 0;) 80% (opasiteetti: 0;) 100% (opasiteetti: 1;) ) /* Animaatio lomakkeen näyttämiseen sähköpostiosoitteella ja painikkeella. Viiveen jäljitelmää käytetään myös */ @keyframes muoto-animaatio ( 0% (opasiteetti: 0; oikea: -400px;) 90% (opasiteetti: 0; oikea: -400px;) 95% (opasiteetti: 0,5; oikea: 20px ;) 100% (opasiteetti: 1; oikea: 0px;) ) /* Tätä animaatiota käytetään tuomaan vene pois näytöltä videon alussa: */ @keyframes boat-in-animation ( 0% (vasemmalla: -200px;) 100% (vasen : 20px;) ) /* Pilvien animaatio. Ensimmäinen pilviryhmä alkaa liikkua keskeltä ja toinen - näytön oikealle puolelle. Ensimmäinen ryhmä poistetaan hitaasti näytöltä, ja toinen näkyy oikealla. Kun vasen ryhmä on kokonaan piilotettu, pilvet palaavat hyvin nopeasti alkuperäiseen paikkaansa: */ @keyframes cloud-animation ( 0% (vasen: 0px;) 99.9999% (vasen: -720px;) 100% (vasen: 0px;) ) ) / * Kolme viimeistä animaatiota ovat lähes samat - ero on elementtien sijoittelussa. Ne simuloivat valtameren aaltojen roiskumista: */ @keyframes veneanimaatio ( 0 % (ala: 0px; vasen: 0px;) 25 % (ala: -2px; vasen: -2px;) 70% (ala: 2px; vasen : - 4px;) 100% (ala: -1px; vasen: 0px;) ) @keyframes Water-back-animaatio ( 0% (ala: 10px; vasen: -20px;) 25% (ala: 8px; vasen: - 22 pikseliä ;) 25% (ala: -68px; vasen: -32px;) 70% (ala: -72px; vasen: -34px;) 100% (ala: -69px; vasen: -30px;) )

Johtopäätös

Tällä oppitunnilla opimme useita keskeisiä käsitteitä:

1. Perijäelementit saavat omien animaatioidensa lisäksi vanhempiensa animaatioita.
2. Kun luot banneria, sinun tulee pyrkiä käyttämään yksilöllistä tunnistetta, jotta vältytään päällekkäiseltä koodilta olemassa olevan CSS-projektin kanssa.
3. Elementtien sijainti ja tyyli tulee valita ikään kuin animaatiota ei olisi saatavilla taaksepäin yhteensopivuuden varmistamiseksi.
4. Jos mahdollista, sinun tulee käyttää yhtä animaatiota useille elementeille.

Tänään aiomme luoda bannerin käyttämällä CSS3-animaatiota.

Tällä hetkellä vain Firefox- ja WebKit-selaimet tukevat CSS-animaatioita, mutta tarkastelemme, kuinka voimme saada nämä bannerit toimimaan myös muissa selaimissa (jota kutsun 1700-luvun selaimiksi). Sinun ei kuitenkaan pitäisi odottaa suurta tukea kaikissa selaimissa (etenkin IE 7:ssä ja sitä vanhemmissa), kun kokeilet moderneja CSS-tekniikoita.

Luodaan siis animoituja bannereita!

Huomaa: Tilan säästämiseksi kaikki selaimen etuliitteet on poistettu. cm. lähdetiedostot nähdäksesi kaikki CSS-koodit. Jos et ole perehtynyt CSS-animaatioihin, suosittelenensinnäkinlue tämä.

HTML-merkintä

Ensin luodaan bannerirakenne HTML:n avulla. Tässä vaiheessa meidän on mietittävä, miten haluamme animaatiomme toimivan – miten se vaikuttaa ala- ja vanhempi-elementteihin merkintöjemme rakenteessa (selitän tämän alla):