dev.strombild


Posts Tagged »css3«


January 10th, 2012 by Michael

Impress js

Javascript Präsentationstool mit Zoom-, Dreh- und 3D Effekten.

bartaz.github.com/impress.js

Tags: , , ,


May 3rd, 2011 by Michael

CSS Shadow für alle Browser

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Quelle: snipplr.com/view.php?codeview&id=46409

Tags: , , , ,


January 4th, 2011 by Michael

css3 pie

PIE steht für "progressive internet explorer" und ist ein Javascript eine HTC-Komponente, welche die fehlende Unterstützung von "border-radius", "box-shadow" und "linear-gradient" auf dem Internet Explorer 6-8 zur Verfügung stellt. Sie wird per

behavior: url(/PIE.htc);

in die CSS-Datei eingebunden und mit

-pie-background: linear-gradient(#EEFF99, #66EE33);

angesprochen.

http://css3pie.com

Tags: , , , ,


December 7th, 2010 by Michael

Modernizr

Modernizr ist ein Javascript, welches die Unterstützung von CSS3 und HTML5 -Funktionen als CSS-Klassen in den <html> Tag der Webseite einfügt. Damit lassen sich dann CSS-basierte Fallbacklösungen leicht einbauen.

Das sieht dann beispielsweise so aus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg smil svgclippaths">

Eine CSS-Weiche würde dann so aussehen:

/* Wenn @font-face unterstützt wird */
.fontface #header {
	font-size: 22px;
	font-weight: normal;
}
 
/* Wenn @font-face nicht unterstützt wird */
.no-fontface #header {
	font-size: 18px;
	font-weight: bold;
}

Mit Javascript kann man die Unterstützung ebenfalls abfragen:

if(Modernizr.csscolumns) {
	alert('Spaltenfluss wird unterstützt');
}

www.modernizr.com

Tags: , , ,