26 besökare, 1 medlem och 12 Studenter är online nu
Loopia

CSS (Cascading Style Sheets)

Knappar (buttons) med CSS

Nu kan du skapa knappar (buttons) utan att använda bilder! Genom att kombinera runda hörn (border-radius), skugga (box-shadow), övertoning (gradient) och opacitet (opacity) kan du ge knapparna nästan samma utseende som du tidigare bara kunnat göra i ett bildbehandlingsprogram som tex Photoshop.

Exemplet nedan visar knappar som är gjorda i CSS utan bilder:

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.

 

Du kan även placera knapparna i en menylist:

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.

Tips! När du arbetar med övertoningar kan du använda en "CSS Gradient Generator" där du får CSS-koden och kan klippa/klistra den till din egen kod. Du kan även importera övertoning från en bild och få det omvandlat till CSS-kod. Du kan importera din egen CSS-kod och bearbeta övertoningen för att byta färg eller göra den mörkare. Byt nyans (Hue) eller mättnad (Saturation) i färgen för att få exakt den övertoning du vill ha.

http://www.colorzilla.com/gradient-editor Öppnas i nytt fönster (Open in new window) 

http://www.cssmatic.com/gradient-generator Öppnas i nytt fönster (Open in new window)