Css Snippets » IE8

Crossbrowser CSS drop shadow

Mark — Wed, 28 Apr 2010 08:39:30 +0000

Drop shadow – ofwel de illusie dat iets zweeft en diepte heeft – wordt al jarenlang met afbeeldingen gedaan, ofwel met nuffige semi-CSS oplossingen.
CSS3 is nog niet voor elke browser 100%, maar drop shadow is één van de zaken die we nu reeds kunnen doen en het werkt in:

Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

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

Jquery – laat change() werken in IE8 & IE7

Mark — Sun, 28 Mar 2010 09:09:10 +0000

Om hoofdpijn van te krijgen, change() function werkt blijkbaar niet in Internet Explorer 8 & 7, dus waarschijnlijk ook niet niet in Internet Explorer 6. Maar de oplossing is vrij eenvoudig;

Met bind() 2 functions meegeven, click() voor IE en change() voor de anderen:

Niet crossbrowser manier

Crossbrowser manier

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

Conditionele body tag voor IE

Mark — Sat, 27 Feb 2010 07:14:26 +0000

Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.

HTML

Het enigste wat je nu moet doen is de uitzondering toevoegen aan je reeds bestaande CSS.

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

Target=_blank op de XHTML manier

Mark — Fri, 18 Sep 2009 10:35:24 +0000

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

external link

Aangepaste link

external link

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

Eenvoudig en valid CSS hacken

Mark — Mon, 01 Jun 2009 06:44:39 +0000

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

CSS opacity voor IE6-7 & IE8

Mark — Wed, 20 May 2009 11:15:15 +0000

Opacity is het semi-transparent kleuren van elementen, (dus geen solide kleur) en wordt tegenwoordig door eigenlijk alle browsers ondersteund.
Alhoewel elke op een andere manier van implementeren.

Internet Explorer 6 & 7

CSS

foo {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

foo {
filter: alpha(opacity=80);
}

Internet Explorer 8

foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Meer info

Meer info over opacity voor ander browser kan je in deze CSS Snippet vinden.

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

In IE8, IE7 emuleren

Mark — Sun, 26 Apr 2009 19:55:58 +0000

Een erg nuttige toevoeging in Internet Explorer 8 is de mogelijkheid om vanuit de Developer Tools direct de compatibility modus van de site te wijzigen. Je kunt switchen tussen Quirks mode (gedrag van IE5), Strict (gedrag van IE 7) en Standards (gedrag van IE8).

HTML

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

Conditional comments, allemaal

Mark — Tue, 07 Apr 2009 16:42:32 +0000

Conditional comments kunnen je helpen bij het maken van CSS voor enkel één of meerdere versies van Microsoft Internet Explorer. Enkel deze browser kan de code tussen de conditionele comments lezen en dus uitvoeren.

HTML

Voeg volgende code eender waar in je HTML document, enkel de betreffende browser versie zal de code uitvoeren.

gt groter dan
lte minder of gelijk

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

Pure CSS ronde hoeken

Mark — Fri, 27 Feb 2009 13:57:03 +0000

Geen afbeeldingen, geen Javascript enkel pure CSS. Maar wel veel CSS en HTML elementen. Ja het is meestal kiezen of delen, je kan niet alles hebben natuurlijk.

HTML



	


	
		
			
		
	


	
		
	


	


	


	Lorem ipsum
	tekst komt hierin te staan

CSS

* {margin: 0; padding: 0}
body {
  font: 14px/17px "Trebuchet MS", tahoma, arial;
	text-align: justify;
}
a {color: #0094D6}
p {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 13px;
}
#v3 {
  width: 500px;
	margin: 30px auto 15px;
}
h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	padding: 9px 0 14px;
}

#v3 h1 {color: #00AA00;}
.text {
	border: 1px solid #B0BCC2;
	border-width: 0 1px;
	padding: 5px 10px;
}

.b1, .b2, .b3, .b4, .b5,
.b1 em, .b2 em, .b3 em, .b4 em, .b5 em,
.b1 strong, .b2 strong, .b3 strong, .b4 strong, .b5 strong,
.b1 span, .b2 span, .b3 span, .b4 span, .b5 span {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	display: block;
}
.b1 {
  margin: 0 2px;
	background: #EBEEF0;
	border: none;
}
.b1 strong {
 margin: 0 1px;
 background: #B8C3C8;
 border-color: #CBD3D7;
}
.b2 {margin: 0 1px;	border-color: #D6DCDF;}
.b2 strong {border-color: #B8C3C8;}
.b2 em {border-color: #E4E8EA;}
.b2 span {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 strong {border-color: #BCC6CB;}
.b3 em {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 strong {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 strong {border-color: #FAFBFB;}

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