Css Snippets » image

Altijd passende achtergrondafbeelding

Mark — Sat, 09 Jan 2010 07:58:06 +0000

Een achtergrond afbeelding, die altijd past, of het browser-venster nu groter of kleiner gemaakt wordt.

HTML


 
  uwen inhoud hier

CSS

html, body {
 height:100%;
 margin:0;
 padding:0;
}
#page-background {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
#content {
 position:relative;
 z-index:1;
 padding:10px;
}

Voor Internet Explorer 6

CSS

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

Foto’s-afbeeldingen verfraaien met border

Mark — Sat, 26 Dec 2009 07:27:15 +0000

Je kan je foto’s een beetje verfraaien door bijvoorbeeld een beetje te spelen met de CSS border eigenschap.

HTML

CSS

div.shadow {
float: left;
padding: 0 5px 5px 0;
}
div.shadow img {
display: block;
position: relative;
top: -2px;
left:-2px;
padding:8px;
background:#FFF;
border:1px solid;
border-color: #ccc #666 #666 #ccc;
}

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

Thumbnail afbeeldingen gallerij

Mark — Fri, 20 Nov 2009 06:10:23 +0000

Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.

HTML


 
 
 
 sul monitor 1
 
 
 
 
 
 sul monitor 2
 
 
 
 
 
 sul monitor, seduto
 
 
 
 
 
 sul monitor, con il koala
 
 
 
 
 
 sul monitor, guarda fuori
 
 
 
 
 
 sul monitor, si lecca una zampa
 
 
 
 
 
 sul terrazzo, sdraiato al sole 1
 
 
 
 
 
 sul terrazzo, sdraiato al sole 2
 
 
 
 
 
 sul terrazzo, al sole seduto
 
 
 
 
 
 sul terrazzo, si lava
 
 
 
 
 
 sul balcone, seduto
 
 
 
 
 
 sulla ringhiera del balcone, in piedi
 
 
 
 
 
 sulla ringhiera del balcone, contro il cielo blu 1
 
 
 
 
 
 sulla ringhiera del balcone, contro il cielo blu 2
 
 
 
 
 
 sulla ringhiera del balcone, con l'ombra sul muro
 
 
 
 
 
 una zampa

CSS

body {
	background-color: #fff;
	color: #000;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 1.1;
	text-align: center;
}
.thumbwrap {
	display: block;
	border: 1px solid #999;
	padding: 15px 8px 0 8px;
	background-color: #f8f8f8;
}
.thumbwrap a {
	display: -moz-inline-box;  /* Moz */
	display: inline-table;  /* Op6+, Saf */
	display: inline-block;  /* IE */
	margin: 0 6px 15px 6px;
	border: 4px solid #999;
	text-decoration: none;
	color: #000;
	background-color: #eee;
	border-spacing: 0;  /* Op6 */
	width: 168px;
}
.thumbwrap a:hover {
	border-color: #6f6;
	background-color: #dfd;
}
.thumbwrap a img {
	border-width: 0;
	vertical-align: bottom;
}
.thumbwrap a span {
	display: block;
}
.thumbwrap a span span {
	padding: 4px;
}
.thumbwrap a>span {
	width: 160px;
}

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

Foto zoom met CSS

Mark — Wed, 12 Aug 2009 08:32:26 +0000

Kleine thumbnail kan worden bekeken in full-size zonder te moeten klikken, page-refresh, gewoon door te hoveren over de afbeelding.

HTML





Beschrijving:  Hier een omschrijving van je foto.

Photo by some guy

CSS

.PZ3-l {
float:left;
margin-right:10px;
}
.PZ3-r {
float:right;
margin-left:10px;
}
html>/**/body .PZ3-r {
position:relative;
}
.zoom {
border:1px solid #369;
width:210px;
height:137px;
}
.zoom a, .zoom a:visited {
display:block;
padding:0;
overflow:hidden;
text-decoration:none;
height:100%;
width:100%;
}
html>/**/body .PZ3-r a {
right:0;
}
.zoom a:hover {
position:absolute;
z-index:999;
padding:0;
background:none;
cursor:pointer;
height:auto;
width:auto;
overflow:visible;
border:1px solid #369;
margin:-1px 0 0 -1px;
}
html>body .zoom a:hover {
margin:-1px -1px 0 -1px;
}
.zoom a img {
border:0;
height:100%;
width:100%;
}
.zoom a:hover img {
height:auto;
width:auto;
border:0;
}
a:hover .PZ31cap {
display:block;
font:10pt verdana,sans-serif;
margin-top:-3px;
background:#369;
width:276px;
color:#fff;
text-align:left;
}
.PZ3inr {
display:block;
padding:2px 5px;
}
.noCap a:hover .PZ31cap {
display:none;
}
.noBdr,.noBdr a:hover {
border:0;
}

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

