CSS: Liquid Rounded Corners

10+

11/10

Nice jan

?

Je laadt nu 4x een plaatje. Als je het wat stijlvoller (= groter bestand) wilt doen kost je dit veel bandbreedte. Ik ben er niet echt van onder de indruk.

Trouwens mooie kleurtjes.

Een fraaie tut, petje af.

Ik kende de opzet overigens al wel, maar dan met een transparante image, een png. Daar kun je echt geweldige effecten mee bereiken. Alleen jammer dat je dan voor IE dan een hack moet toepassen om terug te vallen op een gif, IE < 7 ondersteund geen png...

@ Kalle: nee, CSS wordt gecachet. Hij laadt hem maar 1 keer.

@ pgFrank: klopt, deze is bewust opgezet zonder transparantie.

Bedankt Jan, dit kan ik waarschijnlijk wel gebruiken in mijn layout!

Wel leuk, maar ik vind het toch nooit fijn om plaatjes op deze manier als achtergrond te gebruiken.

Lol, aan de rechterkant klopt het niet echt nee!

@ Henk: daar hebben we het al over gehad en ik noem het ook op in mijn tut. Dat je het hier weer ter sprake brengt wordt een beetje flauw.

Voor de rest: je moet niet denken aan een site van 4000 pixels breed waar je deze truc op kunt gebruiken. Denk eerder aan een aantal boxen met ronde hoeken binnen je pagina. En mocht je om de een of andere reden wel iets heel breeds willen maken, maak dan gewoon je GIF breder/hoger.

@Henk: Ik vind het niet fijn om een website voor m'n neus te hebben die over de volle breedte van m'n 23"-scherm is uitgesmeerd. Gelukkig denkt 99,999999% van de internetters daar net zo over en wordt dit soort onzin ook niet gemaakt.

Wat een onzinnig voorbeeld, beetje kinderachtig...

Leuke tut en ga ik zeker uitproberen :)
BEDANKT Jan :)

Lol, 't is maar hoe jullie het opvatten hoor :-P

@ Henk: als flauw en kinderachtig. Maar genoeg hierover, ontopic graag weer.

Ziet er netjes uit hoor!
Persoonlijk keek ik er anders tegen aan om dit te realiseren maar dit vind ik ook een nette manier! Je leert toch altijd weer het meest door naar iemand ander zijn werk te kijken ivm gedachten en realisatie!
Toppie, ga zo door!

@ pgFrank.. laat ik nou net die 0,000001% zijn die een website heeft die de volle breedte van de gebruikers resolutie benut

Geweldige tutorial :D Ik ga het zeker gebruiken.

Ik heb deze opzet ook geprobeerd met een transparante achtergrond (rondom de rounded corners), dit lijkt alleen niet te werken, doordat een andere background er overheen gelegd wordt. Heb je enige pointers /tips over hoe ik dit met een transparante "marge" kan krijgen?

@ Arend: dan moet ik even een screenshotje van je zien.

Goeie tutorial, alleen jammer dat wanneer je dit wil gebruiken op kleine schaal (vb een breedte van 150px, voor een nieuwsflasher), is het niet meer mooi. Je kan dan wel de breedte van je content aanpassen, dat zie ik nog net door de vingers :p

@ Gunther: laat eens een voorbeeld zien van wat je bedoelt? Misschien is het aan te passen.

heb intussen de oplossing gevonden :)
een divje met een width van 100% in de inhoud zetten en het is opgelost

CSS:

HTML

Okee mooi. Je kunt dat divje ook nog een overflow: hidden meegegeven. Op die manier kun je ook nog floats in je inhoud kwijt terwijl je divje dan mee blijft rekken.

Erg goede tutorial. Dit is precies waar ik naar op zoek was.
Ik heb echter een iets complexer probleem, en ik ben wel benieuwd hoe jullie dit zouden oplossen.

Voor een box met 1 achtergrondkleur tegen een achtergrond van een plaatje, kun je voor de hoekjes plaatjes gebruiken met een transparante achtergrond, waardoor de achtergrondkleur zichtbaar wordt.

Voor een box met een achtergrondplaatje tegen een achtergrond van 1 kleur kun je voor de hoekjes plaatjes gebruiken waar de binnenkant transparant gelaten wordt, zodat het plaatje zichtbaar wordt.

Maar wat moet ik doen als ik als achtergrond een plaatje heb, en ik wil een box tekenen die ook een plaatje als achtergrond heeft?
Tot overmaat van ramp heeft de box ook nog eens geen vaste afmetingen, en een variabel plaatje.

Iemand een idee hoe ik dit op moet lossen?

Barst maar los :-)

Ik zou een PNG maken met transparante hoeken en voor IE6 een CSS hack toepassen waardoor die transparantie daar ook werkt denk ik.

