Pyöristetyt kulmat Dreamweaverilla

[riston]

Niin, olisiko jotain helppoa keinoa tehdä pyöristettyjä kulmia nettisivuille Dreamweaverilla (CS3). Ne on niin hienoja....

[wanders]

Niihin ei ole käsittääkseni ns. oikeaa tapaa. Kerran asiaa ihmetellessäni törmäsin sivuun, jossa oli puolenkymmentä eri vaihtoehtoa ja jokaisella oli ns. hyvät ja huonot puolensa. En valitettavasti millään muista, missä sivu oli - mutta voin vannoa että Googlella sen löytää. Eli ei löydy valikkoratkaisua DW:stä.

[MacFinn]

Mutta Freeway Prossa tuo kulmien pyöristys on ollut vaikka miten kauan.

[Fixx]

Eipä muuten ole. Jos puhe on DIV-elementin kulmien pyöristämisestä. Freeway pyöristää grafiikan kulmat mutta ei siinä taida olla mitään tapaa tehdä suoraan tekstilaatikoille pyöristyksiä. Tätä olen toivonut kyllä siellä palstalla.

Mun käsittääkseni DIViin voi määritellä nykyisin pyöreät kulmat, mutta se ei liene ihan joka selaimessa tuettu. Vanhaan malliinhan noi tehtii kulmapalagraffoilla, joka on kyllä aika sotkuinen tapa, koodissa on ihan turhaa säläkettä. Mutta toimii tietty kaikkialla.

[Coltrane]

Mun käsittääkseni DIViin voi määritellä nykyisin pyöreät kulmat, mutta se ei liene ihan joka selaimessa tuettu. Vanhaan malliinhan noi tehtii kulmapalagraffoilla, joka on kyllä aika sotkuinen tapa, koodissa on ihan turhaa säläkettä. Mutta toimii tietty kaikkialla.

Suoraan CSS:stä saisi pyöristetyt kulmat, jotka toimivat Firefoxissa (-moz-border-radius) ja Safarissa (-webkit-border-radius). IE ei tietenkään tällaisia hienouksia tue, joten ominaisuudesta ei sitten olekaan mitään hyötyä ennen IE8:n julkaisua.

Tällä hetkellä fiksuin tapa toteuttaa über-coolit web2.0 pyöristetyt kulmat lienee seuraava:

Koodi: Valitse kaikki

.box {
  background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}

[OPJ]

Mun käsittääkseni DIViin voi määritellä nykyisin pyöreät kulmat, mutta se ei liene ihan joka selaimessa tuettu. Vanhaan malliinhan noi tehtii kulmapalagraffoilla, joka on kyllä aika sotkuinen tapa, koodissa on ihan turhaa säläkettä. Mutta toimii tietty kaikkialla.

Suoraan CSS:stä saisi pyöristetyt kulmat, jotka toimivat Firefoxissa (-moz-border-radius) ja Safarissa (-webkit-border-radius). IE ei tietenkään tällaisia hienouksia tue, joten ominaisuudesta ei sitten olekaan mitään hyötyä ennen IE8:n julkaisua.

Tällä hetkellä fiksuin tapa toteuttaa über-coolit web2.0 pyöristetyt kulmat lienee seuraava:

Koodi: Valitse kaikki

.box {
  background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}

Voitko vielä kertoa, että toimiiko tuo sinulla? Itse piruuttani testasin, niin FF3 eikä IE7 kumpikaan näytä grafiikkaa oikein/ollenkaan. Itse asiassa, firebugilla tarkasteltuna, se ei edes näytä CSS-määrityksiä sulkeiden sisällä lainkaan noilla asetuksilla. Jos jättää vain yhden kuvan parametrit sulkeiden sisään, heti toimii.

[Coltrane]

Mun käsittääkseni DIViin voi määritellä nykyisin pyöreät kulmat, mutta se ei liene ihan joka selaimessa tuettu. Vanhaan malliinhan noi tehtii kulmapalagraffoilla, joka on kyllä aika sotkuinen tapa, koodissa on ihan turhaa säläkettä. Mutta toimii tietty kaikkialla.

Suoraan CSS:stä saisi pyöristetyt kulmat, jotka toimivat Firefoxissa (-moz-border-radius) ja Safarissa (-webkit-border-radius). IE ei tietenkään tällaisia hienouksia tue, joten ominaisuudesta ei sitten olekaan mitään hyötyä ennen IE8:n julkaisua.

Tällä hetkellä fiksuin tapa toteuttaa über-coolit web2.0 pyöristetyt kulmat lienee seuraava:

Koodi: Valitse kaikki

.box {
  background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}

