10 Coolest CSS3- ja CSS-tehosta
Me kaikki tiedämme sen, ja me kaikki rakastamme sitä, ja tietysti jo nyt luultavasti tiedät jo, että puhun CSS: stä ja CSS3: sta.
Itse asiassa meidän pitäisi todennäköisesti hetki kiittää CSS3: ta, ennen kuin menemme eteenpäin kaikkien latauskertojen nopeuttamiseksi. He, jos he tietävät, mitä he tekevät, ovat todennäköisesti käyttäneet CSS3: n sijasta kuvien määrää käyttäjän kuormitusajan parantamiseksi, mikä on melko mahtavaa.
Nyt on aika hyväksytty tosiasia, että emme yksinkertaisesti tarvitse kuvia, jotta kaikki tarvittavat asiat olisivat tarpeellisia. CSS3-kaltevuuksilla, siirtymillä ja kaikilla vaikutuksilla on todellakin näyttänyt aiheuttaneen paljon painoa verkkosivustojemme olkapäiltä, koska olisimme rehellisiä-kuvat varmasti punnitsivat ne.
Älkää erehtykää, vaikka CSS3 ja CSS eivät voi tehdä kaikkea, mutta ironista kyllä, epäilen, että useimmat meistä ovat tietoisia sen rajoituksista tai siitä, mikä työntää mahdollisuuksiensa reunoja.
No, tänään olemme täällä selville. Joten sukelkaa oikeaan, mikä on varmasti mielenkiintoinen ja mielenkiintoinen löytöretki kaikille meille, jotka ovat CSS3: n ja CSS: n faneja.
Huomaa: teen kaikki nämä oletukset siitä, että käyttäjä on Googlen kromissa, joten pyydä rakkautta kaikesta, joka on pyhä ennen kuin he todella toteuttavat näitä sivustoosi, käytä asianmukaisia etuliitteitä muille selaimille. Älä kopioi ja liitä täältä ja usko, että kaikki toimii täydellisesti, koska se voi - mutta se ei välttämättä toimi.
Tekstipohjaiset vaikutukset
anaglyphs
He sanovat, että Anaglyphs, vaikka se tehdään CSS3: ssa, voidaan näyttää 3D: ssä, jos sinulla on upeita suojalaseja talossasi. Se ei kuitenkaan ole varmaa, mutta tiedän, että se voi näyttää melko mahtavalta tietyille teemoille eri projekteille (kuten videopelien retro teema ja vastaava).
Tämä vaikutus luodaan poistamalla kaksi punaista vihreää ja sinistä väriä (rgb). Jotta voisimme aloittaa asiat tällä tavalla, tarvitsemme kahta samaa sanaa, ja tarvitsemme heitä molempia, jotta voisimme olla kohdistettu CSS: ään, jotta voimme työskennellä toistomme ja värimaailman heidän kanssaan. Tässä tapauksessa sen sijaan, että lisäämme tarpeettomia HTML-koodeja omaan tunnisteeseen, jota käytämme näillä sanoilla, voimme käyttää vain toisen sanan lisäämistä pseudo-luokan jälkeen: "jälkeen". Joten, niin käytämme tätä esimerkkiä: kuvitella, että käytämme H1: ta näyttämään ensimmäinen sana, kuten:
Anaglyph
Teemme seuraavaksi:
h1:after {content: “Anaglyph”;}Tämä antaa meille mukavan toiston ja näyttää sivun Anaglyph Anaglyph. Joten nyt aloittaa tyylin tämä, jotta voimme heittää joitain tämän hienon 3D-kauneuden.
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 */}RGBA: n käyttäminen tässä on erittäin tärkeä, koska se sallii alfa-läpinäkyvyyden asettamisen niin, että päällystetty teksti ei täysin sulje tekstiä sen alle ja antaa meille mukavan läpinäkyvyyden. Tämän jälkeen pseudo-elementin teksti on ehdottomasti sijoitettu hieman poikkeamaan taustalla olevasta tekstistä, kuten näet, ja se on myös erittäin tärkeä.
Varmista, että pelaat näillä kannoilla hieman haluamallasi tavalla ja testat eri värejä, sillä siellä on paljon hauskaa. Mutta lopettaaksemme tämän, voimme päästää punaisen peiton, ja voilulla meillä on anaglyphic vaikutus.
Tekstin gradientit
CSS3-kaltevuudet näyttävät olevan kaikki raivostuksia näinä päivinä, ja oikein. Kuten aiemmin keskustelimme, ne olivat jotain, joka oli aiemmin saatavilla vain sellaisella tavalla kuin Photoshop ja kuvien upottaminen sivustollesi. Nyt kuitenkin voit tehdä sen kaiken CSS3-velhon kautta.
Ja tarkkaan, loitsuilla, jotka eivät ole liian monimutkaisia siihen. Katsotaan siis, mitä meillä on tarjottavana tässä kirjasintegraatioluokassa, ja miten luodaan jonkin verran taikaa siinä.
Lineaarinen, ylhäältä alas:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Lineaarinen, vasemmalta oikealle:
-webkit-linear-gradient(left, #000000, #FFFFFF);Lineaarinen gradientti (tasaisten värirajojen kanssa):
-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));Radiaalinen gradientti:
-webkit-radial-gradient(circle, #000000, #FFFFFF);Radiaalinen gradientti (sijoitettu):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Luodaan siis esimerkki tässä, ja aloitetaan h1: llä.
CSS3 Gradient
Aloitetaan sitten muotoilemalla sitä käyttämällä hieman CSS3-taikuutta:
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;Älä sekoita RGBA-asetuksissa käytettävien suluiden määrää, sillä ne voivat usein sekoittaa jopa kaikkein taitavimmat kehittäjät, ja me kaikki unohdamme ja heikennämme niitä toisinaan, joten pidä mielessä, että olemme kaikki ihmisiä .
Mutta anna minun murtaa, mitä täällä tapahtuu. Tässä käytämme maskikuvaa, jolla voidaan leikata elementin näkyvä osa maskin kuvan läpinäkyvyyden mukaan. Sitten käytämme jäljessä pseudo-elementtiä tekemään mukava tekstin varjo elementillemme.
Tämä ei tietenkään ole tarpeen kaltevuuden kannalta, mutta se on mukava tapa kuoppia, mitä tapahtuu, ja voit varmasti nähdä, kuinka pitkälle voimme venyttää yksinkertaisen kaltevuuden. Nyt mennä röyhtäen ja pelata kaikkien kaltevuustyylien kanssa ja varmista, että keksit jotain loistavaa seuraavaa projektia varten.
Tiivistetty teksti
Yksi niistä harvoista asioista, joita me harvoin tarvitsemme, mutta voi itse asiassa uskoa, että on mielenkiintoista antaa tekstiä, jotta se näyttäisi siltä kuin se hajoaa koskemattomien kirjainten kanssa. Joskus tämä voi johtua siitä, että olemme pakkomielteisiä vampyyrejä ja haluamme, että teksti vuotaa veren punaisen veren, TAI se voi olla yksinkertaisesti vain siksi, että haluamme sen vuotavan vettähylkivän sinisen värin lukemalla. Joskus olen jopa nähnyt ihmisten käyttävän tätä div-elementteillä, kun sivu rullaa alas pinnasta vedenalaiseen muotoiluun, jossa vedenalaiset alueet ovat paljon raskas niiden hämärtymisestä ja näyttävät sen vuoksi itävän vähän (tai näyttävät olevan veden alla).
Sen syntaksi on melko yksinkertainen, joten jätän sen monimutkaisen selityksen ulos - mutta annan sinulle esityksen siitä, miten se tehdään yhdellä lauseella. Se perustuu kaikkiin toistoihin. Joten sanotaan, että haluat putoaa alas melko pitkälle, ja käytämme noin 15 tekstiä varjossa eri y off-asetuksissa saada tämä vaikutus. Jos haluamme vain muutaman, käytämme vain muutamia pienempiä offsettejä. Esimerkki punaista vampyyriefektiä käytettäessä olisi:
.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;}Pohjimmiltaan voit pitää tämän ajan, kunnes saavutat haluamasi rajan (y-akseli pois päältä) tai työskentele taaksepäin, jos haluat päinvastaisen ja pienemmän offset-arvon. Varmista, ettet käytä liikaa tätä - koska sanon, että tämä on hyvin epätavallinen vaikutus ja yksi, että olen varma, että ei ole paljon käyttötapauksia. Mutta kokeile varmasti, koska toistuvat tekstin varjot ovat todella mielenkiintoisia pelata.
Tyylikkäät ominaisuudet
Ommeltu ulkonäkö
Jos et halua käyttää Photoshopia tai jQueryta saadaksesi hulluja ommelluisia vaikutuksia, CSS3 on todennäköisesti paras panostuksesi. Nyt tietenkin kukaan voi nakata katkoviivaa sisältöä tai divia ja sanoa, että se on ommeltu, mutta todellinen avain on käyttää sitä tangentissa muutamien muiden CSS3-ominaisuuksien kanssa, jotka todella tekevät siitä erottuvan tyylikkäinä lisäominaisuuksina, päällä.
Se, mitä todella haluat tehdä, on heittää mukava pudotus varjolla, jolla on suuri hajotettu säde. Syynä on, että haluat taustan värin valumaan rajan yli ja että asetat hajautetun säteen (neljäs elementti) todella korkealle. Esimerkiksi tekisin jotain:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Tämä antaa sinulle mukavan vaikutelman, että muut näyttävät viettävän tarpeettomia CSS-viivoja ja rivejä luomaan. Itse asiassa tämä on vaikutusta, jossa voit halutessasi leikkiä luomalla sen Photoshopissa ensin jonkin aikaa vain, jotta ymmärrät teorian siitä, mitä teet täällä.
Olen luultavasti viettänyt 6 tuntia Photoshopissa viime kuussa leikkimällä ommellut vaikutukset, sillä rehellisesti he ovat todella hauskoja - ja auttavat ymmärtämään, mitä juuri yrität saada CSS: n tekemään.
Se fancy ampersand
Voit kysyä itseltäsi: "Missä maailmassa ihmiset saavat sellaiset hämmästyttävät äänimerkit, joita minä näen koko ajan." Olet ehkä hakenut korkeita ja matalia yhdelle kaikille tavallisille fonteille, joita käytit läpi ja hyvin, kuten minä, luultavasti ole löytänyt sitä, ennen kuin näit jonkun kirjoittavan siitä. Syy on se, että se on fontti, jonka sinun on lisensoida käytettäväksi, ja jonka tavoin monet meistä mieluummin käyttävät verkkofonttia tai vakiovarusteita.
Yksi hienoimmista vaihtoehdoista Mac OSX-käyttöjärjestelmässä (oletusarvo) on kursivoitu "Cochin". Jos valitset vaihtoehtoisesti Google Web -fontin, tutustu Josefin Sans .
Tiedän, että tämä ei ole täysin CSS3, mutta se on mukava pieni fontti-face-toiminto ja tässä tapauksessa aion luoda linkin fontin ja kaiken lataamiseen. Nyt tämä on Google-verkko-fontti, jotta he näyttävät, miten voit tehdä sen omalla sivullaan, mutta on mukavaa pitää mielessä, että voit yhdistää molemmat attribuutit työskentelemään fonttien kanssa. Ja helpottamaan sitä aikaa olen sisällyttänyt sen koodiin, ja tämä on suoraan fontti, joka antaa meille fancy ampersand. Mutta varmasti pelata näiden fonttien kursiivilla käytöllä, sillä siellä voit yleensä saada todella mielenkiintoisen käyttötarkoituksen.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}Ja sinä menet. Muutama käyttöohje kuitenkin. Kuten yllä olevasta kuvasta voi kertoa, tämä on erittäin "fancy" ampersand ja sitä käytetään parhaiten, kun kontrasti kahta fonttia tai häät kutsut tai muut "fancy" tapahtumia. Olen käyttänyt sitä myös hyvin moderneissa suunnittelukappaleissa, joten älä usko, ettet voi käyttää sitä, koska teet jotain moderni. Sanon vain, että se ei välttämättä ole täydellinen "grunge" -ratkaisu, jos se on mitä aiot tehdä. Minun on kuitenkin sanottava, että välillä on rohkea ja ohut kirjasintyyppi, tämä ampersand näyttää kauniilta.
Yksipuolinen laatikko-varjo
Me kaikki tiedämme ja rakastelemme laatikoita, mutta joskus tyypillinen varjo ei välttämättä ole juuri sitä mitä haluamme. Esimerkiksi joskus voimme tehdä realistisen varjostuksen tietylle elementille sivustossamme ja haluamme, että varjo ilmestyy vain yhdelle puolelle. Tai saattaisimme olla kiinnostuneita tekemään hover-elementtiä tai parantavaa elementtiä ja kohtaamaan sen - mikään ei vahvista kauneutta siinä kuin yksipuolinen laatikko varjo.
Mitä täällä teemme, on varsin yksinkertaista, käytämme negatiivista hajautettua sädettä puristamalla laatikon varjo yhdeltä reunalta. Joten esimerkiksi kuvitella, että meillä on harmaa laatikkoelementti ja se on asetettu 40px: n leveyteen ja korkeuteen 40px. Meidän CSS näyttää:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}Se antaa meille täsmälleen sen, mitä tarvitsemme ja yhdellä yksinkertaistetulla koodilla. Kuten sanoin, jos käytät valaistuselementtiä (tai teemaa) sävyttämään sivustosi tietyssä suunnassa kuin maalaus, se on täydellinen ratkaisu sinulle.
Vastaavasti pomppia tai hypätä: pomppia elementit ovat vain täydellisiä tähän. Jälkimmäisessä tapauksessa aktivoi varjo sen jälkeen, kun pomppia on alkanut ja poistettu käytöstä, kun se on laskeutunut, ja sitten näyttää siltä, että olet jo suunnittelija.
Siirtyminen CSS Sprite -ohjelmaan
CSS Sprites on hauska tekniikka, ja useimmat meistä ovat todennäköisesti perehtineet niihin. Mutta vain siinä tapauksessa, että et ole, haluaisin esittää yhteenvedon siitä, mitä he ovat. CSS Sprite on yksi suuri kuva, joka sisältää vähintään kaksi tarkastelualuetta, joka on näkymässä ja joka näkyy jonkinlaisessa käyttäjän vuorovaikutuksessa (tyypillisesti hiiren päällä).
Nyt kun tiedät, mitä he ovat, voimme itse perustaa ensimmäisen, ja luultavasti kaikkein yksinkertaisimman CSS-sprite-kuvan. Tässä tapauksessa käytämme linkin hoveria, ja nämä kaksi kuvaa voivat olla mitä tahansa, mutta kutsumme sitä "sprite.png". Käytämme myös elementtiä linkin ja kuvamme rakentamiseksi, ja siksi käytämme tausta CSS-syntaksia. Joten koodimme näyttää:
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;}Kuten näette, todellinen salaisuus on täällä, mitä tapahtuu, kun käyttäjä ohittaa kuvan elementin ja kuvasiirtymät Y-akselilla 50 pikselin pituudella. Syynä tähän on kuvan tarkka korkeus, joten siirtymän aikana ei ole lepotilaa tai päällekkäisyyttä, ja se näyttää niin puhtaalta ja tasaiselta kuin mahdollista.
Tämä on sprite-kuvien todellinen salaisuus, ja hiirellä niiden päälle. Riippumatta siitä, että sinulla voi olla hyvin outo tai pitkänomainen kuva, sinun on y (tai x) offset, riippuen siitä, mihin olet menossa, täsmälleen leveys (x) tai korkeus (y) . Puhdas ja yksinkertainen - ja melko hauska, että nyt mennä ja tehdä omat sprites!
kerrospukeutuminen
Saatat olla kiinnostunut keräämään asioita sivustossasi. Olkoon se paperi, lehdet, puut tai naurettava asia, kuten ihmisten kasvot, voit käyttää samaa syntaksia päästäkseen pois haluamallasi tavalla. Se on pohjimmiltaan valikoima laatikko varjo on pois ensimmäinen elementti antaa "vaikutus", että etsit.
Tässä tapauksessa käytämme yksinkertaista div-harmaa tausta, jotta voit kerätä mitä tarkoitamme. Me tavallisesti sukellamme oikein ja selitämme sen jälkeen.
.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);}Tarkastelemme voi näyttää hieman monimutkaiselta, mutta se on oikeastaan melko yksinkertainen. Mitä tapahtuu, on varjo, kerros, varjo, kerros ja varjo. Tällöin yläkerroksen tässä tapauksessa on div, jonka taustaväri on #EEE. Sitten meillä on ensimmäinen laatikko varjo, joka toimii varjona tässä ylimmässä kerroksessa, sitten toinen kerros näytetään (huomaa #EEE) ja sitten meillä on toinen kerroksen varjo ja sitten kolmas kerros (huomata taas #EEE) ja sen varjo.
Melko yksinkertainen, ja valintojemme ansiosta se antaa mukavan päällekkäisen tai kerroksellisen vaikutelman. Jälleen, tätä voidaan käyttää mitä tahansa oikein, sinun on vain koukistettava kohdistamiseen saadaksesi sen oikein. Muista kuitenkin, että kun teet kerrostamista, sinun on parasta työskennellä kuvien tai divien avulla ylhäältä vasemmalta alas oikealle, koska se virtaa luonnollisemmin.
toiminnallisuus
Responsive design: iPad-tyyli
Katsotaanpa sen edessä, herkkä muotoilu on uskomattoman tärkeää. Enkä välitä, jos vihoitat mediakyselyjä ja nestemäisiä verkkoja, käytät niitä muutamassa vuodessa riippumatta siitä, pidätkö heistä. Odottavat sen olevan standardi web-suunnittelussa, varsinkin kun otetaan huomioon, kuinka monta erilaista näytön kokoa ja laiteratkaisua, jotka osuvat markkinoihin ja joita käytetään hälyttävän korkealla nopeudella - aina 27-tuumaisesta iMacsista iPod Touchsiin ja kaikesta välillä , ja he kaikki selailevat verkossa.
He kaikki tarvitsevat mukavan kokemuksen, ja rehellisesti kukaan ei halua tehdä eri versiota sivustostaan jokaiselle laitteelle, koska se on vain liikaa työtä. Olemme kiireisiä ihmisiä, joten tarvitsemme ratkaisun kiireisille ihmisille. Siihen kuuluu mediakyselyitä. Aion keskittyä tähän on iPad-erityisiä kyselyitä, mutta tästä voit kerätä mitä tarvitset työntääksesi kyselyt muihin näytön kokoihin. Tämän jälkeen vain muutetaan sivustosi ulkoasua näiden muuttuneiden näytön koon mukaan. Joten pudota koodi alas ja puhua siitä myöhemmin.
@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*/ }Tämän ei pitäisi olla liian hirveän vaikea nähdä, mitä täällä tapahtuu, mutta mitä teemme, käytetään mediakyselyitä " täsmällinen syntaksi hajottaa ja mahdollistaa verkkosivuston katselun heijastamisen parhaiten tietyille näytön koot. Joten sanotaan, että meillä on H1, jossa on tekstiä, joka on kooltaan 60px ... hyvin, mikä on todennäköisesti hieno iMacsille ja muille suurille työpöyille, mutta se todennäköisesti ei sovi muihin sivustoosi konservatiivisempaan iPad-näkymään . Joten mitä aiomme tehdä, on koodin sisällä:
@media only screen and (device-width: 768px) { h1: font-size 60px }Ja se kokoa iPadin näytöille sopivasti. Tietenkin nämä koot olivat vain esimerkkejä, joiden avulla voit testata sivustosi tiettyjä kokoja ja muita ennen kuin siirryt kyselyjen viimeistelemiseen, mutta tämä on menetelmä, joka säästää paljon työtä pitkällä aikavälillä (ja käyttäjän törkeää ).
HUOMAUTUS: Jos olet perehtynyt esiohjattuun ohjelmointiin, tämä on jotain, joka tulee toiseksi luonteeltaan, mitä tarkastelemme, on pohjimmiltaan "jos sitten" -selvitys selaimemme sivujen näyttämisestä. Mielestäni tämä on yksi parhaista CSS: stä, hyvin ... aina.
Hyödyllinen navigointi (laajentaminen)
Navigointi ei ole aina täydellistä sivuillamme, ja siksi meidän on toisinaan palattava piirustuspisteeseen, jotta voimme miettiä, miten me teemme sen ja jos voimme käyttää CSS3: ta auttamaan meitä.
Kuvitellaan, että meillä on navigointipalkki sivustomme yläosassa, mutta haluamme lisätä enemmän popia, kun käyttäjät ohittavat sen, antavat heille tietävän, että he voivat käyttää sitä ja että se on todella houkutteleva asia heille. Klikkaa. No, paras tapa tehdä se olisi heittää yksinkertainen webkit-siirtymä käyttäen helppokäyttöisyyttä. Joten mitä aiomme tehdä, on esimerkki nav-elementistä.
Tietenkin tässä esimerkissä sinun on tehtävä kaikki itsesi perustamiseen, me vain tarkastelemme tarkkaa ohimenevää elementtiä, joka auttaisi sinua tässä tapauksessa.
nav a {-webkit-transition: width 0.15s ease;}tai
nav a {-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */nav a:hover {-webkit-transform: scale(1.1);}Muutamia muistiinpanoja webkit-siirtymäominaisuuksista, jotta voit käyttää sitä oikein sivustossasi. Se on taikasauva periaatteessa, ja se sisältää kolme arvoa. Kiinteä ominaisuus, animaation kesto ja ajoitustoiminto (tämä vaikuttaa animaation kiihtyvyyteen tasaisemmalle vaikutukselle).
On paljon tapoja toimia näiden kanssa ja paljon resursseja siellä tässä ja tässä ja tässä . Mutta toivon, että annan sinulle esityksen siitä, mikä on heidän kanssaan mahdollista ja todella kypsää janoa ymmärryksestä, jotta voit mennä ulos ja kokeilla melko vähän. On hauskaa olla täällä.
Ja niin pääsemme matkan loppuun. Huomaa vain, että tämä ei ollut tyhjentävä tai täydellinen luettelo mistään keinoin, mutta toivon, että se herätti kiinnostuksesi joihinkin kiinnostaviin asioihin, joita voit tehdä CSS: llä ja CSS3: lla. Se on hullu ja viihdyttävä maailma ajoittain ja joskus turhauttavaa.
Loppujen lopuksi me kaikki tiedämme, miten se on, kun suunnittelija ei saa juttua näyttämään lapsesi elementtiä kunnolla, tai kun tekstielementti ei ole aivan tekemässä mitä haluat.
Joten pidä yhteyttä lempisuunnittelijoihisi ja kehitä ystäväpiiriä tässä tilassa, jossa voit kommunikoida ja jakaa näitä temppuja edestakaisin, koska tiedän, että olen oppinut suurimman osan siitä, mitä olen jakanut tänään ja minulla on sanoa mielestäni se on paras asia mitä voit tehdä web-suunnittelija. Twitter on erinomainen resurssi, ja hausta [dot] twitteristä vielä parempaa. Sillä välin jätän kokeilemaan, mutta ei ennen viimeistä virkettä.
Mene ulos nuoresta Padawanista ja pelaa hauskaa, joka odottaa sinua web-suunnittelijana villin tyylin ja muotoilun maailmassa CSS: ssä (3).
Mitkä ovat suosikkiasi uusia CSS3-tekniikoita? Tai vähän käytettyjä / vähän tunnettuja CSS-tekniikoita? Kerro meille kommentit!