Aller au contenu | Aller à la recherche | Navigation  

CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line

Calendrier

« décembre 2007
lunmarmerjeuvensamdim
12
3456789
10111213141516
17181920212223
24252627282930
31

l'Ultimate transparence des PNG sous IE6 avec du CSS

un grand merci a Shemu pour sa trouvaille sur KomodoMedia!

En effet c'est le script le plus efficace qu'il m'a été donné de "trouver" pour résoudre le fichu problème de canal alpha des PNG sous IE6.

Le code a mettre dans votre css :

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Placez un gif transparent à coté de votre CSS nommé "transparent.gif" (si vous voulez le mettre dans le dossier "images" ou autre n'oubliez pas de changer le chemin dans le code si dessus)

il ne vous reste plus qu'a affecter la class "png" aux images .png de vos pages, idem pour les blocs et autres avec un .png en background CSS.

Pour des exemples, je vous invite à visiter le site de KomodoMedia.

Sinon il y a toujours la solution de changer le gris par defaut qu'affiche IE6, via le logiciel TweakPNG (un tuto est dispo ici phoenity.com), pas top si vous n'avez pas un fond uni!

CSS Reset Reloaded

Pour réinitialiser les propriétés des tags html par defaut des différents navigateurs :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ via Digg

Em Calculator

Une petite calculette pour faire très simplement vos calculs d'héritage de taille de typo en fonction de votre DOM - Em Calculator.

Source : http://www.fairytells.net

Spiffy corners (coins arrondis)

créer des coins arrondis (avec Anti-Aliasing), sans images, sans javascript, mais seulement avec du CSS

Le resultat est bleufant :

 

Exemple Eniris

 


Attention si vous désirez mettre des balises "p" il vous faudra mettre le "margin:0" sinon le résultat sera le suivant :

Ici le texte est contenu dans un paragraphe ("p") sans paramettrage de la marge (margin) à "0"

Dégradé haut et bas sur un bloc (div) avec scroll-bare

Pour créer une illusion de fondu sur un texte dans un bloc (div) avec ascenceur

Lorem lipsum

Integer augue orci, egestas in, mollis at, cursus et, mauris. Maecenas dictum nunc vel nulla. Vivamus nisi diam, imperdiet a, venenatis eu, aliquet nec, libero. Sed dapibus quam et nibh. Nulla a nunc. Vestibulum cursus pede non mi. Nunc aliquam felis et massa. Fusce malesuada, diam vitae scelerisque feugiat, quam massa imperdiet ipsum, elementum laoreet odio tellus vitae lectus. Nulla dapibus tortor scelerisque tellus. Nullam leo sapien, fermentum sit amet, aliquet vel, laoreet eget, enim. Vestibulum dapibus libero sed lacus. Ut mattis euismod sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lacinia. Cras pharetra tincidunt sapien.

source : CSS Playground - http://www.cssplay.co.uk/