Við vitum öll það og við elskum öll það, og auðvitað núna vitum þú líklega nú þegar ég er að tala um CSS og CSS3.

Reyndar ættum við líklega að taka smá stund til að þakka CSS3 áður en farið er lengra til að flýta fyrir hleðslutímum fyrir allar uppáhaldssíður þínar. Þeir, ef þeir vita hvað þeir eru að gera, eru meira en líklegar með því að nota CSS3 í staðinn fyrir tonn af myndum til að auka notandi álagstíma, sem er ansi ógnvekjandi.

Það er frekar viðurkennd staðreynd að nú þurfum við einfaldlega ekki myndir til að gera allt sem við þurftum að þurfa á þeim. Með CSS3 stigum, umbreytingum og öllum áhrifum hefur það virkilega virst að hafa tekið mikið af þyngdinni á axlir vefsvæða okkar, því að við skulum vera heiðarleg myndir voru vissulega að vega þau niður.

Ekki vera skakkur þó, CSS3 og CSS geti ekki gert allt en jákvætt nóg, efast ég um að flest okkar séu meðvitaðir um takmarkanir þess eða hvað ýtir mjög brúnir möguleika sína.

Jæja, í dag erum við hér til að finna það út. Svo skulum kafa beint inn í það sem vissulega verður áhugavert og heillandi ferð uppgötvun fyrir okkur öll sem eru aðdáendur CSS3 og CSS.

Athugaðu: Ég er að gera allt þetta með því að ætla að notandi sé á Google Chrome, svo vinsamlegast fyrir ástina af öllu sem er heilagt áður en þú ert í raun að framkvæma þær á vefsíðunni þinni með því að nota viðeigandi forskeyti fyrir aðra vafra. Ekki afrita og líma héðan og hugsa að allt muni virka fullkomlega, því það getur - en það getur ekki.

Textaáhrif

Anaglyphs

Þeir segja Anaglyphs, jafnvel þegar það er gert í CSS3, getur verið sýnt í 3D ef þú hefur nokkrar snazzy hlífðargleraugu í húsinu þínu. Það þó, ég er ekki viss um það, en það sem ég veit er að það getur lítið nokkuð frábært fyrir ákveðin þemu fyrir ýmis verkefni (svo sem tölvuleikur afturþema og svipað).

Þessi áhrif eru búin til með því að móti tveimur af rauðum grænum og bláum litum (rgb). Til að hefja það fyrir þetta gildi þurfum við tvö af sömu orðum og við þurfum þá bæði til að geta miðað á CSS, þannig að við getum unnið endurtekninguna og litatöflu okkar á þeim. Í þessu tilfelli þó, í stað þess að bæta óþarfa HTML í merkið okkar sem við erum að nota fyrir þessi orð, getum við bara notað "eftir" gervitunglið til að bæta við öðru orðinu. Til að gera það munum við nota þetta dæmi: ímyndaðu okkur að við notum H1 til að sýna fyrsta orð okkar, svo sem:

Anaglyph

Við munum þá gera:

h1:after {content: “Anaglyph”;}

Þetta mun gefa okkur góða endurtekninguna og mun sýna: "Anaglyph Anaglyph" á síðunni. Svo, nú skulum við byrja að stilla þetta upp þannig að við getum kasta á einhverjum af þessum ímyndaða 3D fegurð.

h1 {display: inline;position: relative;letter-spacing: -5px; /* This will push it together giving us a nice 3D vibe */color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */}
h1:after {content: “Anaglyph”;position: absolute;left: 8px; top: 6px; /* These are aligning it to be where we’d like relative to the last word */color: rgba (255,0,0,0.5); /* This gives us a red at 50% opacity */}

Notkun RGBA hér er mjög mikilvægt vegna þess að það gerir alfa gagnsæi kleift að setja þannig að yfirtekin texti muni ekki alveg loka textanum undir því og gefa okkur góðan gagnsæi. Textinn í eftir gervileikanum er þá algerlega staðsettur til að vera svolítið á móti frá undirliggjandi texta eins og þú gætir séð og það er líka mjög mikilvægt.

