[css] Rounded corners met sprites en relatieve width

[? ?]

..

[ Voor 99% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Exception]

Wat je kunt doen is via CSS de hoeken rond maken. Wordt ook hier op Tweakers.net gebruikt. Dit werkt echter (nog) niet in Internet Explorer.

Alle hoeken:

code:

border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;

Alleen linksboven:

code:

border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
-webkit-border-radius-topleft:2px;

etc.

Edit:
"- geen css3 of firefox-only oplossingen"
Sorry, niet goed genoeg gelezen.

[ Voor 15% gewijzigd door Exception op 16-07-2009 11:15 ]

[? ?]

..

[ Voor 103% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Gersomvg]

Met 4 divjes kan je een roundedcorner box maken die in de hoogte en breedte kan oprekken

Container: via achtergrond lb corner
div bovenin container (volle breedte): via achtergrond rechts gepositioneerd in div rb corner
div onderin container (volle breedte): via achtergrond links gepositioneerd in div lo corner
div in laatstgenoemde div (volle breedte): via achtergrond rechts gepositioneerd in div rb corner

Sorry.. heh even geen tijd om een plaatje te maken..

[Bosmonster]

Nu wil ik met sprites werken en de buttons kunnen de ene keer 100% width zijn, de andere keer 40px of 90px.
Tenzij dat ik voor elke andere breedte een aparte css maak met telkens uitgerekend hoeveel die background offset moet zijn, lukt me dat niet. -> dat is veel te veel werk en niet flexibel.

Je snapt het idee van het gebruik van die background volgens mij niet zo. Het idee is juist dat je hem niet met een offset instelt, maar gewoon met background-position: left/right/top/bottom. Zo hoef je niet te weten hoe groot je oppervlakte is. In principe heb je hier ook geen brede sprite voor nodig, een vierkantje met de ronde hoekjes is voldoende, die kun je dan in alle hoeken plaatsen.

Persoonlijk zou ik dat wel via een javascript oplossing doen via een CSS-class, maar je kunt de elementen natuurlijk ook gewoon direct in je html gooien. Dat laatste is wel wat bewerkelijker, zeker als je het op veel plekken wilt toepassen.

[? ?]

..

[ Voor 98% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Bosmonster]

Fastman schreef op donderdag 16 juli 2009 @ 11:28:
Maar rechts positioneren van een achtergrond lukte al met 2 divjes. Maar hoe doe je dat dan met sprites? Daar kun je niet rechts zeggen aangezien je met offsets voor je background zit, moet je daar ...px zetten ipv top right.
of kan dat toch?

Als je een background-position: right bottom toepast bijvoorbeeld, neemt ie automatisch al de positie vanuit de rechteronderhoek van de sprite. Heb je die offset helemaal niet nodig

[Knaak]

Gersompie schreef op donderdag 16 juli 2009 @ 11:21:
Met 4 divjes kan je een roundedcorner box maken die in de hoogte en breedte kan oprekken

Container: via achtergrond lb corner
div bovenin container (volle breedte): via achtergrond rechts gepositioneerd in div rb corner
div onderin container (volle breedte): via achtergrond links gepositioneerd in div lo corner
div in laatstgenoemde div (volle breedte): via achtergrond rechts gepositioneerd in div rb corner

Sorry.. heh even geen tijd om een plaatje te maken..

Echter is dit totaal zonloos als die "box" transparante hoeken moet hebben. Dan zit je toch echt vast aan border-radius. (het is wel te doen met div's, alleen teveel werk tbh)

[Bosmonster]

MOAW schreef op donderdag 16 juli 2009 @ 11:30:
[...]

Echter is dit totaal zonloos als die "box" transparante hoeken moet hebben. Dan zit je toch echt vast aan border-radius. (het is wel te doen met div's, alleen teveel werk tbh)

Ronde transparante hoekjes zul je inderdaad een andere oplossing voor moeten bedenken.

[ Voor 10% gewijzigd door Bosmonster op 16-07-2009 11:32 ]

[? ?]

..

[ Voor 98% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Matis]

Voor mijn joomla templates was het altijd divjes; linksboven, rechtsboven, rechtsonder en links onder. Die legde je over de achtergrond heen.
Tenzij je transparante corners wilt. Dan zul je er nog extra divjes bij moeten maken

Dat je sprites wilt heeft weinig tot niets te maken met de rounded corners. Dat is gewoon alleen belangrijk voor het opstellen van je CSS style positionering

[Bosmonster]

Fastman schreef op donderdag 16 juli 2009 @ 11:32:
[...]

En hoe weet dat element hoe breed het is? Kun je daar een voorbeeldje van geven?

Cascading Stylesheet:

div.rb { /* right bottom corner */
   position: absolute;
   right: 0;
   bottom: 0;
   background: url('cornerbox.png') no-repeat right bottom;
   width: 10px;
   height: 10px;
}

Snap je vraag niet zo goed, maar zo zou een corner css eruit zien.

[ Voor 7% gewijzigd door Bosmonster op 16-07-2009 11:35 ]

[Matis]

Ik doe meestal zoiets:

Cascading Stylesheet:

#whitebox {
    margin: 0;
    width: auto;
}

#whitebox div {
    text-align: left;
}

