Das Bild unterliegt keinen urheberrechtlichen Beschränkungen
Die Umsetzung grafischer Vorlagen finde ich besonders reizvoll, weil ich mich dabei voll und ganz auf die Technik konzentrieren kann. Das Morgenland-Festival Theme (Design von screenlounge, technisch umgesetzt 2010, Event fand statt im Mai 2011) für Drupal brachte ein paar grafische Besonderheiten mit sich, unter anderem die schrägen Streifen in der rechten Seitenleiste. Das war ein Fall für CSS3.
CSS3 Stilanweisungen haben einiges an grafischer Arbeit aus der Gestaltung genommen, können jedoch von älteren Internet Explorern nicht umgesetzt werden. Daher sehen manche Designs in modernen Browsern anders (üblicherweise besser) aus als in oldIEs. Für die Wiedergabe der schrägen Streifen gibt es hingegen eine adäquate Filterlösung für ältere Internet-Explorer-Modelle. Die eigentliche Herausforderung liegt jedoch nicht im CSS3 oder der Anwendung des IE-Filters, sondern in der Positionierung der Elemente und der Justierung von Abständen. Hier unterscheiden sich nicht nur alte IEs und moderne Browser (Abstand der Liste von oben), sondern auch IE7 und IE8 (Abstand der Listenpunkte voneinander).
Als erster Internet Explorer interpretiert Version 9 die eingesetzte CSS3-Transformation (mit -ms Präfix). In Firefox kommt es (immer noch) zu einem “zusätzlichen” Hovereffekt (die Buchstaben wackeln), offenbar weil die Buchstaben beim Farbwechsel neu gerendert werden (ohne Farbänderunge bei Hover passiert das nämlich nicht).
Die Grafiken
Für den rechts vertikal abschließenden Rand setze ich in den Listenelementen Grafiken als Hintergrundbilder ein. Diese werden ebenfalls um -45 Grad gedreht. Es sollten GIF-Dateien sein, da der IE-Filter halbtransparente Pixel von PNG-Dateien durch den Filter schwarz färbt.
post731.html
<!DOCTYPE html> <!--[if lt IE 7 ]><html lang="de" class="no-js oldie msie6"><![endif]--> <!--[if IE 7 ]><html lang="de" class="no-js oldie msie7"><![endif]--> <!--[if IE 8 ]><html lang="de" class="no-js oldie msie8"><![endif]--> <!--[if IE 9 ]><html lang="de" class="no-js msie9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="de"><!--<![endif]--> <head> <meta charset="utf-8" /> <meta content="Gabriele Lässer" name="author"> <title> Schräges CSS-Menü mit oldIE Fallback </title> <link rel="stylesheet" type="text/css" media="all" href="style-731.css" /> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" media="all" href="styleie-731.css" /> <![endif]--> </head> <body class="default"> <header id="branding"> <h1 id="pageheader">Stripes</h1> </header> <div id="pptwrapper"> <ul class="placeevent"> <li class="stripe green"><a href="#">Musik- und Kunstprogramm</a> </li> <li class="stripe green spaceafter"><a href="#">Forumsprogramm</a></li> <li class="stripe blue"><a href="#">Anmeldung Workshops</a> </li> <li class="stripe blue spaceafter"><a href="#">Anmeldung Workshops</a> </li> <li class="stripe rose"><a href="#">Mittwoch, 18. Mai 2011</a> </li> <li class="stripe rose"><a href="#">Donnerstag, 19. Mai 2011 </a> </li> <li class="stripe rose spaceafter"><a href="#">Freitag, 20. Mai 2011</a> </li> <li class="stripe yellow"><a href="#">Samstag, 21. Mai 2011</a> </li> <li class="stripe yellow"><a href="#">Sonntag, 22. Mai 2011</a> </li> <li class="stripe yellow"><a href="#">Download Programm 2011</a></li> </ul> </div> </body> </html>
style-731.css
/* Start of Place Event Styles */
#pptwrapper {
background-color:#eee;
width:100%;
padding:120px 0 50px 0;
margin:20px 0;
overflow:hidden;
}
.placeevent {
list-style-type:none !important;
margin:120px 0 70px 0;
overflow:visible !important;
float:right;
border:solid 0px #999; /* set to 1px to see a border */
}
.placeevent li {
list-style:none !important;
border:solid 0px #ccc; /* set to 1px to see a border */
clear:right;
float:right;
width:320px; /* variieren breite und rechter Abstand */
margin-right:-59px; /* variieren breite und rechter Abstand */
}
.placeevent a {
font-family:Tahoma;
letter-spacing:1px;
font-size:15px;
white-space:nowrap;
margin-right:23px;
text-transform:uppercase;
display:block;
float:right;
text-align:right;
text-decoration:none;
height:22px;
padding:0px 10px;
color:#333;
}
.placeevent .stripe {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
height:30px;
margin-bottom:5px;
}
.placeevent .spaceafter {
margin-bottom:20px;
}
.placeevent a:hover {
color:#666;
}
.placeevent .stripe {
background-repeat:no-repeat;
background-position:top right;
}
.green {
background-image:url('http://www.xisign.com/wp-content/uploads/examples/post731/c3e7b7.gif');
}
.green a {
background-color:#c3e7b7;
}
.blue {
background-image:url('http://www.xisign.com/wp-content/uploads/examples/post731/c8d9ed.gif');
}
.blue a {
background-color:#c8d9ed;
}
.rose {
background-image:url('http://www.xisign.com/wp-content/uploads/examples/post731/e6b5b5.gif');
}
.rose a {
background-color:#e6b5b5;
}
.yellow {
background-image:url('http://www.xisign.com/wp-content/uploads/examples/post731/eae4c1.gif');
}
.yellow a {
background-color:#eae4c1;
}
styleie-731.css
/* IE 7 and IE 8 */
.oldie #pptwrapper {
padding:20px 0 180px 0;
}
.oldie .placeevent li {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
margin-bottom:15px;
font-weight:600;
}
.oldie .placeevent {
margin-top:0px;
margin-bottom:190px;
}
/* msie 7 */
.msie7 .placeevent li {
margin-bottom:-210px;
cursor:pointer;
margin-right:0px;
}
.msie7 .placeevent .spaceafter {
margin-bottom:-200px;
}
Grosses Kompliment an Gabriele für diese wunderschöne Drupal Theme Umsetzung der MorgenLand Festival Vorlage unserer Designer! Toll war es!