Css Snippets » link

Link rollover arrow

Mark — Mon, 02 Nov 2009 08:05:52 +0000

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 (176)

HTML

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 Twitter del.icio.us Facebook StumbleUpon

Animate een menu met een gif

Mark — Sun, 20 Sep 2009 07:33:28 +0000

Herinner je je de tijd dat animated gif’s cool waren, overal (soms in overuse) gebruikt werden en het niemand scheelde dat bandbreedte een issue was? Natuurlijk kan je Jquery gebruiken, maar laten we eens terug gaan in de tijd een een good old fashion animated gif gebruiken om een menu te animeren:

Download animated gif

HTML



Home
About
Contact


HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.
HEADLINE 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.

CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: #2d2d2d;
}
#content {
width: 600px;
padding: 0 0 0 20px;
}
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
}
#main_nav li a {
display: block;
width: 150px;
height: 65px;
padding: 85px 0 0 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background: url(twinkle.gif) no-repeat 0 0;
}
#main_nav li a:hover {
background-position: -150px 0; color: #fff;
}
.post {
padding-top: 18px;
line-height: 18px;
}
h4 {
margin: 8px 0 6px 0;
}
p {
line-height: 18px;
font-size: 12px;
margin: 0 0 18px 0;
}
.clear {
clear: both;
}

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

Volgorde stylesheets

Mark — Thu, 23 Apr 2009 18:52:25 +0000

Eerst plaats je de stylesheet voor de moderne browsers, zoals FireFox, Opera, Safari etc…, daarna pas de aangepaste stylesheet voor Internet Explorer versie allemaal.

Foute volgorde

HTML

Juiste volgorde

HTML

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

Printen van URL naast link

Mark — Tue, 14 Apr 2009 20:03:27 +0000

Als je toelaat om je website af te printen door middel van een bijvoorbeeld print.css, is het misschien handig dat links in je document niet verloren gaan, maar dat bij het printen de gehele URL die achter de link zit ook afgeprint wordt.

CSS

@media print
{
  a:after {
    content: " [" attr(href) "] ";
  }
}

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

Snelle rollovers zonder preload

Mark — Sun, 08 Mar 2009 21:26:27 +0000

Of je nu CSS of Javascript gebruikt, een achtergrondafbeelding bij een link zal meestal dan pas geladen worden als ze nodig is , bij het hoveren en dit kan soms een vertraging opleveren, en JavaScript preloaden is tegenwoordig geen optie meer.
De oplossing is één afbeelding te gebruiken die alle “states” reeds bevat, en bij hover verander je de afbeelding van plaats, dus geen vertraging meer.

HTML


 link

CSS

#menu a:link, #menu a:visited {
background: url(images/mhu.gif) 0 0 no-repeat;
text-indent: -9000px;
display: block;
height: 110px;
width: 97px;
}
#menu a:hover, #menu a:active {
background-position: 0 -110px;
}

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

Toon applicatie icon naast link

Mark — Thu, 12 Feb 2009 17:45:35 +0000

Naast een download link voor een PDF bestand, komt een icon van het PDF logo, naast een download link voor een MP3 komt het icon van een MP3, etc … Dit werkt niet in Internet Explorer 6

HTML

CSS

/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose REL attribute = pdf */
a[rel='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/*  all A tags whose REL attributes has the string pdf inside */
a[rel*='pdf'] {
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
	padding-left: 18px;
    background: transparent url(mailto.gif) no-repeat center left;

}
/* all A tags whose CLASS attribute is popup */
a[class ="popup"] {
	padding-left: 18px;
    background: transparent url(popup.gif) no-repeat center left;
}
a[href$='.doc'] {
	padding-left: 18px;
	background: transparent url(doc.gif) no-repeat center left;
}
a[href$='.xls'] {
	padding-left: 18px;
	background: transparent url(xls.gif) no-repeat center left;
}
a[rel ~='external'] {
	padding-left: 18px;
	background: transparent url(external.gif) no-repeat center left;
}

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

CSS include

Mark — Fri, 06 Feb 2009 10:36:18 +0000

Extern CSS bestand includen in je reeds bestaand CSS bestand.

CSS

@import "general.css";

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

Link hover met achtergrondafbeelding

Mark — Sun, 21 Dec 2008 17:10:35 +0000

Je hebt het al gezien, de links gestyld met afbeeldingen die veranderen als je er met de muis over uit gaat (hover).
Het meerdere deel van deze effecten wordt met JavaScript gerealiseerd, en ook is het (als er veel links zijn) nodig om de afbeeldingen te preloaden.
Deze tutorial leert je een techniek waarbij er geen JavaScript en/of preload aan te pas komt.

Download afbeelding

buttonex.jpg (127)

HTML


link #1
link #2
link #3
link #4
link #5

CSS

#menu a
{
display:block;
width:120px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px sans-serif;
color:#BE670A;
background: url("buttonex.jpg") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover
{
background-position: -157px 0;
/*verschuiving 157px links*/
color: #F28F27;
}
#menu a:active
{
background-position: -314px 0;
/*verschuiving 2x 157px links*/
color:white;
}

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