Tekst verbergen, mogelijkheid #1

Mark — Sat, 13 Jun 2009 06:36:12 +0000

Tekst verbergen met CSS, het kan. Het doel van tekst te verbergen kan uiteenlopen, van een tekst te vervangen door een afbeelding omdat het juiste lettertype niet op elke computer voorkomt bijvoorbeeld.
Of tekst verbergen omdat een CMS systeem de tekst weergeeft en het niet aanwezig moet zijn omwille van het design. Reden genoeg.

Text indent

HTML

Ik word verborgen

CSS

h1 {
text-indent:-9999px; /*Verberg tekst, aanwezig voor SEO*/
margin:0 auto;
width:403px;
height: 82px;
background:transparent url("images/logo.gif") no-repeat 0 0;
}

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

Afbeeldingen als achtergrond

Mark — Sun, 07 Jun 2009 14:06:58 +0000

Afbeeldingen kunnen op eender welk element geplaatst worden, als aanvulling, opvulling en toevoeging. Volgende manieren tonen je welke mogelijkheden er zijn.

Afbeelding 1 maal tonen

CSS

foo {
background: #fff url(images/bkg-body2.jpg) no-repeat;
}

Afbeelding horizontaal herhalen

CSS

foo {
background: #fff url(images/bkg-body2.jpg) repeat-x;
}

Afbeelding vertikaal herhalen

CSS

foo {
background: #fff url(images/bkg-body2.jpg) repeat-y;
}

Afbeelding horizontaal & vertikaal herhalen

CSS

foo {
background: #fff url(images/bkg-body2.jpg) repeat;
}

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

Afbeeldingen horizontaal centreren

Mark — Sun, 24 May 2009 08:39:35 +0000

Als je een afbeeldingen hebt waarvan de afmetingen altijd vooraf gekend zijn is het relatief eenvoudig om deze te centreren te opzichte van het parent element. Maar wat als je de afmetingen niet vanop voorhand weet, of dat de afmetingen niet altijd hetzelfde zijn??
Met volgende CSS Snippet kan je dit probleem oplossen.

Met gekende afmetingen

HTML

CSS

div img {
margin: 0 auto;
width: 100px;
}

Ongekende/afwijkende afmetingen

HTML

CSS

div#wrapper {
  width: 350px;
  text-align: center;
  border: 1px solid; /* ter illustratie */
}

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

Ronde hoeken, met 4 afbeeldingen

Mark — Thu, 14 May 2009 12:10:29 +0000

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


 
  
   
    Hallo, tekst komt hier

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

Drop Shadow zonder afbeelding, extra

Mark — Sun, 15 Mar 2009 21:53:52 +0000

De illusie criëeren van een schaduw op bepaalde elementen is niets nieuws meer, het kan op verschilende manieren worden verkregen, maar toch wel hoofdzakelijk met afbeelding(en).
Deze versie gaat een stapje verder, probeer het maar eens uit.

HTML

CSS

.dropShadow {
position:relative;
z-index:1;
float:left;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2,
.dropShadow.dropBR .drop3, .dropShadow.dropBR .drop4,
.dropShadow.dropBR .drop5 {
top:0; left:0;/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2,
.dropShadow.dropBL .drop3, .dropShadow.dropBL .drop4,
.dropShadow.dropBL .drop5 {
top:0; left:-16px;/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2,
.dropShadow.dropTR .drop3, .dropShadow.dropTR .drop4,
.dropShadow.dropTR .drop5 {
top:-16px; left:0;/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2,
.dropShadow.dropTL .drop3, .dropShadow.dropTL .drop4,
.dropShadow.dropTL .drop5 {
top:-16px; left:-16px;/*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div,
.dropShadow .drop3 div, .dropShadow .drop4 div,
.dropShadow .drop5 div {
position:absolute;
top:8px;
right:0;
bottom:0;
left:8px;
border-style:solid;
border-color:#999;
}
.dropShadow .drop1 div {
margin:7px -1px -1px 7px;
border-width:1px 0 1px 0;
background-color:#999;
}
.dropShadow .drop2 div {
margin:6px -2px -2px 6px;
border-width:1px 0 1px 0;
}
.dropShadow .drop3 div {
margin:4px -4px -4px 4px;
border-width:2px 0 2px 0;
}
.dropShadow .drop4 div {
margin:2px -6px -6px 2px;
border-width:2px 0 2px 0;
}
.dropShadow .drop5 div {
margin:0 -8px -8px 0;
border-width:2px 0 2px 0;
}
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div,
.dropShadow .drop3 div div, .dropShadow .drop4 div div,
.dropShadow .drop5 div div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
border:1px solid black;
padding:2px;
background-color:#fff;
}

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