CSS3 er endurbætt útgáfa af Cascading Style Sheets forskriftinni, og það kemur með mörgum heillandi eiginleikum sem gjörbylta vefútlit og hönnun, auk annarra kosti.

En það hefur einnig nokkur ókostur og að takast á við þær krefst smarts. CSS3 er nýtt á markaðnum, svo það er enn mikið til að bæta.

Helstu vandamálið er að eiginleikar eru vafra-sérstakar og ekki auðvelt að framkvæma yfir vafra. Hönnuðir verða að bæta við aukakóða til að geta framkvæmt eiginleika á sama hátt yfir vafra.

Í þessari grein munum við vekja athygli á sumum árangursríkum CSS3 sjálfvirkum rafallartólum sem geta aðstoðað forritara, sérstaklega latur sjálfur! - með fullt af verkefnum. Mesta kosturinn við þessi verkfæri er að þeir leyfa fullri customization, sem þýðir að einhver getur notað þau með vellíðan.

1. CSS3, takk!

CSS3, vinsamlegast er multipurpose tól með fjölhæfur lögun eins og border-radius , box-shadow og línuleg stig. Það er netforrit sem sýnir strax árangur á hægri hlið gluggans og hjálpar verktaki að búa til gagnlegt CSS3 kóðann í vafra. CSS3, vinsamlegast var hannað af Paul Irish og Jonathon Neal.

2. CSS3 Generator

CSS3 Generator hjálpar verktaki að búa til flettitæki fyrir mismunandi CSS3 eiginleika. Það gefur verktaki fulla customization virkni, þar á meðal border-radius , text-shadow , RGBa, kassalífsgreining og endurstillingu kassa. Smelltu bara á einfaldan fellilistann og búðu til kóðann fyrir viðkomandi áhrif.

3. Border Radius

Border Radius gerir hönnun þína glæsilegari með minni áreynslu. Sláðu inn viðeigandi gildi, og það mun búa til kóða fyrir rétthyrninga með mismunandi forskriftir á landamærum. Notaðu það til að gera hönnun yndisleg.

4. CSS3 Maker

CSS3 framleiðandi er duglegur tól sem kemur með fellilistanum og ýmsum öðrum valkostum, þ.mt kassaskipting, yfirlitsvalsar og spenni. Sláðu bara inn viðeigandi gildi í reitunum og kóðinn er búinn til ásamt forsýningu. Kóðinn er fáanlegur til niðurhals.

5. Button Maker

Chris Coyier kynnir glæsilegt tól á CSS-bragðarefur til að hanna stílhrein 3-D hnappa. Með Button Maker , einfaldlega færa renna til að stilla topp og neðst stig, sveifar bakgrunnslit, sveifla texta lit og svo framvegis til að fá viðkomandi hnapp þinn á engan tíma.

6. CSS3 PIE

CSS3 PIE kemur með fljótlegan kynningu og nokkrar stýringar til að framkvæma nokkrar CSS3 eiginleika, svo sem border-radius , box-shadow og línuleg halli. Færðu stjórnina til að sjá breytingar í meðfylgjandi kassa. Þá skaltu merkja í reitinn til að sýna CSS kassann og skoða mynda númerið.

7. Widget Pad

Widget Pad geta aukið CSS3 getu sem kynnt er í Webkit vafra með einföldum en árangursríkum sjálfvirkri rafall. Það nær yfir CSS eiginleika eins og ógagnsæi, ávalar horn, umbreytingar og fleira.

8. CSS3 Gen

CSS3 Gen er handvirkt tól fyrir nýliði verktaki. Notaðu stjórnina til að gera framsækið skipulag: Búðu til ávalar horn, bætið skuggaáhrifum við hvaða reitahluta og spilaðu með flottum textaáhrifum. Tækið hjálpar einnig verktaki með því að tilgreina eindrægni kóðans með vafra.

9. CSS3 Valmynd

A flottur fellilistanum með mörgum gagnvirkum eiginleikum er aðeins nokkra smelli í burtu. Gerðu hönnunina glæsilegur með CSS3 Valmynd . Það nær yfir ávalar hornum, stigum og margt fleira. Tólið dregur úr kóðunartíma til að fá stílhrein valmyndir. Bara hlaða niður kóðanum og fella það í samræmi við kröfur þess.

10. Hringlaga Horn Generator

CSS Portal hefur búið til fjölhæfur tól til að búa til kóða fyrir ávalar horn, sem gera vefútlit líta flottur út. The Hringlaga Horn Generator gerir það auðvelt að búa til sérsniðna kóða fyrir öll horn í einu eða öðru horni við hornið.

11. CSS3 Smella Mynd

CSS3 Smella Mynd hjálpar með miklum áhrifum eins og RGBa litum, kassaskuggum, geislalengdum og snúningi. Verktaki getur stillt bakgrunnsstærðir og gefið texta ótrúlega höggáhrif. Hins vegar hefur tólið ekki margar sveigjanlegar valkosti til að sérsníða kóða. Samt er það árangursríkt sjálfvirk rafall sem getur sparað tíma.

