foto html - css     . Border - Ronde hoeken

Omschrijving   Voorbeeld

Tegenwoordig is alles hoekig en dan valt een border met ronde hoeken wel op en dat ziet er ook mooier uit. Dit scriptje is ook helemaal niet zo moeilijk.  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In de css

.rounded-corners {
background-color:#CCC;
border-radius: 10px; /* Future Proof & IE9 */
-webkit-border-radius: 10px; /* Safari & Chrome */
-moz-border-radius: 10px; /* Firefox */
-o-border-radius: 10px; /* Opera */
padding:10px;
}

Tussen de bodytags

<table width="400" border="0" cellpadding="0" cellspacing="0" class="rounded-corners">
<tr>
<td valign="top">tekst</td>
</tr>
</table>

Omschrijving   Voorbeeld

Ronde hoeken met div
Werk je liever met div's, dan kan dat ook: (ik heb er even een schaduw bij gedaan... vond ik wel mooi)
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In de css

#container{
width:400px;
position:relative;
left:230px;
margin-left:-225px;}
#hoekje {
behavior: url('ie-css3.htc');
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: 4px 4px 4px #A5A5A5;
-webkit-box-shadow: 4px 4px 4px #A5A5A5;
box-shadow: 4px 4px 4px #A5A5A5;
width:400px;
background:#DCDCDC;
padding:10px;
margin: 0 0 0 0;}

Tussen de bodytags

<div id="container">
<div id="hoekje">Jou tekst
</div></div>

Omschrijving   Voorbeeld

Ronde hoeken met foto's:
Ook foto's die gewoon rechthoekig zijn kunnen voorzien worden van ronde hoeken, alleen heb ik hier een klein grapje uitgehaald, ga maar eens met je muis over de eerste foto. Natuurlijk moet je er zelf een beetje mee spelen met dit script, want je kan er best iets leuks mee doen.
  .

In de css

.foto{
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px}
.foto:hover{
-webkit-border-radius: 35px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 35px;
-moz-border-radius-bottomright: 0;
border-radius: 35px;
border-bottom-right-radius: 0;}

Tussen de bodytags

<img src="img/06.jpg" width="250" height="188" class="foto" >

Omschrijving   Voorbeeld

Ronde deukjes met div's:
In plaats van ronde hoeken, kan je het tegenovergestelde nemen, dit lijkt meer op iets klassieks
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In de css

.urhoeken {background:transparent; width:80%; /* boxbreedte */}
.urb1, .urb2, .urb3, .urb4 {display:block; overflow:hidden; height:1px;font-size:1px;}
.urb2, .urb3, .urb4 {background:transparent; border-left:1px solid #000000; border-right:1px solid #000000;}
.urb1 {margin:0 4px; background:#000000;}
.urb2 {margin:0 4px; height:2px;}
.urb3 {margin:0 3px;}
.urb4 {margin:0; height:1px; border-width:0 3px 0 3px;}
.urboxinhoud {
display:block;
background:transparent;
border:0 solid #000000;
border-width:0 1px;
padding: 5px;}

Tussen de bodytags

<div class="urhoeken"> <b class="urb1"></b><b class="urb2"></b><b class="urb3"></b><b class="urb4"></b>
<div class="urboxinhoud">
Hier jou tekst
</div>
<span class="urb4"></span><span class="urb3"></span><span class="urb2"></span><span class="urb1"></span>
</div>

end
terug
home