Vertu viss um að spila með þessum stöðum svolítið eins og þú vilt og prófaðu ýmsa liti, því það er mikið gaman að vera hér. En til að klára þessa áhrif upp kasta við á rauða yfirborðinu, og voila höfum við anaglyphic áhrif okkar.

Textalengdir

CSS3 stigin virðast vera öll reiði þessa dagana, og með réttu. Eins og við ræddum áður voru þau eitthvað sem áður var aðeins í boði í gegnum eitthvað eins og Photoshop og innbyggingu mynda á vefsvæðinu þínu. Nú þó getur þú gert allt með smá CSS3 töframaður.

Og áberandi, með galdra sem eru ekki of flóknar í því. Svo skulum sjá hvað við eigum að bjóða hér í leturgráðuflokknum, og hvernig á að conjur upp smá galdra þar.

Línuleg, toppur til botns:

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));

Línuleg, vinstri til hægri:

 -webkit-linear-gradient(left, #000000, #FFFFFF);

Línuleg þrep (með jafnri lit stoppar):

 -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));

Radial Gradient:

 -webkit-radial-gradient(circle, #000000, #FFFFFF);

Radial Gradient (staðsettur):

 -webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);

Svo skulum setja upp dæmi hér og við skulum byrja með h1.

CSS3 Gradient

Þá skulum við byrja að stilla það upp með því að nota smá CSS3 töfra:

h1 {font-size: 100px;font-family: somethingfancy_or_not, arial; /* These two can be anything you like *//* Here’s where the fun starts */-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to (rgba(0,0,0,1)));}
h1:after {content: “CSS3 Gradient”;color: #d6d6d6;text-shadow: 1px 2px 5px #000;

Nú má ekki rugla saman um hversu mikið sviga er notað í RGBA stillingum, þar sem þeir geta oft ruglað saman jafnvel duglegustu verktaki, og við munum öll gleyma og mispla þeim á stundum, svo hafðu bara í huga að við erum allir menn .

En leyfðu mér að brjóta niður hvað er að gerast hér. Hér erum við að nota grímu mynd sem leið til að klippa sýnilega hluta frumefnisins í samræmi við gagnsæi grímu myndarinnar. Þá erum við að nota eftir gerviþáttinn til að gera góða textaskugga á þáttinn okkar.

Þetta er allt að sjálfsögðu ekki krafist fyrir halli, en það er góð leið til að grenja upp er það sem er að gerast og vissulega leyfir þér að sjá hversu langt við getum teygt einfalt hallandi. Nú skaltu fara bandy um og spila með öllum stílum stigum og ganga úr skugga um að þú sért með eitthvað slæmt fyrir næsta verkefni.

Dýpandi texti

Ein af fáum hlutum sem við þurfum mjög sjaldan en gæti raunverulega hugsað er áhugavert er að drekka texta til að gera það virðast eins og það sé að falla í sundur með stafunum ósnortinn. Stundum getur þetta verið vegna þess að við erum þráhyggju af vampírum og viljum að textinn blæðir rauða blóðið í hefnd, EÐA það gæti bara verið einfaldlega vegna þess að við viljum að það sé að drekka vatn-esque blár litur eins og við lesum niður. Stundum hef ég jafnvel séð að fólk noti þetta með div-þætti þar sem blaðsíðan rúlla niður frá yfirborði til neðansjávar stíl, þar sem neðansjávar svæði eru miklu þungari á óskýrleika þeirra og því virðist vera að dreypa aðeins (eða virðast vera neðansjávar).

Setningafræði fyrir þetta er frekar einfalt, þannig að ég mun skilja það flókið útskýringu en ég mun gefa þér innblástur um hvernig á að gera það í einum setningu. Það er byggt á endurtekningu. Svo segjum að þú viljir drukkna nokkuð langt og við munum nota u.þ.b. 15 eða svo textaskuggi við ýmis y-setur til að ná þeim áhrifum. Ef við viljum aðeins fáir, þá ættum við að nota aðeins nokkrar með minni móti. Dæmi um að nota rautt vampíric áhrif væri:

.drip {color: #EEE;text-shadow: 4px 4px 1px #300000;4px 6px 1px #400000; 4px 8px 1px #500000; /*......and so on, until*/ 4px 60px 5px #FF0000;}

Í grundvallaratriðum er hægt að halda þessu áfram þar til þú nærðst við viðkomandi mörk (y-ás) eða vinna aftur til baka ef þú vilt hið gagnstæða og minni móti. Þó vertu viss um að ekki ofnotkun þetta - vegna þess að eins og ég sagði þetta er mjög óvenjulegt og eitt sem ég er viss um að það eru ekki tonn af tilfellum fyrir. En reyndu að vera viss um það, því endurtekin textaskuggi er mjög áhugavert að spila með.

Stílhrein lögun

The sauma útlit

Ef þú vilt ekki nota Photoshop eða jQuery til að fá einhverjar geðveikir slemmar áhrif, þá er CSS3 líklega næsti besti veðmálið þitt. Nú, auðvitað getur einhver kastað strikamerki á innihaldsefni eða div og segist að það sé saumaður en raunverulegur lykillinn er að nota það í sambandi við nokkrar aðrar CSS3 aðgerðir sem raunverulega gera það áberandi sem stílhrein viðbót- á.

Það sem þú vilt virkilega að gera er að kasta á fallegu dropaskugga með stórum útbreiðslu radíus. Ástæðan er sú að þú viljir fá bakgrunnslitina til að blæða yfir landamærin, og að gera það sem þú setur útbreiddarradíuna (fjórða þátturinn) mjög hátt. Til dæmis myndi ég gera eitthvað eins og:

.stitched_element {border: 2px dashed  #ffffff;box-shadow: 0 0 0 8px #ff0030;}

Það mun gefa þér góð áhrif að aðrir virðast eyða línum og línum af óþarfa CSS til að búa til. Reyndar er þetta áhrif þar sem þú gætir viljað spila með því að búa til það í Photoshop fyrst um stund, bara svo að þú skiljir kenninguna á bak við það sem þú ert að gera hér.

Ég hef sennilega eytt 6 klukkustundum í Photoshop undanfarna mánuði og spilað með saumaðir áhrif, vegna þess að það er heiðarlega að það er gaman og hjálpa þér að skilja hvað nákvæmlega þú ert að reyna að fá CSS til að gera.

Það ímynda Ambersand

Þú gætir spurst sjálfan þig: "Hvar í heiminum fá fólk þá ótrúlega kyrrstæða sem ég sé um allan tímann." Þú gætir jafnvel leitað að hátt og lágt fyrir einn í öllum venjulegu letri sem þú rekur yfir og vel, Eins og ég hef líklega ekki fundið það fyrr en þú sást einhvern sem skrifaði um það. Ástæðan er sú að það er leturgerð sem þú þarft að leyfi til að nota, og með því að mikið af okkur kjósa vefletur eða venjulegt val.

Eitt af því frábæra vali á Mac OSX stýrikerfi (kemur sjálfgefið) er skáletrið 'Cochin'. Ef þú kýs að velja Google Web letur skaltu skoða Josefin Sans .

Ég veit að þetta er ekki alveg CSS3, en það er ágætur lítill @ font-face aðgerð og í þessu tilfelli ætla ég að setja þig upp með hlekk til að hlaða niður leturgerðinni og öllu. Núna er þetta Google vefletur svo þau sýna þér hvernig á að gera þetta á síðunni þeirra, en það er gott að hafa í huga að þú getur sameinað tvö eiginleika til að vinna með leturgerðir. Og til að létta þann tíma hef ég sett það í kóðann hér, og þetta er beint í leturgerðina sem gefur okkur fínt ampersand. En vertu viss um að spila með skáletruninni af þessum leturgerðum, þar sem þú munt venjulega fá raunverulega áhugaverða útsendingu.

@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}

Og þar sem þú ferð. Nokkrar athugasemdir um notkun þó. Eins og þú getur sagt frá myndinni hér að framan, þetta er mjög fínt 'ampersand og það er best notað þegar andstæða tveir letri andlit, eða í brúðkaup boð eða öðrum "ímynda" atburðum. Ég hef notað það í mjög nútíma hönnunarverkum eins og heilbrigður þó, svo finnst þér ekki að þú getir ekki notað það vegna þess að þú ert að gera eitthvað nútíma. Ég segi bara að það gæti ekki verið fullkomið 'grunge'-lausnin ef það er það sem þú ert að fara að. Ég verð að segja þó, milli djörf og þunnt leturs, að þessi ampersand lítur vel út.

Einhliða kassi-skuggi

Við vitum öll og elska kassaskuggi, en stundum er dæmigerður skuggi ekki nákvæmlega það sem við viljum. Til dæmis gætum við stundum verið að gera raunhæf skygging á ákveðnum þáttum á síðunni okkar og viljum að skuggurinn birtist aðeins einn sérstakur hlið. Eða við gætum haft áhuga á að gera sveifluþætti eða skoppandi frumefni og við skulum andlit það - ekkert eykur fegurðina í því eins og einhliða kassaskugga.

Það sem við gerum hérna er frekar einfalt í raun, við munum nota neikvæða útbreiðslu radíus til að kreista kassann skugga burt af einum brún. Við skulum td ímynda okkur að við höfum gráa kassaþátt og það er sett upp með breidd og hæð 40px um 40px. CSS okkar myndi líta út:

.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}

Það mun gefa okkur nákvæmlega það sem við þurfum, og í einum einfölduðu kóða í því. Eins og ég sagði, ef þú notar lýsingareiningu (eða þema) til að skyggða síðuna þína í einu tilteknu átt eins og það væri málverk, þá er þetta fullkomin lausn fyrir þig.

Á sama hátt, skoppar eða sveima: hoppþættir eru bara fullkomnar fyrir þetta. Í síðara tilvikinu skaltu virkja skuggann eftir að hopp hefur byrjað og slökkva á því þegar hún er lent og þá virðist sem þú ert að snúa inn í hönnuður þegar.

Rolling yfir í CSS Sprite

CSS Sprites eru skemmtileg tækni, og flest okkar eru meira en líklega kunnugir þeim. En bara ef þú ert ekki, láttu mig draga saman hvað þeir eru. A CSS Sprite er eitt stórt mynd sem inniheldur að minnsta kosti tvær skoðunarferðir, einn sem er í sjónarhóli og einn sem kemur í ljós á einhvers konar notendaviðskipti (venjulega músarhnappur).

Nú þegar þú veist hvað þeir eru, munum við í raun setja upp okkar fyrstu og líklega mestu undirstöðu af CSS sprite myndinni. Í þessu tilfelli munum við nota tengilinn sveifla og báðir myndirnar geta verið nokkuð sem þú vilt, en við munum kalla það "sprite.png". Við munum einnig nota frumefni til að hýsa tengilinn okkar og myndina okkar, þess vegna munum við nota bakgrunnssniðið CSS setningafræði. Þannig mun kóðinn okkar líta út:

a {display: block;background: url(sprite.png) no-repeat;height: 50px /*Example that is needed for the hover explanation*/width: /*the appropriate width here*/}
a:hover {background-position: 0 -50px;}

Eins og þú sérð er raunverulegt leyndarmál hér það sem gerist þegar notandinn sveiflar yfir myndarþáttinn og myndarfærslurnar á Y-ásnum á lengd 50 punkta. Ástæðan fyrir því er að það er nákvæmlega hæð myndarinnar, þannig að það verður engin layover eða skarast á meðan á umskiptasvæðinu stendur og það mun líta út eins og hreint og slétt eins og það getur verið.

Þetta er alvöru leyndarmál spritmynda og sveima yfir aðgerðir. Burtséð frá því að þú gætir haft mjög undarlega eða ílangan mynd þarftu að hafa y (eða x) móti, allt eftir því sem þú ert að fara að, nákvæmlega breiddina (x) eða hæðin (y) frumefnisins . Hreint og einfalt og skemmtilegt í því. Farið nú um og búðu til eigin sprites þínar!

Layering

Þú gætir haft áhuga á lagagerð á vefsvæðinu þínu. Vera það pappír, lauf, tré eða meira fáránlegt hlutur, eins og andlit fólks, getur þú notað sama setningafræði til að komast í burtu með það sem þú vilt. Það er í grundvallaratriðum úrval af kassaskugga af af fyrsta þáttinum þínum til að gefa 'áhrif' sem þú ert að leita að.

Í þessu tilviki munum við nota einfaldan div með gráum bakgrunni svo að þú getir safnað því sem við erum að vísa til. Við munum eins og venjulega kafa rétt inn og útskýra síðan.

Hæ, ég heiti lagskipt Div.
.layering {background: #EEE;box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);}

Það sem við erum að horfa á kann að virðast svolítið flókið en það er í raun frekar einfalt. Hvað er að gerast er skuggi, lag, skuggi, lag og skuggi. Svo efsta lagið í þessu tilfelli er div með bakgrunnslit #EEE. Síðan höfum við fyrsta skuggaskugga okkar sem skuggi á því efsta lagi, þá er annað lagið sýnt (athugaðu #EEE), og þá höfum við skuggann á öðru laginu, og þá þriðja lagið (athugaðu aftur #EEE) og þá skuggi hennar.

Nokkuð einfalt, og með þeim valkostum sem við höfum gert það gefur gott staflað eða lagskipt áhrif. Aftur, þetta er hægt að nota með eitthvað í raun, þú verður bara að tinker með röðun til að fá það rétt. Mundu þó að þegar þú leggur á þig verður þú best að vinna frá efra til vinstri niður að neðst til hægri með myndunum þínum eða divs, þar sem það flæðir meira náttúrulega.

Virkni

Móttækileg hönnun: iPad stíl

Við skulum andlit það, móttækileg hönnun er ótrúlega mikilvægt. Og mér er alveg sama ef þú hatar fjölmiðlafyrirspurnir og vökvakerfi, þú verður að nota þau á nokkrum árum, án tillits til þess hvort þú líkar þeim. Búast við því að það sé staðalbúnaður í vefhönnun, sérstaklega þar sem mörg mismunandi skjástærð og tækiupplausn sem eru að berja markaðinn og eru samþykktar á ógnvekjandi hátt - allt frá 27 '' iMacs til iPod Touches og allt á milli , og þeir skoða alla á vefnum.

Þeir þurfa allir gott upplifun og heiðarlega, enginn vill gera annan útgáfu af vefsvæði sínu fyrir hvert tæki, þar sem það er bara of mikið verk. Við erum upptekin fólki þannig að við þurfum lausn fyrir upptekinn fólk. Það er þar sem fjölmiðlafyrirspurnir koma inn í blandan. Það sem ég mun leggja áherslu á hér er iPad sérstakar fyrirspurnir, en frá þessu er hægt að safna því sem þú þarft til að ýta út fyrirspurnir þínar í aðrar skjástærð. Eftir það kemur aðeins breyting á skipulagi vefsvæðis þíns til að endurspegla þessar breyttu skjástærð. Svo skulum falla niður kóða og tala um það síðan.

@media only screen and (device-width: 768px) { /*General layouts*/ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*Portrait*/ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*Landscape*/ }

Þetta ætti ekki að vera of mikið erfitt að sjá hvað er að gerast hér, en það sem við erum að gera er að nota fjölmiðlafyrirspurnirnar ' sérstakt setningafræði að brjóta niður og gera kleift að skoða vefsíðuna okkar til að endurspegla best fyrir tiltekna skjástærð. Svo segjum við að við höfum H1 með smá texta sem er stór í 60px ... jæja, það er líklega gott fyrir iMacs og aðra stóra skjáborð, en það mun líklega ekki passa við afganginn af vefsvæðinu þínu á fleiri íhaldssamt iPad útsýni . Svo það sem við munum gera er að finna inni í kóða okkar:

@media only screen and (device-width: 768px) { h1: font-size 60px  }

Og það mun stærð það niður fyrir iPad skjár á viðeigandi hátt. Auðvitað voru þessar stærðir bara dæmi sem þú vilt vera best að prófa síðuna þína fyrir ákveðnar stærðir og slíkt áður en þú ferð að klára fyrirspurnir þínar, en þetta er aðferð sem mun spara þér tonn af vinnu til lengri tíma litið (og notandi uppnámi ).

ATH: Ef þú þekkir hlutbundin forritun þá er þetta eitthvað sem mun koma í öðru nafni, það sem við erum að horfa á er í grundvallaratriðum "ef svo" yfirlýsing um tegundir fyrir framsetningu vafrans á skjánum okkar. Að mínu mati er þetta ein besta leiðin til að koma út úr CSS, vel ... alltaf.

Gagnlegar flakk (stækkun)

Leiðsögn er ekki alltaf fullkomin á vefsvæðum okkar og vegna þess að við þurfum stundum að fara aftur á teikniborðið til að endurskoða hvernig við gerum það og ef við getum notað CSS3 til að hjálpa okkur.

Við skulum ímynda sér að við eigum stýrihjóli efst á heimasíðu okkar, en við viljum bæta við fleiri poppum þegar notendur músa yfir það, láta þá vita að þeir geta notað það og að það sé í raun aðlaðandi hlutur fyrir þá að Smelltu á. Jæja, besta leiðin til að gera það væri að kasta á einfaldan vefskiptabreytingu með því að nota auðvelda aðferðina. Svo það sem við munum gera er að gefa dæmi um "nav" frumefni.

Auðvitað í þessu dæmi verður þú að gera allt sem þú setur upp, við erum bara að skoða nákvæmlega tímabundna þætti sem myndi hjálpa þér út í þessu tilfelli.

nav a {-webkit-transition: width 0.15s ease;}

eða

nav a {-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */nav a:hover {-webkit-transform: scale(1.1);}

Nokkrar athugasemdir um vefviðskiptaeiginleika svo þú getir notað það rétt á vefsvæðinu þínu. Það er galdur stafur í grundvallaratriðum, og tekur í þremur gildum. Eignin sem er hreyfimynd, lengd hreyfimyndarinnar og "tímasetningaraðgerð" (þetta hefur áhrif á hreyfimyndunina fyrir sléttari áhrif).

There ert a einhver fjöldi af lifnaðarhættir til að fara að vinna með þetta, og mikið af úrræðum þarna úti eins og hér og hér og hér . En ég vonaði að gefa þér innsýn í það sem mögulegt er með þeim og rífur í raun þorsta þína til að skilja þannig að þú farir út og reynir svolítið. A einhver fjöldi af gaman að vera hér.

Og svo erum við komin í lok ferðarinnar. Bara að hafa í huga að þetta var ekki tæmandi eða heill listi með neinum hætti, en ég vona að það vakti áhuga þinn á nokkrum af þeim áhugaverðustu hlutum sem þú getur gert með CSS og CSS3. Það er stundum brjálaður og skemmtilegur heimur og stundum pirrandi.

Eftir allt saman vitum við öll hvernig það er þegar hönnuður getur ekki fengið div til að sýna barnsþátt á réttan hátt eða þegar textareikningur er ekki alveg að gera það sem þú vilt.

Svo hafðu samband við uppáhaldshönnuðir þínar og vaxaðu hring af vinum í þessu rými sem þú getur átt samskipti við og deila þessum bragðarefur með fram og til baka, því ég veit að þetta er hvernig ég lærði mest af því sem ég hef deilt í dag og ég hef að segja að ég held að það sé það besta sem þú getur gert sem vefhönnuður. Twitter er frábær auðlind fyrir það, og leitað [punktur] Twitter enn betra. Í millitíðinni mun ég láta þig gera tilraunir en ekki fyrr en einum síðasta setningu.

Fara fram á unga Padawan og spilaðu með skemmtuninni sem bíður þér sem vefhönnuður í náttúrunni í stíl og hönnun innan CSS (3).

Hvað eru uppáhalds nýju CSS3 tækin þín? Eða lítið notað / lítið þekkt CSS tækni? Láttu okkur vita í athugasemdum!