CSS3 :target pseudo-luokan ja CSS animaatioita

Link: http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/

11 päivänä tammikuuta 2010, CSS, Hanke 52

Ei ole mikään salaisuus, että olen aina etsivät helppo tapa ulos CSS sen sijaan, että yrittää jäljitellä asioita sekava koodi — on olemassa niin paljon vajaakäytössä tekniikoita, että meillä voisi olla soveltamalla meidän malleja kuten lisälaite kerros! Tässä kokemus, otan lyhyen katsauksen siihen :target pseudo-class ja hyvin yksinkertainen CSS animaatio.

: target pseudo-luokka

Me usein käyttää fragmentti tunnisteet meidän koodi — yleensä viitata tiettyyn elementtiin sivulla, edustaa “#” ja ankkuri. Kun klikkaa linkkiä, joka päättyy fragment identifier (esimerkiksi tämä), että elementti me ovat osoittaen tulee tavoite (siis :target).

Tämä :target pseudo-luokka voi olla tyylistä, aivan kuten meidän tyyli :hover tai :aktiivinen, pseudo-luokat linkkejä.

Katso esimerkki luonnossa, mene Wikipediaan ja klikkaa viite linkki (esimerkiksi tämä). Jos käytät hyvä selain, näet se on vaaleansininen tausta; ja jos sinä katsot CSS, näet tämän:

1 ol.references > li:target, sup.reference:target, span.citation:target, cite:target {
2 background-color:#DDEEFF;
3 }

Melko helppoa, eikö?

esimerkki

Jos olet kärsimätön, voit katsoa lopullisen esimerkiksi nyt (käyttää Safari):

Katso esimerkiksi

Aion luoda yksinkertainen lista linkkejä (käyttäen fragmentti tunnisteet) korttelin tekstiä karjua niitä. Tässä on merkintä:

1 <div id=”content”>
2
3 <ul>
4 <li><a href=”#b1″>Block 1</a></li>
5 <li><a href=”#b2″>Block 2</a></li>
6 <li><a href=”#b3″>Block 3</a></li>
7 <li><a href=”#b4″>Block 4</a></li>
8 </ul>
9
10 <div id=”b1″>
11 <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me? ” he thought.</p>
12 </div>
13
14 <div id=”b2″>
15 <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
16 </div>
17
18 <div id=”b3″>
19 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
20 </div>
21
22 <div id=”b4″>
23 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
24 </div>
25
26 </div>

perus CSS

Ensinnäkin, meidän täytyy kattaa perusasiat. Käytän hyvin yksinkertainen reset tämä esimerkki, mutta sinun tulee käyttää asianmukaista yksi projekteja. Minä vain asettaa font-size, line-height, font-familypalauttaa - padding ja margin – elementit käytämme:

1 body {
2 font:62.5%/1.5 Cambria,Georgia,”Times New Roman”,Times,serif;
3 }
4 div, ul, li, a, p {
5 padding:0; margin:0;
6 }

Toiseksi, olen nopeasti tyyliin containerdiv “content”:

1 #content {
2 width:500px;
3 margin:auto;
4 font-size:1.4em;
5 }

Kolmanneksi, loput elementit. Minä:

  1. Lisää pieni pohja marginaali luettelosta ja kunkin lohkon tekstiä.
  2. Poista luodit lista — me emme tarvitse heitä varten esimerkiksi.
  3. Lisää täyte ja kevyt rajan korttelin tekstiä.
  4. Tee ensimmäinen rivi kunkin kohdan pieniä korkit. Vain koska en voi.

Huomaa, että olen käyttäen lapsi combinator (tai valitsin) varmista, että div. comin olen kohdistaminen ovat niitä, jotka ovat suorat jälkeläiset tärkein “content” div. Joten jos, jostain syystä, minulla on div: n sisälle korttelin tekstiä, ei olisi vaikuttanut. Myös, minulla ei ole antaa nämä div: n luokan tai kohde niille id‘s.

