http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 http://www.csssnippets.be/2009/05/ronde-hoeken-met-4-afbeeldingen/ http://www.csssnippets.be/2009/05/ronde-hoeken-met-4-afbeeldingen/#comments Thu, 14 May 2009 12:10:29 +0000 Mark http://www.csssnippets.be/?p=212 voor elke hoek één), en 4 HTML elementen op ze op hun plaats te zetten. Eenvoudig en doeltreffend.]]> Ronde hoeken kan je op zoveel verschillende manieren verwezenlijken, de ene is al wat gecompliceerder dan de andere. Deze manier heeft 4 afbeeldingen nodig (voor elke hoek één), en 4 HTML elementen op ze op hun plaats te zetten. Eenvoudig en doeltreffend.

HTML

<div class="w1">
 <div class="w2">
  <div class="w3">
   <div class="w4">
    Hallo, tekst komt hier
   </div>
  </div>
 </div>
</div>

CSS

div.w1{
background:#9c6634 url(images/tl.gif) no-repeat;
width:100%;
width: 250px;
}
div.w2{
background:url(images/tr.gif) no-repeat top right;
}
div.w3{
background:url(images/bl.gif) no-repeat left bottom;
}
div.w4{
background:url(images/br.gif) no-repeat right bottom;
padding:10px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/05/ronde-hoeken-met-4-afbeeldingen/feed/ 0 http://www.csssnippets.be/2009/04/1-pixel-ronde-hoeken/ http://www.csssnippets.be/2009/04/1-pixel-ronde-hoeken/#comments Thu, 16 Apr 2009 08:08:28 +0000 Mark http://www.csssnippets.be/?p=173 Zoals te zien bij Google Analytics, één pixel uit de hoek halen om zo visueel ronde hoeken na te bootsen.

HTML

<ul>
  <li>
    <a href="#">
      <strong>
        <strong>
          Visitors
        </strong>
      </strong>
    </a>
  </li>
</ul>

CSS

ul {
	list-style: none;
}
ul li {
	width: 100px;
}
li a {
  display:block;
  border: solid #666;
  border-width: 0 1px;
  text-decoration: none;
  outline:none;
  color: #000;
  background-color: #e4e4e4;
}
li a strong {
  display: block;
  position:relative;
  top: -1px;
  left: 0;
  border:solid #666;
  border-width:1px 0 0;
  font-weight:normal;
}
li a strong strong {
  border-width:0 0 1px;
  top: 2px;
  padding:5px;
}
li a:hover {
  background-color: #aaa;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/04/1-pixel-ronde-hoeken/feed/ 0 http://www.csssnippets.be/2009/02/pure-css-ronde-hoeken/ http://www.csssnippets.be/2009/02/pure-css-ronde-hoeken/#comments Fri, 27 Feb 2009 13:57:03 +0000 Mark http://www.csssnippets.be/?p=116 Geen afbeeldingen, geen Javascript enkel pure CSS. Maar wel veel CSS en HTML elementen. Ja het is meestal kiezen of delen, je kan niet alles hebben natuurlijk.

HTML

<div id="v3">
<div class="b1">
	<strong></strong>
</div>
<div class="b2">
	<strong>
		<em>
			<span></span>
		</em>
	</strong>
</div>
<div class="b3">
	<strong>
		<em></em>
	</strong>
</div>
<div class="b4">
	<strong></strong>
</div>
<div class="b5">
	<strong></strong>
</div>
<div class="text">
	<h1>Lorem ipsum</h1>
	<p>tekst komt hierin te staan</p>
</div>
<div class="b5">
	<strong></strong>
</div>
<div class="b4">
	<strong></strong>
</div>
<div class="b3">
	<strong><em></em></strong>
</div>
<div class="b2">
	<strong>
		<em>
			<span></span>
		</em>
	</strong>
</div>
<div class="b1">
	<strong></strong>
</div>
</div>

CSS

* {margin: 0; padding: 0}
body {
  font: 14px/17px "Trebuchet MS", tahoma, arial;
	text-align: justify;
}
a {color: #0094D6}
p {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 13px;
}
#v3 {
  width: 500px;
	margin: 30px auto 15px;
}
h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	padding: 9px 0 14px;
}

#v3 h1 {color: #00AA00;}
.text {
	border: 1px solid #B0BCC2;
	border-width: 0 1px;
	padding: 5px 10px;
}

.b1, .b2, .b3, .b4, .b5,
.b1 em, .b2 em, .b3 em, .b4 em, .b5 em,
.b1 strong, .b2 strong, .b3 strong, .b4 strong, .b5 strong,
.b1 span, .b2 span, .b3 span, .b4 span, .b5 span {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	display: block;
}
.b1 {
  margin: 0 2px;
	background: #EBEEF0;
	border: none;
}
.b1 strong {
 margin: 0 1px;
 background: #B8C3C8;
 border-color: #CBD3D7;
}
.b2 {margin: 0 1px;	border-color: #D6DCDF;}
.b2 strong {border-color: #B8C3C8;}
.b2 em {border-color: #E4E8EA;}
.b2 span {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 strong {border-color: #BCC6CB;}
.b3 em {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 strong {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 strong {border-color: #FAFBFB;}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/02/pure-css-ronde-hoeken/feed/ 2