50+ Awesome CSS3 tækni fyrir betri hönnun
CSS3 er að ná skriðþunga, þrátt fyrir að staðalinn hafi ekki einu sinni verið lokið.
Það eru hundruðir námskeið þarna úti til að kenna hönnuðum hvernig á að nota það, en því miður eru mörg þau sömu jörðu.
Og sumar kennsluefni kenna hönnuðum að gera hluti sem þeir gætu ekki hugsað sér eins gagnlegar, þó að tæknin sé venjulega aðlagast til að passa verkefnið fullkomlega.
Hér fyrir neðan eru meira en fimmtíu ógnvekjandi CSS3 námskeið. Margir eru stranglega CSS og HTML byggðar á meðan aðrir eru einnig með JavaScript.
Ef þú ert með uppáhalds tækni eða einkatími sem ekki er að finna hér fyrir neðan skaltu deila því í athugasemdum!
Notkun CSS3 fyrir óþægilega mynd
Ýmsar nýjar aðferðir í CSS3 leyfa mörgum mjög flóknum grafíkum að búa til með því að nota hreint CSS og engar myndir. Hér eru handfylli af bestu dæmunum þarna úti.
Pure CSS iPhone Mynd
Blöndu af landamærum, umbreytingum og stigum til að búa til hreyfimyndir af iPhone.
Búa til óperuflettitáknið í CSS3
Hreinn mynd af óperumerkinu sem er veitt með CSS3 tækni.
Sólkerfið okkar með CSS3
A slick útlit af sólkerfinu með hreyfimyndum ..
Analog klukkaáhrif
Búðu til flottan hliðstæða klukku með aðeins CSS3 og jquery.
Shadow Experiments
Þessi einkatími sýnir hvernig á að nota CSS skuggi til að búa til margs konar áhrif, þar á meðal grafíska dökk hliðina, skyggða regluborð og jafnvel geðdeildar "ástþráður".
Búa til Polaroid Style myndir með bara CSS
Þessi einkatími notar bæði CSS2 og CSS3 áhrif til að bæta Polaroid stíl við einfaldan lista yfir myndir.
CSS3 Texti, Layout og Litur Áhrif
CSS3 er hægt að nota fyrir mikið af mismunandi ímyndum fjör og grafík, en það er líka frábært fyrir skipulag, texta og litavirkni sem þú gætir áður fengið í Photoshop.
Utilitzing CSS3 dálkar
Kóðun á hreinum CSS3 mát með mörgum dálkum.
Almennt CSS3 innleiðing
Yfirlit yfir ávinninginn af CSS3.
Styling Tenglar við CSS3
Fjórar mismunandi leiðir til að stilla mismunandi gerðir tengla við CSS3
CSS3 lóðrétt samdráttur
Stigsetningar og umbreytingar gera þennan dráttarvalsvalmynd sem brýtur niður í röðarlista á eldri vöfrum.
Super ógnvekjandi CSS3 hnappar
Lituðu hnakkatakkar með dropaskugga sem vinna á ljósum eða dökkum bakgrunni og þurfa ekki myndir!
Photoshop Style Buttons með CSS3
Samanburður hliðar við hlið á hvernig á að búa til CSS3 hnappa án mynda og með Photoshop.
Css gráðu textaáhrif
Leiðbeiningar um að gera einstaka textaáhrif með því að beita áferðarkorti í texta. Þú getur notað stig eða mynstur til að virkilega gera textaskjóta.
Sumir CSS3 valkostir við JavaScript áhrif
7 leiðir til að skipta yfir algengum JavaScript-áhrifum með CSS3 til að fá síðuna þína tilbúinn til framtíðar.
Upphleypt CSS3 textaáhrif
Búa til upphleypt textaáhrif án Photoshop vafrahnappa.
Skilningur á CSS3 litum
Allt um nýju litavalið sem er í boði með CSS3.
Búa til mikil áhrif með CSS3
Hægt er að sameina CSS umskipti og umbreytingu til að gera margs konar áhrif.
Búa til CSS3 Bokeh Áhrif
Hæfni til að nota stig og gagnsæi með CSS3 gerir þessa klassíska áhrif möguleg.
CSS3 dálkar
Góð myndskeið um hugmyndina um að nota CSS3 dálka fyrir skipulag.
Fancy Lists með CSS3
Kaldur punktamerki listastíl með CSS3 til að gera ímyndaðu stikla.
Mjög Slick Imageless Infoboxes með CSS3
Aðferðirnar sem gerðar eru af CSS3 gera þessi kassar virkilega að skjóta.
Talbólur
Border-radíus og umbreyta gervi-þættir gera þessar gerðir mögulegar.
Flash-Style Image Transition Effects
Snjall leið til að nota CSS hreyfimyndin.
Afþreying Tumblr er uppfærsla skjá með CSS3
A CSS3 hönnun áhrif sem niðurbrot vel fyrir eldri vöfrum.
Lúmskur CSS3 ritgerð sem þú vilt sverja var gerð í Photoshop
Þessi 13 mínútna vídeóleiðbeining mun sýna þér hvernig á að búa til fallega, lúmskur 3D typographic áhrif alveg með CSS3.
Textasnið með CSS
Hér er örlítið eldri tækni sem sýnir hvernig á að búa til textaskilaboð með vafra sem snúa að því að samræma lóðréttri ás.
Búðu til letterpress áhrif með CSS textaskugga
Þessi Line25 kennsla mun sýna þér hvernig á að nota texta-skuggi til að búa til stafrænt áhrif á texta vefsvæðis þíns.
Awesome CSS3 Lightbox Gallery með jQuery
Þessi kóða skapar myndavél með Polaroid-stíl með dráttar-og-slepptu hlutdeildarvalkosti.
Ógnvekjandi yfirborð
Þessi einkatími frá Zurb sýnir hvernig á að búa til myndyfirlit með því að nota CSS3 landamæri sem hægt er að nota til að birta viðbótarupplýsingar um mynd þegar sveiflast á.
Awesome Inline Form Merkingar
Þessi einkatími sýnir þér hvernig á að búa til sniðmát sem ekki hverfa þegar gestir byrja að slá inn.
CSS3 3D áhrif
Hreyfimynd CSS3 teningur
Einstakt 3D líflegur teningur með 3D umbreytingum með CSS. Hægt er að snúa teningnum með örvatakkana til að sýna upplýsingar sem birtast á hverju andliti.
CSS3 3D tætlur
Gefðu þér dýpri hönnun með því að nota þessar einfalda CSS3 CD tætlur.
Hreyfimyndir 3D Scroller
Sýnir kvikmyndatökur með myndritum með ótrúlegu 3D sjónarhorni í CSS3.
3D CSS3 Coke Can
Að draga rennistiku gerir þetta raunverulegur kók getur rúllað fram og til baka.
CSS skuggi
Skapandi stílskuggi með því að fjarlægja þá frá frumgerðinni.
CSS3 Fjör
Óákveðinn greinir í ensku Hreyfimynd af Fail Whale Twitter með CSS3
Mjög glæsilegur notandi CSS3 sem kemur á óvart verulega nokkuð vel í eldri vöfrum.
Parallax Starfield Bakgrunnur
Stjörnur fara frá vinstri til hægri á bak við efnið þitt með þessu klassíska rými í ferðalögum.
Sýnir og felur í sér efni með CSS3
Stækkunar- og samningsbakki og valmyndartré án javascript.
Fljótandi fylgjast með flipa með CSS3
Settu leiðsögnina þína eða snertingartákn í nánasta ná með þessari gagnlegu aðferð.
CSS3 Drop-in Modal Windows
A par af sameiginlegum modal gluggum mynda með CSS3 áhrif og umbreytir.
Spinners nota aðeins CSS3
Búa til hleðslu hreyfimynd með því að nota aðeins CSS3 og engin hreyfimyndir!
Sýnir félagsleg tákn með því að nota CSS3
Auðvelt að hverfa með því að sýna félagsleg tákn með því að nota hreint CSS3.
CSS3 Cartoon Teiknimyndir
Búa til heilt flassstíll fjör með aðeins CSS3 og jquery.
Hreyfimynd með CSS3
Fjöll og ský og vatn allt líflegur með CSS3.
Nice Hreyfimyndir Skírnarskrár
CSS3 umbreytingar leyfa þér að gera ótrúlega hluti með texta texta. Hér er eitt dæmi.
An Elastic Thumbnail Valmynd
A röð af myndum sem stækka og draga inn þegar sveima yfir.
Staflað, Dynamic Index Cards
Frábær fjör áhrif sem hægt væri að beita á ýmsum hönnun.
A litríkt klukka með CSS & jQuery
Þessi kennsla sýnir hvernig á að búa til mjög frábæra litríka klukka með CSS og jQuery, sem samanstendur af þremur aðskildum hringleikum sem innihalda klukkustundir, sem sýna klukkustundir, mínútur og sekúndur.
Pure CSS3 At-At Walker
Þetta er glæsilegt dæmi sem notar CSS3 (engin JavaScript, nei Flash) til að búa til hreyfimynda At-At Walker frá Star Wars. Eina hæðir er að það er aðeins sýnilegt í vafra Webkit (Safari og Chrome).
Búðu til jQuery Content Renna með Pure CSS
Lærðu að búa til eingöngu CSS jQuery-stíl renna með þessari einkatími.
CSS3 Dropdown Valmynd
Þessi einkatími frá WebDesignerWall sýnir hvernig á að búa til CSS3 valmynd sem virkar í vafra sem virkar einnig í vafra sem styðja ekki CSS3 (þó með takmarkaðan stíl).
Skrifað eingöngu fyrir WDD eftir Cameron Chapman .
Ef þú veist af öðrum hágæða CSS3 námskeiðum sem ekki voru fjallaðar hér að framan og þú vilt deila, vinsamlegast gerðu það í athugasemdum!