NemProgrammering.dk logo

Gode CSS3 generatorer / CSS3 Sandbox værktøjer

  Skrevet af: Redaktionen     30-12-2012     Skrevet i: CSS og CSS3

 

kursuscsI dette indlæg vil jeg give jer en række forskellige CSS3 generatorer, som vil gøre jeres liv som web-udvikler en hel del lettere. CSS3 generatorer er online værktøjer som gør det nemt for dig, at udvikle nye CSS3 styles på en hurtig og visuel måde. Det kan til tider være et ret så tidskrævende, at skulle skrive et stykke kode, teste den, rette den til, teste den igen osv. osv. Med disse online CSS3 generatorer undgår du dette tidkrævende arbejde, da du kan sidde og rette i koderne og med det samme se, hvordan det vil se ud i browseren. Du kan altså hurtigt finde den rette skygge eller radius til f.eks din “div” ved blot et part enkelte museklik eller indtastninger.

Jeg har udvalgt tre CSS3 generatorer / sandbox værktøjer som jeg synes er rigtig nyttige. Så vidt jeg er orienteret, så bliver de alle holdt opdateret, således at de er kompatible med alle browser typer.

border-radius.com

Med denne CSS3 generator kan du hurtigt og nemt tilføje border radius på din div så dine hjørne blive helt som du vil have dem. Når du har fundet den rette form til din div kopierer du bare koden i midten og tilføjer den til den div på din side du ønsker skal have den samme styling.

CSS3 Playground

Denne CSS3 generator er lidt mere advanceret end den først. Med denne generator har du utrolig mange muligheder for at style dine elementer på en nem og visuel måde. Du kan blandt andet arbejde i CSS3 Transforms, CSS3 Text Shadow, border + outline og meget meget mere. Jeg bruger selv denne service engang imellem når jeg ikke er helt sikker på, hvordan jeg gerne vil have tingene til at se ud. I sådanne situationer er det dejligt at kunne sidde og lege lidt med værdierne for at se hvilke muligheder der er.

CSS3 Gradient Generator

Denne sidste generator kan bruges til at finde de rette farve gradienter til din elementer. Du sammensætter selv din farve-styling ved hjælp af et photoshop ligende kontrolpanel, som gør det utrolig nemt at finde den kombination man leder efter. Du sparer altså her en masse tid i forhold til, at skulle gå frem og tilbage mellem din kode og den visuelle virkning i din browser.

Hvis i selv har nogle smarte CSS3 generatorer, så er i velkommen til at smide en kommentar med et link og en lille beskrivelse! :)

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.