12. CSS3 veljari próf

CSS3 veljari próf er lokið próf föruneyti sem býr sjálfkrafa ýmsar litlar prófanir til að meta hvort vafra er samhæft við CSS selectors. Ef það uppgötvar samhæfismál, markar það það. En það snertir ekki vel með notendahópnum völdum vegna tæknilegra takmarkana.

13. Gradient Generator

Litir geta verulega breytt hönnun. Gradient Generator gerir þér kleift að hanna þriggja lita halli á sekúndu. Veldu bara byrjun, umskipti og endalitir. Það býr þannig til hallans, með litunum sem eru á bilinu jafnt frá hvor öðrum. Takaðu kóðann og farðu.

14. Border-mynd-rafall

Border-mynd-rafall er spennandi CSS3 tól sem þú getur notað til að búa til kyrrmyndir á landamærum með því að stilla renna. Fáðu strax kóða fyrir border-radius eign. Veldu hvaða mynd sem er og notaðu það til að stilla bakgrunn og landamæri tiltekins þáttar og gefa hönnuninni töfrandi útlit.

15. Westciv

Westciv er bókamerki safn af verkfærum. Notaðu XRAY til að sjá stöðu, marmar, padding og margar fleiri upplýsingar um hvaða þáttur. Hafrannsóknastofnunin hjálpar þér að búa til bestu mögulega val fyrir tiltekna þætti. CSS3 Sandbox inniheldur stig, skuggi og CSS umbreytingar. Og enn aðrir eru sagðir koma fljótlega.

16. Xeo CSS

Xeo CSS er gagnvirkt tól með skrifborð-eins og reynslu. Það hjálpar forritara og byrjendur að hanna CSS og HTML síður án þess að skrifa eina línu af kóða. Það býr ekki aðeins CSS3 brotum en flokkar og ID vali. Í heildina er það frábært tól. Skráðu þig og byrjaðu að hanna óvenjulega vefútlit.

17. CSS Corners

CSS Corners gerir þér kleift að búa til ávalar horn með stigum til að gefa hönnuninni faglegt útlit. Hringlaga hornkóðinn er studd af mörgum vöfrum. Allt sem þú þarft að gera er að nota stjórnina, ásamt litlu forsýninni og fá kóðann.

18. CSS3 Stigahnappur Rafall

Hnappar geta gert hönnun líta glæsilegur - en ef þeir eru ekki hönnuð vel, gætu þau eyðilagt alla útlitið. Búðu til flottan hnappa með því að bæta við stigum og skuggum. CSS3 Stigahnappur Rafall býr til viðeigandi kóða í nokkrar sekúndur og býður upp á ýmsar stýringar, þ.mt halli, texta og sveifluáhrif.

19. Spritebox

Spritebox er WYSIWYG tól ("það sem þú sérð er það sem þú færð"), og hjálpar verktaki að búa til CSS flokkar og kennitölur úr einni sprite mynd. Dragðu-og-sleppa valkosturinn gerir þetta tól ánægjulegt gagnvirkt. Spritebox styður marga vafra, svo eindregið er hægt að leysa eindrægni. Veldu hvaða hluta af mynd, sem hægt er að sækja frá hvaða vefslóð sem er hlaðið upp úr tölvu, og tilgreindu heiti klasans. Tólið mun sjálfkrafa búa til CSS reglur fyrir bakgrunnsstöðu.

20. Gradient Editor

Gefðu hönnuninni litríka ennþá samsett útlit með Adobe-svipuðum eiginleikum í Gradient Editor . Hanna gagnsæ CSS stig og bæta við ímynda, fade-out, hálf-gagnsæi og svipuð áhrif til að fá litríka halli hnappinn.

21. CSS3 leiksvæði fyrir Mike Plate

Mike Plate (vefur og hreyfanlegur verktaki) kynnir ótrúlegt tól á netinu, CSS3 Leikvöllur , sem auðveldar þróun margs konar eiginleika, þ.mt texta skuggi, umbreytir og hallandi bakgrunn. Þetta ótrúlega tól hefur einnig stærðarmöguleika og endurskipulagningu, með litaspjöldum og renna sem geta hjálpað þér að stilla textabox. Þegar breytingin er gerð birtist forsýningin með mynda númerinu þegar í stað.

Niðurstaða

Með CSS3 er hægt að gera kraftaverk við vefútlit. En maður þarf tæknilega færni. Hagnýtar verkfærin sem hér eru taldar munu aðstoða fagfólk sem vill búa til eins mikið vafraforrit og hægt er fyrir ýmsar CSS3 eiginleika og þeir munu einnig hjálpa þeim sem eru nýir í hönnunarsviðinu.

Nokkuð sem við höfum misst af? Hvaða CSS3 verkfæri treystir þú mest á?