Ett av de största problemen med alla nya CSS3-egenskaper är att de flesta har flera webbläsarspecifika implementeringar. Det betyder att när du vill ha en enkel skugga måste du komma ihåg en hel del kod för att göra den kompatibel över så många webbläsare som möjligt.
För att hjälpa dig med den här uppgiften har en massa otrygga kodare skapat gratis interaktiva verktyg som ger enkla användargränssnitt som spottar ut all kod du behöver med ett fullständigt anpassningsbart slutresultat. Nedan hittar du över tjugo av dessa CSS3 generatorer.
CSS3 Generator
Definitivt ett av de mest populära alternativen. Alla effekter är fullt anpassningsbara och du kan välja bland alla populära CSS3 egenskaper.
CSS3 snälla
Ett annat riktigt populärt alternativ, här låter dig redigera koden precis som du skulle se den i en kodredigerare. Ändringarna återspeglas i en grafik längst upp till höger.
CSS3 Klicka på diagrammet med Impressive Webs
Inte mycket anpassningsbar (klicka bara för att se koden) men förmodligen den mest noggranna på listan så mycket som antal effekter som omfattas.
CSS-Tricks Button Maker
En utmärkt liten knappmakare från Internet Wiz Chris Coyier. Använd bara reglaget för att ändra egenskaper.
Border Radius
Ett av de mer eleganta alternativen för att ställa in en gränsenradie. Skriv bara in ett enda nummer och det gör resten.
Font Ekorre @ Font-Face Kit Generator
Detta är överlägset mitt favoritverktyg på listan. Ladda upp ett teckensnitt och detta kommer att spita ut allt du behöver för att inbädda det till en webbplats, inklusive HTML, CSS och flera typsnitt filformat. Du vill definitivt bokmärke den här!
Westciv
Westciv har ett antal användbara CSS3-generatorer som är både fria och lätta att använda. Kolla in dem nedan.
- CSS3 Gradienter
- CSS3-textskuggor
- CSS3 transformerar
- CSS3 Text Stroke
- CSS3 Radial Gradients
- CSS3 Box Shadows
CSS3 Gradient Generator
Använd några enkla dropdowns och en reglage hjälper till att skapa komplexa gradienter.
Widgetpad CSS3 Generator
En annan med flera egenskaper och effekter att välja mellan.
Border Image
Border-image är en ganska komplicerad ny CSS3-funktion. Ta reda på hur allt fungerar med hjälp av det här verktyget.
Knappgenerator för torr ikoner
En fantastisk knappgenerator med massor av alternativ.
CSS hörn
Den här hanterar för närvarande gradienter och avrundade hörn och lovar fler alternativ på vägen snart.
CSS3 Maker
Super slick och lätt att använda, den här hanterar en hel del CSS-tricks.
CSS3 rundad hörngenerator
Ännu en annan grundläggande rundad hörngenerator.
CSS3 menynerator
Den här är faktiskt en fulländad nedladdningsbar applikation för att skapa komplexa CSS3-menyer med rundade hörn, gradienter och mer.
CSS3-kolumngenerator
En av de få kolumngeneratorer jag kunde hitta (CSS3 Generator gör också kolumner). Den här är inte på engelska men det är fortfarande lätt att räkna ut och koden som det spetsar ut är naturligtvis helt läsbar.
Snabb 3-färg CSS3 Gradient Generator
En sista CSS-gradientgenerator, bara om 10 eller så ovan inte uppfyller ditt lustbehov.
Slutsats
Jag hoppas att verktygen ovan hjälper dig att lära dig att vara en CSS3-mästare. För ännu mer CSS3 godhet kolla CSS-Infos och CSS3 Pie. CSS-Infos är en stor lista över CSS-egenskaper tillsammans med vilka webbläsare som stöder dem och CSS3 Pie är en resurs för att få bra gamla IE för att visa CSS3 korrekt.
Lämna en kommentar nedan och låt oss veta vad din favorit CSS generatorer är och om vi lämnade någon ut.