in diesem workshop stelle ich einige neuerungen in css3 vor. natürlich werde ich hier nicht sämtliche neue funktionen aufgreifen, weshalb ich mich auf funktionen beschränke, die mir bei der täglichen arbeit, dem coden von websites, am meisten helfen. das hauptaugenmerk liegt dabei auf designelementen für die photoshop teils nicht mehr benötigt wird oder varianten die zuvor nur umständlich zu lösen waren und jetzt einfach funktionieren.
bei fast allen vorgestellten techniken mache ich die rechnung ohne den internet explorer. natürlich kann man hier mit workarounds arbeiten, aber, da ja das fehlen von design die funktion nicht beinträchtigt, muss man überlegen wann das sinnvoll ist.
rgb-farbangaben
mit css3 gibt es endlich die möglichkeit farbangaben direkt in rgb anzugeben. das ist vor allem nützlich da rgb der am native farbraum am monitor ist. ein umdenken zwischen hexadeziamlwerten und rgb in photoshop entfällt.
außerdem ist es möglich einem rgb-fabwert einen alpha-wert hinzuzufügen. das heißt der gewählte farbwert kann zudem transparent dargestellt werden.
span.color1 {
background-color: rgba(152, 0, 32, 1);
color:rgba(255,255,255,1);
}
span.color2 {
background-color: rgba(23, 109, 118, 1);
color:rgba(255,255,255,1);
}
span.color3 {
background-color: rgba(62, 0, 232, 1);
color:rgba(255,255,255,1);
}
beispiel Farbangaben: text-span 1 | text-span 2 | text-span 3
div.overlay {
background-color:rgba(0, 0, 0, 0.7);
color:rgba(255,255,255, 1);
}
die angabe 0.7 ist der alphawert und entspricht 70% deckkraft. der wert 1 entspricht also 100% deckraft.
beispiel:
ein überlagerndes transparentes div mit der hintergrundfarbe schwarz und weißem text
farbverläufe
div#farbverlauf1 {
background:-moz-linear-gradient(top, #950023, #F09983);
background:-webkit-linear-gradient(top, #950023, #F09983);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#950023), to(#F09983));
}
beispielbox mit farbverlauf
wie man sehen kann gibt es eine ausnahme bei webkit-browsern. diese verstehen zudem radiale verläufe,
die aber aufgrund der fehlenden unterstützung bei allen anderen hier nicht weiter dargestellt wird.
box-schatten
ganz ohne photoshop ist es jetz möglich divs oder text mit einem schlagschatten zu versehen.
dazu wird mit css3 der einfache befehl box-shadow: 5px 5px 10px #999; eingeführt.
die parameter sind: ‘schatten nach rechts’, ‘schatten nach unten’, ‘größe des schattens’ und ‘farbton’.
ie7 und 8 sind hier leider außen vor. es gibt unterstützung von webkit mozilla und safari. bei den unterstützenden browsern muss
der css-befehl noch speziell aufgerufen werden:
div#box1 {
box-shadow: 5px 5px 10px #999;
-webkit-box-shadow: 5px 5px 10px #999;
-moz-box-shadow: 5px 5px 10px #999;
}
text-schatten
der text-shadow wird genau wie der box-shadow: angewendet. lediglich der aufruf variiert: text-shadow:.
p.text1 {
color:#fff;
text-shadow: 1px 1px 1px #000;
font-size:16px;
}
beispiel für text mit schlagschatten
abgerundete ecken
ein weiteres design-element, für das man in zukunft nicht mehr sein photoshop anschmeißen muss, ist das der abgerundeten ecken.
mit border-radius: 20px; lässt sich das prima erledigen, immer vorrausgesetzt, in den ie’s darf es weiterhin schön eckig aussehen.
die präfixe -moz- für mozilla und -webkit- webkit bleiben auch hier zunächst erhalten.
statt alle ecken einer box abzurunden lassen sich auch gezielt einzelne ecken ansprechen. hier variiert allerdings die schreibweise
für die verschiedenen browser leicht:
div#box2 {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 5px;
box-shadow: 3px 3px 10px #999;
-webkit-box-shadow: 3px 3px 10px #999;
-moz-box-shadow: 3px 3px 10px #999;
background:-moz-linear-gradient(top, #950023, #F09983);
background:-webkit-linear-gradient(top, #950023, #F09983);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#950023), to(#F09983));
background:linear-gradient(top, #950023, #F09983);
color:#fff;
}
box mit unterschiedlich abgerundeteten ecken, schlagschatten und einem farbverlauf
wie im beispiel zu sehen lassen sich diese abgerundeten boxen dann sogar mit den vorher vorgestellten styles kombinieren.
