Loading...
07Mrz

CSS3

Posted byAllgemein, BlogTagged CSS3, HTMLNo Comments

CSS3 hat eine Menge tolle neue Features mit denen Web-Designern die Arbeit erleichtert wird, und ganz neue Möglichkeiten schaffen. Einige von den besten möchte ich euch hier vorstellen.
Leider benötigt man noch für die meisten Browser spezielle Befehle, aber wenigstens wird dann schon vieles korrekt unterstützt. (Ausnahme ist wiedermal der Internet Explorer, mit dem vieles nicht funktioniert)

box-shadow

Mit Box Shadow kann man ganz einfach Schatten (nach innen und außen) für Box Elemente (Div, img, … ) erstellen.

Die ersten 2 Werte stellen die Verschiebung des Schattens auf der x und y Achse dar. Der 3. Wert ist die „Härte“ des Schattens (Blur)

#Beispiel_A {
  -moz-box-shadow: -5px -5px 5px #868686;
  -webkit-box-shadow: -5px -5px 5px #868686;
  box-shadow: -5px -5px 5px #868686;
}

 

#Beispiel_B {
  -moz-box-shadow: 0 0 5px #868686;
  -webkit-box-shadow: 0 0 5px#868686;
  box-shadow: 0 0 5px #868686;
}

 

text-shadow

Mit dieser CSS Eigenschaft kann man dem Text einen Schatten geben.
Die ersten 2 Werte stellen wieder die Verschiebung des Schattens auf der x und y Achse dar. Der 3. Wert ist die „Härte“ des Schattens (Blur)

text-shadow: 3px 3px 3px #c704c7;

 

border-radius, rounded corners

Mit border-radius kann ganz einfach abgerundete Ecken bei Box Elementen machen.

#Beispiel1 {
    -moz-border-radius: 15px; //zurzeit noch nötig für Firefox
    border-radius: 15px;
}

 

#Beispiel_A {
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
}

 

#Beispiel_B {
   -moz-border-radius-bottomright: 50px 25px;
   border-bottom-right-radius: 50px 25px;
}

 

#Beispiel_C {
   -moz-border-radius-bottomright: 25px 50px;
   border-bottom-right-radius: 25px 50px;
}

 

#Beispiel_D {
   -moz-border-radius: 1em 4em 1em 4em;
   border-radius: 1em 4em 1em 4em;
}

 

#Beispiel_E {
   -moz-border-radius: 25px 10px / 10px 25px;
   border-radius: 25px 10px / 10px 25px;
}

 

#Beispiel_F {
   -moz-border-radius: 35px;
   border-radius: 35px;
}

 

opacity

Mit opacity kann man die Transparenz eines Elements bestimmen.

background: rgb(255, 0, 0) ; opacity: 0.2;

 

linear-gradient

Mit dieser CSS Eigenschaft, kann man Farbverläufe für den Hintergrund erstellen.

background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome,Safari */
background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */

 

transform

Mit transform kann man die Box Elemente auf verschiedene arten bearbeiten. Zum beispiel kann man mit „rotate“ und einer Prozentangabe, ein Element drehen.

div {
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -moz-transform:rotate(7deg); /* Firefox */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
  -o-transform:rotate(7deg); /* Opera */
}

 

calc()

Mit calc() kann man direkt im CSS Code Berechnungen durchführen. Das ist z.B. bei der Angabe von Breiten hilfreich.

#a, #b { float:left; border:3px double black; width:calc(100%/2 - 2*3px); }

Karte anzeigen Nach oben
 Previous  All works Next