Heb je een online voorbeeld van wat je precies wilt (jpg'tje of zo). Het praat zoveel gemakkelijker met een plaatje er bij

groeten, Jan

euh, hoe kan ik hier een plaatje linken? :$
ik probeer het even met tekst te 'tekenen', sorry voor mijn onwetendheid.



het probleem is dat div 2 zowel aan de binnenkant als aan de buitenkant een plaatje heeft, waardoor dus beide kanten transparantie zouden moeten hebben.
ik gebruik nu een grote jpeg als achtergrondplaatje, waar alle 'divjes' op getekend zijn.
Ik wil eigenlijk div2 kunnen resizen en verplaatsen, en div 2 een variabele achtergrond geven.
ik kan natuurlijk in php het plaatje eerst afronden en transparant maken, maar liever wil ik dat vermijden.

groeten,

Martien

@Martien de Jong:
[img]hier de link naar het plaatje[/img]

Geweldig.
Toch nog een vraagje...ik weet alleen niet of het mogelijk is:
Ik wil in de header een afbeelding toevoegen. Maar het mooiste zou zijn als hij gedeeltelijk boven de header zou uitkomen..

[logo]
.....................
[logo]
header
......................

Ik hoop dat het duidelijk is.

Alvast bedankt!

Je zou dan met position moeten werken.
Als je je plaatje in een div zet kan je deze laten zien op de pagina waar je maar wilt.

linkje: http://www.w3schools.com/css/pr_class_position.asp

Niet helemaal nee. Het makkelijkst is het als je een plaatje maakt van wat je wilt.

Dat wordt inderdaad met position gedaan. De header div moet een position: relative krijgen en de div waar het logo in zit een position: absolute.

Bovendien moet hij een z-index krijgen, een top van -10px en een left van ongeveer 100px, schat ik.

Ok ik ben er mee bezig...tekst is geen probleem, alleen met een plaatje wil het niet lukken.
Ik heb in de head de volgende code:
h1.pos_abs
{
position:absolute;
left:100px;
top:-5px;
}

In mn body heb ik dan vervolgens staan:
<body background="achtergrond.gif">
<div id="container">
<div class="rounded-corners">
<div class="rounded-header">
<h2>Headertekst</h2>
<h1 class="pos_abs"><img src="/joomla/logo.gif"/></h1>
</div>

Nee, je moet de class rounded-header een position: relative meegeven.
Dan plaats je in deze div een div#logo, die je een position: absolute meegeeft, met de juiste waarden voor left en top.

Jaja... :) haha dit gaat iets boven mn CSS newbie pet

Mn code tot zover is:
<style type="text/css" media="screen">

div.rounded-corners { background: url(rounded2.gif) right bottom no-repeat; }
div.rounded-header { background: url(rounded2.gif) right top no-repeat; }
div.rounded-content { overflow: hidden; width: 90%; background: url(rounded2.gif) left bottom no-repeat; padding: 10px 0 20px 10px; }
div.rounded-header h2 { color: #fff; margin: 0 20px 0 0; padding: 10px 0 10px 10px; background: url(rounded2.gif) left top no-repeat; }
img.floated { float: left; margin-right: 10px; }
</style>
</head>

<body background="achtergrond.gif">
<div id="container">
<div class="rounded-corners">
<div class="rounded-header">
<h2>Headertekst</h2>
</div>

<div class="rounded-content">
<div class="rounded-content-wrapper">
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum imperdiet lobortis ligula.
Integer sed neque. Vivamus ullamcorper turpis sit amet felis. Ut viverra ligula at lorem scelerisque dapibus.
Sed nec est at odio pretium lacinia. Donec pulvinar nibh non erat. Donec quis lacus vitae mi molestie fringilla.
Vestibulum eu quam at neque bibendum commodo. Vestibulum quis massa. Morbi quam. In ligula. Curabitur eget lorem. </p>
</div>
</div>

</div>


</div>
</body>

Waar moet ik dan precies wat invullen?

Alvast super bedankt!

Ik zit momenteel met drie deadlines ;-)

Er lopen hier zat mensen rond met een goeie CSS kennis die je kunnen helpen. Voor de zekerheid zal ik vanavond nog even kijken.

groeten, Jan

Geen probleem!
Succes !

dit kan nog makkelijker!

Kijk maar eens naar http://www.html.it/articoli/niftycube/index.html
of naar http://www.openrico.org/.

Beide toolkits die het voor je doen.. zonder dat je iets zelf hoeft te maken !

Zelf gebruik ik deze :)

Sorry dat ik het zeg maar zullen we gewoon voor zoveel mogelijk dingen gewoon javascript gaan gebruiken?! Dan zijn geheel afhankelijk van de clientside....
Jan heeft een hele nette oplossing gepost mijns inziens... Echt onzin om hiervoor javascripts te gebruiken...

Tja, als het kan zonder JS, is dat beter vind ik ;-)

desnoods maak je er 1 met GD die je dan weer opslaat...
ALLES liever als afhankelijk zijn van javascript persoonlijk...
Zelfde als al die AJAX sites die het gewoon helemaal niet eens meer doen als je geen javascript hebt aanstaan.. En robots dus ook niks meer mee kunnen dan..