Voitko vielä kertoa, että toimiiko tuo sinulla? Itse piruuttani testasin, niin FF3 eikä IE7 kumpikaan näytä grafiikkaa oikein/ollenkaan. Itse asiassa, firebugilla tarkasteltuna, se ei edes näytä CSS-määrityksiä sulkeiden sisällä lainkaan noilla asetuksilla. Jos jättää vain yhden kuvan parametrit sulkeiden sisään, heti toimii.

En ole tuota itse kokeillut enkä taida nyt edes jaksaa. Tuo sattui vaan netissä vastaan ja vaikutti fiksulta ja loogiselta ratkaisulta.

[OPJ]

En ole tuota itse kokeillut enkä taida nyt edes jaksaa. Tuo sattui vaan netissä vastaan ja vaikutti fiksulta ja loogiselta ratkaisulta.

Joo, mutta onkin näemmä CSS3:sta, kun oikein tarkkaan tuota linkin sivua tavaa. Nythän on käytössä CSS2.1, ja sehän ei tue kuin vain yhtä elementin taustakuvaa kerrallaan. Kolmosversiossa siis jo tuki useammalle taustakuvalla, joskus tulevaisuudessa sitten

Olisikin ollut liian hyvää ollakseen totta.

Noita pyöreitä kulmia voi tosiaan kaiken maailman javascript-css-hölöplöö -jutuilla toteuttaa, itsekin olen joutunut pari kertaa käyttämään. Ovat periaatteessa hyviä, ja IEssäkin toiminevat, mutta niissä kun on AINA jotain, minkä takia ne ei sittenkään... Esimerkiksi yhdessä tapauksessa tekstiä pystyi tuomaan elementin sisään, ja juttu toimi. Mutta kuvan kun laittoi, niin jopas levisi kuin tyttöystävän takapuoli naimisiinmenon jälkeen.

EDIT: sivuston mukaan tarkkaa syntaxia CSS3:lle ei ole määrätty ja yllä oleva esimerkki on ehdotus, joka toimisi ainakin Safarissa?

[Coltrane]

En ole tuota itse kokeillut enkä taida nyt edes jaksaa. Tuo sattui vaan netissä vastaan ja vaikutti fiksulta ja loogiselta ratkaisulta.

Joo, mutta onkin näemmä CSS3:sta, kun oikein tarkkaan tuota linkin sivua tavaa. Nythän on käytössä CSS2.1, ja sehän ei tue kuin vain yhtä elementin taustakuvaa kerrallaan. Kolmosversiossa siis jo tuki useammalle taustakuvalla, joskus tulevaisuudessa sitten

Olisikin ollut liian hyvää ollakseen totta.

Noita pyöreitä kulmia voi tosiaan kaiken maailman javascript-css-hölöplöö -jutuilla toteuttaa, itsekin olen joutunut pari kertaa käyttämään. Ovat periaatteessa hyviä, ja IEssäkin toiminevat, mutta niissä kun on AINA jotain, minkä takia ne ei sittenkään... Esimerkiksi yhdessä tapauksessa tekstiä pystyi tuomaan elementin sisään, ja juttu toimi. Mutta kuvan kun laittoi, niin jopas levisi kuin tyttöystävän takapuoli naimisiinmenon jälkeen.

EDIT: sivuston mukaan tarkkaa syntaxia CSS3:lle ei ole määrätty ja yllä oleva esimerkki on ehdotus, joka toimisi ainakin Safarissa?

Minulle oli kyllä alusta alkaen selvää, että tuo on CSS3:sta, kun eihän CSS2:lla tuollaisia hienouksia pääse tekemään. Moka tapahtui sen sijaan siinä, että luulin Firefox 3:n jo tukevan CSS3:sta. Eipä ole tullut tehtyä mitään webbisivuja vähään aikaan ja saman tien sitä on näköjään pudonnut kehityksestä kärryiltä Eli my bad, sorry.

[Macco]

Javascriptillähän saa näprättyä pyöreät kulmat laatikoihin, kuviin tai vaikka flasheihin

[OPJ]

Minulle oli kyllä alusta alkaen selvää, että tuo on CSS3:sta, kun eihän CSS2:lla tuollaisia hienouksia pääse tekemään. Moka tapahtui sen sijaan siinä, että luulin Firefox 3:n jo tukevan CSS3:sta. Eipä ole tullut tehtyä mitään webbisivuja vähään aikaan ja saman tien sitä on näköjään pudonnut kehityksestä kärryiltä Eli my bad, sorry.

Minäkin vähän ihmettelin, että onko multa mennyt jotain ohi Ja olin itsekin siinä uskossa, että FF3 tosiaan tukisi jo edes alustavasti tuota kolmosta. Nooh, oppia ikä kaikki ja parempia aikoja odotellessa.

[OPJ]

Javascriptillähän saa näprättyä pyöreät kulmat laatikoihin, kuviin tai vaikka flasheihin

