Eli suoraan asiaan...
Miten nettisivujen tylsistä, suorakulmaisista reunuksista saisi tehtyä pyöreät, jne. Kuten esim. putkassa nuo haku, uusimmat koodivinkit ja putkapostilaatikoiden ympärillä oleva harmaa alue. Kuvia ei kai tuollaiseen tarvi?
https://www.ohjelmointiputka.net/img/vvalipyla.
Eli tässä ne on tehty kuvalla, tosin IE:n PNG-läpinäkyvyyksien bugi tekee tuosta vähän kömpelöä, jos taustalla on muuta kuin tasaista väripintaa (tympeää se säätö on silloinkin). Tosin "puhtaita" JS+CSS pyöristyksiäkin tietääkseni on.
http://virtuelvis.com/gallery/css/rounded/
En tiiä, jos joku on nykyään keksiny jo vielä paremman tavan.
Kuvillahan tuo on tietysti kaikista "puhtain" tapa toteuttaa. Itselläni on yhdessä tekemässäni projektissa homma toteutettu lisäämällä vapaavalintaisia elementtejä pyöristettävän elementin alkuun ja loppuun (tai mihin haluaa pyöristykset) niin, että elementtien korkeutta, bordereita ja marginaaleja muuttamalla saadaan pyöristysefekti aikaan. Manuaalisestihan tuo on aika ikävä toteuttaa, joten toteutin simppelin JavaScript-funktion homman tekoon. Hyvänä puolena on se, että kulmien kokoa, väriä ja sijaintia on helppo muuttaa. Lisäksi homma ei aiheuta mitään ongelmia niille joilla JS ei jostain kumman syystä ole päällä. Googlettamalla löytyy varmasti vastaavanlaisia ratkaisuja.
http://www.html.it/articoli/niftycube/index.html
http://www.cssplay.co.uk/boxes/snazzy2.html
-moz-border-radius
Nimensä mukaisesti toimii vain mozilla-selaimilla. Joko yksi arvo (px/%) tai neljä arvoa joka kulmalle.
Myanda kirjoitti:
-moz-border-radius
Nimensä mukaisesti toimii vain mozilla-selaimilla. Joko yksi arvo (px/%) tai neljä arvoa joka kulmalle.
Ja kaiken lisäksi lopputulos on varsin rumaa pikselimössöä :(
Ei aina. Minä ainakin oon saanu mukavasti toimimaan, vaikka en tuota tällä hetkellä käytäkkään. :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.
