Css Snippets » Chrome 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 Border-radius: maak ronde hoeken met CSS http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/ http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/#comments Thu, 15 Oct 2009 07:30:57 +0000 Mark http://www.csssnippets.be/?p=418 Met de komst van CSS3 is het mogelijk via CSS ronde hoeken te bepalen voor elementen, momenteel hebben enkel FireFox/Mozilla en Safari 3 deze optie geïntrigeerd.
Andere browsers zullen het dus voorlopig nog zonder moeten doen, maar hoe gebruik je nu border-radius?

CSS3 (nog niet klaar!!)

CSS

#foo {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#foo {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Safari/webkit

CSS

#faa {
webkit-border-top-right-radius: 10px;
webkit-border-bottom-right-radius: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-top-left-radius: 10px;
}
#faa {
webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

FireFox/Mozilla

CSS

#fee {
moz-border-radius-topright: 10px;
moz-border-radius-bottomright: 5px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-topleft: 10px;
}
#fee {
moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/feed/ 0 Target=_blank op de XHTML manier http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/ http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/#comments Fri, 18 Sep 2009 10:35:24 +0000 Mark http://www.csssnippets.be/?p=348 Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

<a href="document.html" target="_blank">external link</a>

Aangepaste link

<a href="document.html" rel="external">external link</a>

<![CDATA[
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/target_blank-op-de-xhtml-manier/feed/ 10 Eenvoudig en valid CSS hacken http://www.csssnippets.be/2009/06/eenvoudig-en-valid-css-hacken/ http://www.csssnippets.be/2009/06/eenvoudig-en-valid-css-hacken/#comments Mon, 01 Jun 2009 06:44:39 +0000 Mark http://www.csssnippets.be/?p=238 deze CSS Snippet raadplegen.]]> Als je in je stylesheet hacks gaat inbrengen kan je daarmee de validatie ervan zeer sterk naar de knoppen helpen. Volgende manieren laten je toe valide CSS te schrijven die tegelijk als CSS hack kan dienen voor verschillende browsers. Voor Google Chrome en Apple Safari hacks kan je deze CSS Snippet raadplegen.

IE6 en minder

CSS

* html {}

IE7 en minder

CSS

*:first-child+html {}
* html {}

Alleen IE7

CSS

*:first-child+html {}

Alleen IE7 & moderne browsers

CSS

html>body {}

Alleen moderne browsers (niet IE7)

CSS

html>
/**/body {}

Recente Opera 9 en minder

CSS

html:first-child {}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/06/eenvoudig-en-valid-css-hacken/feed/ 2 CSS hack voor Chrome en Safari http://www.csssnippets.be/2009/05/css-hack-voor-chrome-en-safari/ http://www.csssnippets.be/2009/05/css-hack-voor-chrome-en-safari/#comments Thu, 28 May 2009 06:19:04 +0000 Mark http://www.csssnippets.be/?p=234 Hacken voor Google Chrome of voor Apple Safari, normaal gezien niet echt nodig. Deze browsers houden zich aan de regels, maar ooit heb je het misschien nodig en dan moet je weten hoe natuurlijk. Volgende hack werkt dus enkel in Chrome en Safari.

CSS

/*\*/
html>body*.yourclass {
padding:6px;
font-size:13px;
}
/**/
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/05/css-hack-voor-chrome-en-safari/feed/ 2 Drop Shadow zonder afbeelding, extra http://www.csssnippets.be/2009/03/drop-shadow-zonder-afbeelding-extra/ http://www.csssnippets.be/2009/03/drop-shadow-zonder-afbeelding-extra/#comments Sun, 15 Mar 2009 21:53:52 +0000 Mark http://www.csssnippets.be/?p=133 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

<div class="dropShadow dropBR">
<div class="drop1">
	<div>
		<div></div>
	</div>
</div>
<div class="drop2">
	<div>
		<div></div>
	</div>
</div>
<div class="drop3">
	<div>
		<div></div>
	</div>
</div>
<div class="drop4">
	<div>
		<div></div>
	</div>
</div>
<div class="drop5">
	<div>
		<div></div>
	</div>
</div>
<div class="dropContent">
<img src="images/zeldman.jpg">
</div>
</div>

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

]]> http://www.csssnippets.be/2009/03/drop-shadow-zonder-afbeelding-extra/feed/ 1 Toon applicatie icon naast link http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/ http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/#comments Thu, 12 Feb 2009 17:45:35 +0000 Mark http://www.csssnippets.be/?p=106 Dit werkt niet in Internet Explorer 6]]> 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

<p><a href="mailto:x@x.com">email</a></p>
<p><a class="popup" href="#">pop up</a></p>
<p><a href="test.doc">word</a> </p>
<p><a href="test.xls">excel</a></p>
<p><a rel="external" href="http://www.test.com">website</a></p>
<p><a href="test.pdf">pdf</a></p>
<p><a rel="pdf" href="test">pdf2</a></p>
<p><a rel="xxpdfxx" href="test">pdf3</a></p>

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

]]> http://www.csssnippets.be/2009/02/toon-applicatie-icon-naast-link/feed/ 2