20+ gratis CSS3-kodegeneratorer

Et av de største problemene med alle de nye CSS3-egenskapene er at de fleste av dem har flere nettleserspesifikke implementeringer. Dette betyr at når du vil ha en enkel skygge, må du huske ganske mye kode for å gjøre den kompatibel på så mange nettlesere som mulig.

For å hjelpe deg med denne oppgaven har en haug med tilbakeslagsfrie kodere laget gratis interaktive verktøy som gir enkle brukergrensesnitt som spytter ut all koden du trenger med et fullt tilpassbart sluttresultat. Nedenfor finner du over tjue av disse CSS3-generatorene.

Utforsk designressurser

CSS3 Generator

Definitivt et av de mest populære alternativene. Alle effektene kan tilpasses fullstendig, og du kan velge mellom alle de populære CSS3-egenskapene.

CSS3 vær så snill

Et annet virkelig populært alternativ, dette lar deg redigere koden akkurat som du ville se den i en koderedigerer. Endringene gjenspeiles på en grafikk øverst til høyre.

CSS3 Click Chart av Imponerende Webs

Ikke veldig tilpassbar (bare klikk for å se koden), men sannsynligvis den mest grundige på listen så langt som antall effekter dekket.

CSS-Tricks Button Maker

En utmerket liten knappemaker fra internett-wiz Chris Coyier. Bare bruk glidebryterne for å endre egenskapene.

Grensradius

Et av de mer elegante alternativene for innstilling av en grensradius. Bare skriv inn et enkelt tall, og det gjør resten.

Font Squirrel @ Font-Face Kit Generator

Dette er uten tvil mitt favorittverktøy på listen. Last opp en font, og dette vil spytte ut alt du trenger for å legge den inn på et nettsted, inkludert HTML, CSS og flere fontfilformater. Du vil definitivt legge merke til denne!

Westciv

Westciv har en rekke nyttige CSS3-generatorer som både er gratis og enkle å bruke. Sjekk dem ut nedenfor.

  • CSS3-gradienter
  • CSS3 Tekstskygger
  • CSS3 Transformer
  • CSS3 tekststrek
  • CSS3 Radial Gradients
  • CSS3 Box Shadows

CSS3 Gradient Generator

Bruk noen enkle nedtrekksvinduer og en glidebryter for å lage komplekse graderinger.

Widgetpad CSS3 Generator

En annen med flere egenskaper og effekter å velge mellom.

Grensebilde

Border-image er en ganske komplisert ny CSS3-funksjon. Finn ut hvordan det hele fungerer ved hjelp av dette verktøyet.

Dry Icons Button Generator

En fantastisk knappegenerator med massevis av alternativer.

CSS hjørner

Denne håndterer for øyeblikket stigninger og avrundede hjørner og lover flere alternativer på vei snart.

CSS3 Maker

Super glatt og enkel å bruke, denne håndterer ganske mange CSS-triks.

CSS3 Rounded Corner Generator

Nok en grunnleggende avrundet hjørnegenerator.

CSS3 menygenerator

Denne er faktisk et fullverdig nedlastbart program for å lage komplekse CSS3-menyer med avrundede hjørner, graderinger og mer.

CSS3 kolonnegenerator

En av få kolonnegeneratorer jeg kunne finne (CSS3 Generator gjør også kolonner). Denne er ikke på engelsk, men er fremdeles enkel nok til å finne ut, og koden den spytter ut er selvfølgelig fullt lesbar.

Rask 3-fargers CSS3 gradientgenerator

En siste CSS-gradientgenerator, bare i tilfelle at 10 eller så over ikke tilfredsstiller gradienten din.

Konklusjon

Jeg håper at verktøyene ovenfor hjelper deg å lære deg å være en CSS3-mester. For enda mer CSS3-godhet, sjekk ut CSS-infos og CSS3-pai. CSS-Infos er en enorm liste over CSS-egenskaper sammen med hva nettlesere støtter dem og CSS3 Pie er en ressurs for å få gode gamle IE til å vise CSS3 riktig.

Legg igjen en kommentar nedenfor og la oss få vite hva dine favoritt CSS-generatorer er, og om vi slapp noe.

© Copyright 2024 | computer06.com