Css Snippets » eenvoudig

Eenvoudige CSS tooltip

Mark — Sun, 21 Jun 2009 06:33:26 +0000

Misschien wel de korste manier om met CSS een tooltip te maken (1 regel HTML & 3 regels CSS). Tooltips kunnen zéér handig zijn voor je site, om bijvoorbeeld iets te verduidelijken, als toevoeging op de reeds bestaande browser tooltip.

HTML

Eenvoudige Tooltip
Dit is de eenvoudige tooltip tekst
.

CSS

a:hover {
background:#fff;
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#fff;
border:1px solid #ccc;
color:#6c6c6c;
}

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

CSS shorthand voor border

Mark — Fri, 23 Jan 2009 16:08:39 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

CSS lang

border-width: 1px;
border-color: black;
border-style: solid;

CSS shorthand

border: 1px black solid;

Aparte eigenschappen

CSS lang

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

border-right: 1px black solid

Natuurlijk geldt dezelfde regel ook voor border-bottom, border-top en border-left:

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

CSS shorthand voor lijsten

Mark — Tue, 20 Jan 2009 15:33:55 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

CSS lang

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

CSS shorthand

list-style: disc outside url(image.gif)

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

CSS Shorthand voor font

Mark — Mon, 12 Jan 2009 15:26:39 +0000

Oftewel, hoe schrijf ik evenveel CSS met minder.
Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

Dat je met CSS de downloadtijd van je website aanzienlijk verkort is algemeen geweten, maar dat je nu zelf nog de Css kunt verkorten door gebruik te maken van de CSS shorthand properties schijnt niet zo een algemene wetenswaardigheid te zijn.

CSS lang

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

CSS shorthand

font: 1em/1.5em bold italic serif

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