1 ul, div > div {
2 margin-bottom:1em;
3 }
4 li {
5 list-style:none;
6 }
7 div > div {
8 padding:1em;
9 border:1px solid #ffffd3;
10 }
11 div > div p:first-line {
12 font-variant:small-caps;
13 font-size:1.2em;
14 }

Mehukas hieman

Nyt aion tyyli :target pseudo-luokka. Ensinnäkin, minä lisätä hieman tummempi rajakuin ei-kohdennettu div‘s:

1 div > div:target {
2 border:1px solid #dac89d;
3 }

Tulee CSS animaatio. Luoda animaatio, tarvitset kaksi asiaa: määritelmä mikä vaikutus animaatio tuottaa ja kutsu animaatio elementti, jonka haluat animoida.

katsotaanpa määritellä animaation ensimmäinen.

Voin määritellä animaatio asettamalla keyframes tietyissä kohdissa. Tässä tapauksessa, haluan tausta aloittaa kuin valkoinen, sitten häivyttää vaalean keltainen, sitten takaisin valkoinen — tarvitsen 3 eri vaiheita (tai avainruudut).

Kuvittele, että jokainen askel on yksinkertainen valitsin, mutta sen sijaan, että esimerkiksi tämä:

1 div {
2 background: red;
3 }

meidän täytyy määrittää hetkellä (käyttäen prosenttiosuuksia, tai vain “to” ja “from” jos me vain tarvitsemme “0%” ja “100%“):

1 10% {
2 background: red;
3 }

Myös täällä aion nimi minun animaatio. Minä kutsun sitä “target“:

1 @-webkit-keyframes target {
2 from { background:#ffffff; }
3 50% { background:#ffffd3; }
4 to { background:#ffffff; }
5 }

Joten, animaatio on määritelty, nyt meidän täytyy kutsua sitä pois :target – valitsinta. Voimme joko asettaa kunkin kiinteistön erikseen, tai käyttää pika-versio. Katsotaanpa koko koodi:

1 div > div:target {
2 border:1px solid #dac89d;
3 -webkit-animation-name:target;
4 -webkit-animation-duration:.5s;
5 -webkit-animation-iteration-count:1;
6 -webkit-animation-direction:linear;
7 }

-webkit- – bittiä pitäisi olla itsestään selvä. Meidän täytyy määrittää animaation nimi (“target“), sen kesto (“.5s“, puoli sekuntia), kuinka monta kertaa se on toistettava (“1”) ja sen suuntaa (“linear”).

pika version näyttää tämän sijaan:

1 div > div:target {
2 border:1px solid #dac89d;
3 -webkit-animation:target .5s linear;
4 }

Paljon yksinkertaisempaa! Koska me vain haluamme animaatio toistaa vain kerran, emme voi edes määritellä “1” tässä tapauksessa (jos haluat, voit saada sen heti “.5s“). Sanotaan, että haluat animaatio toistaa kahdesti, voit määrittää sen näin:

1 div > div:target {
2 border:1px solid #dac89d;
3 -webkit-animation:target .5s 2 linear;
4 }

lopussa

Toivottavasti olet nauttinut tämän lyhyt opetusohjelma. On loputtomasti mahdollisuuksia CSS animaatio ja kehittyneempiä CSS-valitsimet, mutta minusta tuntuu, että itse olen osoittaa täällä voi todella käyttää oikeita hankkeita, joilla on mitään vahinkoa käyttäjille selaamiseen vähemmän ystävällinen selaimet.

Oletko samaa mieltä? Oletko käyttänyt :target pseudo-luokan projekteja? Miten CSS-animaatio?

Huomaa: Tämä animaatio näkyy vain, Safari (ja Chrome, kuin. Dougal ystävällisesti huomautti!). :target pseudo-luokka ei vielä tue Internet Explorer. Firefox ja Opera ovat vain näyttää tummempi raja, kun klikkaa linkkejä, mutta se on hyvä kompromissi.

Resouces

Leave a Reply