#whitebox_t {
    background: #000000 url(../images/header_top_middle.png) 0 0 repeat-x;
}

#whitebox_tl {
    background: url(../images/header_top_left.png) 0 0 no-repeat;
}

#whitebox_tr {
    height: 17px;
    padding:12px 0 0 0;
    overflow: hidden;
    background: url(../images/header_top_right.png) 100% 0 no-repeat;
}

Waarin whitebox mijn div is waar de hele tekst in kom te staan. _t is dus de bovenkant, tl links boven en tr rechtsboven.

met 100% heb je dus altijd de breedte

[ Voor 33% gewijzigd door Matis op 16-07-2009 11:39 ]

[Gersomvg]

Heb het toch even uitgewerkt
Voor degene die het interessant vinden (ik heb meestal toch geen transparante hoekjes nodig):
Demo: http://www.gersom.nl/rest/rc/

Is maar met 4 divjes

Edit:
Trouwens @ dat spritecompatibel. Mijn oplossing werkt alleen als je de LB-corner rechtsonder in je sprite zet. Anders zal je toch echt 5 divs ipv 4 nodig moeten hebben

[ Voor 39% gewijzigd door Gersomvg op 16-07-2009 11:52 ]

[? ?]

..

[ Voor 104% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Bosmonster]

Dit is een beetje het idee (wat assets gejat van Gersompie, en niet overal in getest):

http://bosmonster.nl/files/rounded-corners.html

[Gersomvg]

Dat is nog steeds niet transparant toch? ^^

[Bosmonster]

Gersompie schreef op donderdag 16 juli 2009 @ 12:17:
Dat is nog steeds niet transparant toch? ^^

nee, dat zei ik toch ook niet

Voor transparantie zul je toch wat flexibiliteit moeten laten vallen en kom je bij andere oplossingen terecht.

[ Voor 29% gewijzigd door Bosmonster op 16-07-2009 12:20 ]

[Gersomvg]

Oke Dan ga ik toch voor mijn oplossing Scheelt 2 divjes (en dat scheelt ook rendertijd wanneer je dit heel veel toepast in 1 pagina; bijv bij een accordion Wikipedia: Accordion (GUI))

[ Voor 28% gewijzigd door Gersomvg op 16-07-2009 12:22 ]

[Matis]

Mooi voorbeeld, zelfs ik heb er nog wat van geleerd

[? ?]

..

[ Voor 97% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Bosmonster]

Gersompie schreef op donderdag 16 juli 2009 @ 12:21:
Oke Dan ga ik toch voor mijn oplossing Scheelt 2 divjes (en dat scheelt ook rendertijd wanneer je dit heel veel toepast in 1 pagina; bijv bij een accordion Wikipedia: Accordion (GUI))

Het scheelt 1 divje

In principe kun je wat jij doet ook met mijn versie. Jij verplaatst echter achtergrond van de losse corner-div naar de container. Persoonlijk houd ik dat dan liever gescheiden. (Ik zou het sowieso ondocumentready toevoegen aan de elementen, dat is wat makkelijker in beheer en onderhoud)

[ Voor 27% gewijzigd door Bosmonster op 16-07-2009 13:54 ]

[Gersomvg]

Fastman schreef op donderdag 16 juli 2009 @ 13:30:
En iemand een oplossing met de 2 divs uit mijn beginpost? Maar dan met variabele breedte.
Met bv. deze sprite http://www.nextweb.be/sprite.jpg

Snap niet precies wat je bedoelt. Zoiets?
www.gersom.nl/rest/got/rc
Is alleen wel met 3 divjes

[? ?]

..

[ Voor 114% gewijzigd door ? ? op 25-01-2013 09:38 ]

[Bosmonster]

Als de breedte en hoogte variabel moet zijn zul je 4 elementen nodig hebben om de hoeken te vertegenwoordigen. Dit kun je dus onmogelijk in maar 2 elementen doen.

[ Voor 3% gewijzigd door Bosmonster op 16-07-2009 15:54 ]

[Matis]

Je zou met width: 100% kunnen werken, echter moet je dan je sprite rechts tegen de boarding parkeren, met de padding van de breedte van je afbeelding.
Erg omslachtig, zeker gezien de diverse voorbeelden!