Wat dat betreft wordt server side JavaScript misschien nog een oplossing, maar goed, da's offtopic.

Nice tut, idd, handig voor boxen etc. scheelt je shitload een laadtijd. lang leve css *pakt een taart*

Hey Jan, top tutorial, ziet er goed uit en was precies wat ik zocht. Ik krijg het alleen niet aan de praat! Ik probeer hetzelfde te doen als jij, maar dan met een .png plaatje zodat ie wat transparantie krijgt in de schaduwen. Alleen op de een of andere manier kopieerd hij de PNG er nog een keer onder of iets dergelijks. Het ziet er heel vaag uit. Bekijk maar en check mijn bron.

http://snuur.nl/roundedtest/

overigens als ik mijn image vervang voor de jouwe ziet het er wel goed uit, maar dan is hij alsnog wel nog een x eronder gekopieerd volgens mij.

Mijn box is overigens niet zo breed omdat ik niet breder nodig heb.

@ martijn: jouw buitenste div (div.rounded-corners) heeft geen width. Daarom wordt hij net zo breed als de pagina en herhaalt de background zich. Geef een breedte op die minder is dan het achtergrondplaatje dat je hebt, dan moet het lukken.

dan ziet het er zo uit:

http://snuur.nl/roundedtest/

alsnog is er iets dubbel ofzo, de randen worden niet mooi iig.

Klopt, dat komt omdat je PNG's gebruikt, vrees ik. Mijn tut gaat uit van een egale achtergrond, zodat je die kleur ook kunt verwerken in het plaatje dat je voor de rounded divs gaat gebruiken.

Nou toch nog maar even een bericht zeg. Ik heb dan toch gekozen voor geen transparante achtergrond aangezien deze contentbox enkel op een egale achtergrond hoeft te staan waarschijnlijk. Maar ben nu bezig met mijn nieuwe site. Had al op een andere manier contentboxen gemaakt, maar vond jouw manier toch wel erg mooi. Op het testje dat ik had gemaakt werkt het prima:

http://snuur.nl/roundedtest

maar nu he ik het geprobeerd bij mn nieuwe site erin te gooien, en ik heb het geloof ik letterlijk overgenomen, maar het linkerbovenhoekje blijft wegvallen. Geen flauw idee waar het door komt. Hopelijk kan iemand hier er achter komen. Zit er al een uur mee te klooien nl :-p

http://snuur.nl/newsitewrong

Heb de CSS even rechtstreeks in mn index gezet, zodat je m kunt zien bij bron.

Ik heb er ook al sIFR inzitten maar ide heb ik even uitgezet om te zien of dat niet het probleem was.

Is het plaatje wel breed genoeg voor die nieuwe site?

als het goed is wel, ik heb m nu nog breder gemaakt en nu ziet het er als volgt uit:


http://snuur.nl/newsitewrong

De doctype is dan ook niet goed, je sluit de regel niet af.

Zonder geldige validatie, moet je niet gek staan kijken dat het fout is. Wil niet zeggen dat correcte html tot de juiste presentatie leidt, maar de kans wordt wat groter.

images/contentbox.png

:s waarom zo'n groot bestand ?

Leuke tut, alleen jammer dat het zo moet ben er zelf niet echt een fan van. Ik wacht nog steeds met smart op deze functie: http://www.css3.info/preview/rounded-border/

Klopt, in CSS3 zijn er beperkte mogelijkheden voor. Zit je nog steeds met het feit dat je geen gradi?nts en shadows kunt doen. Dan heb je nog steeds een truc nodig zoals in deze tut.

Hallo Jan,

Ik heb een vreemde breedte na jou code volledig te hebben overgenomen, de header is breder dan de content hoe kan dat en wat kan ik hier aan doen?

Evert

Hallo Evert,

heb je het ergens online staan?

Jan

Ik weet dat die tutorial al wat ouder is maar het is een blijvertje want css zal er altijd zijn.

Wat doe ik verkeerd?
ik heb een header.php die er als volgd uitziet:




En die werkt in mijn andere pagina's normaal, maar als ik de style van jou rounded corner er in de stylesheet zet dan werkt het niet,behalve als ik in de link naar de style de includes/ weghaal krijg ik wel deze rounded corner goed, maar krijg ik geen:
background: url('../images/background.png');
background-attachment: fixed;
background-repeat: repeat;
waar ligt dat aan?
ik weet niet of dat een verschijnsel van IE8! maar dat lijkt me sterk want de rest werkt wel met die achtergrond.
PS.
dit gebeurt alleen als ik

doe, maar als ik die header gewoon boven in het script zet werkt het wel.
Alleen de ronde hoek links onder van het content komt niet helemaal links maar blijf ongeveer 5 px er vanaf en nu is het net of er een hoekje uit geklipt is.

probleem is opgelost!
Ik was ../ vergeten voor: images/rounded4.gif)

Beetje valsspelen maar shaduwen en misschien ook gradients werken nu ook xD
http://css3.info/