52 besökare, 0 medlemmar och 1 Student ä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)