Hier endlich die Lösung für ein häufiges Problem beim Gestalten von Formularen mit CSS:
christophzillgens.com/de/articles/input-und-button-gleich-hoch
Posts Tagged »css«
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'); }
Tags: css, css3, ie6, ie7, ie8
March 1st, 2011 by Michael
Browsersupport für @face-font
| Browser | Version | Verbreitung % | font-face |
|---|---|---|---|
| Firefox | 3.6 | 32,46 | ja |
| IE | 8.0 | 26,44 | ja |
| Chrome | 9.0 | 12,38 | ja |
| IE | 7.0 | 7,54 | ja |
| Safari | 5.0 | 3,79 | ja |
| Opera | 11.0 | 3,32 | ja |
| Chrome | 8.0 | 3,13 | ja |
| Firefox | 3.5 | 2,9 | ja |
| IE | 6.0 | 1,98 | ja |
| Firefox | 3.0 | 1,15 | - |
| Firefox | 4.0 | 0,8 | ja |
| IE | 9.0 | 0,49 | ja |
Addition @font-face: min. 95,2%
Quellen:
Marktverteilung im März 2011 in Europa:
http://gs.statcounter.com/#browser_version-eu-monthly-201102-201103-bar
@font-face browser support:
http://webfonts.info/wiki/index.php?title=@font-face_browser_support
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.
Tags: css, css3, ie6, ie7, ie8
December 11th, 2010 by Michael
Bilder mit CSS preloaden
Warum nicht mal Bilder mit CSS preloaden anstatt mit Javascript:
#preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); }
Tags: css
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'); }
Tags: css, css3, html5, javascript
December 7th, 2010 by Michael
Blocksatz für einzeiligen Text
Mit dem Trick "Ben Justification" kann man einzeiligen Text auf Blocksatz bringen:
<h1 id="banner"> How to justify a single line of text with css<span> </span> </h1>
h1#banner { width: 100%; text-align: justify; text-align-last: justify; } h1#banner span { font-size: 0px; word-spacing: 1000px; }
Tags: css
November 30th, 2010 by Michael
Code Schnipsel für PHP, CSS, jQuery und mehr
Bei "snipplr" und "css-tricks" gibt es ein Sammelsurium von Scripts für PHP, HTML, CSS, jQuery, htaccess, MySql und so weiter. Gut zum Lernen und für "wie ging das nochmal schnell?".
Tags: css, htaccess, html, jquery, mysql, php
November 23rd, 2010 by Michael
Anker-Link mit Versatz
Wenn man z.B. einen Seitenheader mit "position: fixed;" hat, dann muss das Sprungziel für Ankerlinks entsprechend tiefer sein. Das geht wenn der Anker ein negatives "margin-top:" hat.
// Die Höhe des Versatzes: 250px
.anker { padding-top: 250px; margin-top: -250px; }
Quelle und Beispiel: www.impressivewebs.com/bump.html