Css Snippets » pijl 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 Link rollover arrow http://www.csssnippets.be/2009/11/link-rollover-arrow/ http://www.csssnippets.be/2009/11/link-rollover-arrow/#comments Mon, 02 Nov 2009 08:05:52 +0000 Mark http://www.csssnippets.be/?p=455 Bij het hoveren over de links, in bijvoorbeeld een navigatie, kun je het visuele effect toevoegen dat er een pijl je muisaanwijzer volgt om aan te geven dat je over de specifieke link aan het hoveren bent. Dit kan eenvoudiger met Javascript gedaan worden, maar een pure CSS oplossing is toch weer dat beetje leuker.

Afbeelding

pointer.gif (113)

HTML

<ul class="crawler">
	<li>
		<a class="link">Home</a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
	<li class="x2">
		<a class="link">Google </a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
	<li class="x3">
		<a class="link">Home </a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
	<li class="x4">
		<a class="link">Google </a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
	<li class="x5">
		<a class="link">Home </a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
	<li class="x6">
		<a class="link">Google </a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
		<a href="#"><span></span></a>
	</li>
</ul>

CSS

ul.crawler {
list-style: none;
margin: 1em 0 1em 0;
padding: 0;
float: left;
border: 1px solid #000;
}
ul.crawler li {
position: relative;
float: left;
background: #d2da9c;
z-index: 6;
cursor: pointer;
}
ul.crawler li.x2 {z-index: 5}
ul.crawler li.x3 {z-index: 4}
ul.crawler li.x4 {z-index: 3}
ul.crawler li.x5 {z-index: 2}
ul.crawler li.x6 {z-index: 1}
ul.crawler li a {
float: left;
width: 10px;
height: 25px;
line-height: 25px;
text-decoration: none;
z-index: 2;
position: relative;
cursor: pointer;
background: transparent
}
ul.crawler li a.link {
width: 100px;
position: absolute;
left : 0;
top : 0;
text-align: center;
z-index: 0;
text-decoration: underline;
}
ul.crawler li a: hover span {
position: absolute;
width: 78px;
top : -12px;
left : auto;
margin-left: -30px;
z-index: 3;
background: url(images/pointer.gif) no-repeat left top;
}
a: hover {visibility: visible;background: url(images/transparent.gif)}/* ie needs this*/
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/11/link-rollover-arrow/feed/ 0 Een pijl maken met CSS http://www.csssnippets.be/2009/10/een-pijl-maken-met-css/ http://www.csssnippets.be/2009/10/een-pijl-maken-met-css/#comments Fri, 30 Oct 2009 07:43:05 +0000 Mark http://www.csssnippets.be/?p=453 Gebruik je nog steeds afbeeldingen om pijlen te maken, wist je dat het met CSS ook gaat?

HTML

<div class="left_arrow">
<div class="arrow"></div>
<div class="body">links</div>
</div>

CSS

.left_arrow {
height:50px;
width:150px;
position:relative;
}
.left_arrow .arrow {
border:25px solid #FFF;
border-right:25px solid #C00;
width:0;
height:0;
overflow:hidden;
margin-left:-25px;
}
.left_arrow .body {
margin:-35px 0 0 25px;
top:15px; left:25px;
height:20px;
background:#C00;
color:white;
text-align:center;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/een-pijl-maken-met-css/feed/ 2