Joo, onhan noita, mutta kuten tuossa aiemmin totesin, ei toimi kaikissa tapauksissa niin kuin pitäisi. Ongelmia tulee lähes poikkeuksetta joko a) IE:n kanssa tai b) elementin sisään, jonka kulmat on pyöristetty, sisään tuotavan sisällön kanssa (muu kuin teksti). Paras vaihtoehto mielestäni on, että tekee diveillä tai taulukolla hässäkän ja asettelee siihen nurkat kuvina. Toistaiseksi hankalaa, mutta sentään voi käyttää png-kuvia, jolloin pyöreiden kulmien kanssa ei tule näitä anti-aliasointi-ongelmia (legomaisuuden saa pois, mitä aina esiinty gif-kuvissa, jos on kirjavasävyinen tausta). Toimivia png-fixejä sentään IE:llekin löytyy.

[barcoder]

Itse tein joskus aikanaan niin että tein kulmapalat giffeinä, sitten rakensin 3x3 soluisen tablen jonka nurkissa siis kulmapalat, keskimmäisessä solussa sisältö. Tallensin ko. kokonaisuuden objektiksi kirjastoon. Aina kun tarvitsin sitä jossain, vedin sen paikalleen, irroitin kirjastosta (detach) ja säädin keskimmäisen palstan leveyttä tai 2. rivin korkeutta niin että boxin koko oli oikea....

Halutun kokoisen boxin pyöritetyillä kulmilla sai tehtyä n. 15 sekunnissa. Mulla oli useampi värivaihtoehto valmiina. Täysin uuteen väriin täytyi käydä värjäämässä uudet kulmapalat. Dreamweaver CS3:n PSD-tuen myötä sekin helpottui kun tekee alunalkaajaan kulmapalat PSD-muotoon niin niitä pääsee muokkaamaan yhdellä napin painalluksella.

[Coltrane]

Minä olen tehnyt laatikoihin pyöristettyjä kulmia siten, että tekee ensin kuvatiedostoiksi laatikon "kannen" ja "pohjan". Sitten tekee divin ja laittaa sen taustaväriksi saman kuin kuvatiedostoissa. Lopuksi html-tiedostossa laittaa ihan raa'asti img-tagilla divin alkuun ja loppuun nämä kuvaelementit. Idioottimainen ratkaisu, mutta toimii.

[barcoder]

Minä olen tehnyt laatikoihin pyöristettyjä kulmia siten, että tekee ensin kuvatiedostoiksi laatikon "kannen" ja "pohjan". Sitten tekee divin ja laittaa sen taustaväriksi saman kuin kuvatiedostoissa. Lopuksi html-tiedostossa laittaa ihan raa'asti img-tagilla divin alkuun ja loppuun nämä kuvaelementit. Idioottimainen ratkaisu, mutta toimii.

Miten tossa toimii kulman pyöristyksen ja divin nurkan väliin jäävä tyhjä "reikä"? Jos kansi/pohja on osittain läpinäkyvä GIF niin Divin taustavärihän vuotaa sieltä ja pyöristys "sulautuu" siihen...? Jos kansi/pohja taas ei ole osittain läpinäkyvä niin silloin sivun taustaväri on oltava tiedossa kuvia tehtäessä...? Vai onks tossa joku kikkavitonen mitä en vaan hoksannu....

Onnistuuko boxin leveyden muuttaminen ilman että kansi/pohja-kuvaa pitää muuttaa?

[Macco]

Minä olen tehnyt laatikoihin pyöristettyjä kulmia siten, että tekee ensin kuvatiedostoiksi laatikon "kannen" ja "pohjan". Sitten tekee divin ja laittaa sen taustaväriksi saman kuin kuvatiedostoissa. Lopuksi html-tiedostossa laittaa ihan raa'asti img-tagilla divin alkuun ja loppuun nämä kuvaelementit. Idioottimainen ratkaisu, mutta toimii.

Miten tossa toimii kulman pyöristyksen ja divin nurkan väliin jäävä tyhjä "reikä"? Jos kansi/pohja on osittain läpinäkyvä GIF niin Divin taustavärihän vuotaa sieltä ja pyöristys "sulautuu" siihen...? Jos kansi/pohja taas ei ole osittain läpinäkyvä niin silloin sivun taustaväri on oltava tiedossa kuvia tehtäessä...? Vai onks tossa joku kikkavitonen mitä en vaan hoksannu....

Se taustaväri on tiedettävä. Tai sitten:

Koodi: Valitse kaikki

<div style="width: 500px;">
<img src="ylakuva.gif">
<div style="background: #fff;">Sisältöä</div>
<img src="alakuva.gif">
</div>

[Coltrane]

Aivan kuten Macco sanoi. Eli on aikamoisen surkea purkkaviritys tuo tekniikka. CSS3:sta odotellessa...