Tipps & Tricks

Webdesign & Webentwicklung Teil 2

CSS3 stellt ebenso wie HTML5 eine Weiterentwicklung dar und soll einige Dinge wesentlich einfachen machen. Einige Funktionen sind bereits bekannt und funktionieren in den meisten Browsern Microsoft Internet Explorer ohne weitere Probleme. Die meiner Meinung nach relevantesten Codeschnipsel habe ich hier für Euch zusammengestellt.

Abgerundete Boxelemente:

.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

Schlagschatten für DIV-Container:

.box_shadow {
-moz-box-shadow: 0px 0px 4px #ffffff;
-webkit-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Hintergrundfarben für DIV-Container:

.box_gradient {
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′)”;
}
Schlagschatten für die Schrift:
.box_textshadow {

text-shadow: 1px 1px 3px #ffffff; /* FF3.5+, Opera 9+, Saf1+, Chrome
}

Falls Ihr keine Lust habt alles selbst zu schreiben könnt Ihr auch einfach den CSS3 Generator benutzten. Hier könnt Ihr dann einfach einstellen welche Funktion/Eigenschaft Euer Objekt besitzen soll und den Code dann kopieren und in Euren Quelltext einfügen.

Ich hoffe es hat Euch gefallen und morgen geht es dann weiter mit anderen CSS Tips, Tricks und Kniffen!

0

Unterstütze diesen Blog

Unser Server, die Domain und die ganze Technik kosten Geld. Du kannst uns helfen, diesen Blog werbefrei zu halten. Wie? Werde UnterstützerIn bei Patreon und erhalte dafür tolle Geschenke, oder trink doch einen Kaffee bei Ko-Fi mit uns - Wir danken dir!

Am 11. Dezember 2010 • Von
0
Über

Fotografie ist für mich mehr, als nur auf den Auslöser zu drücken. Ich liebe Lost Places, Drohnen, LEGO und eigentlich alles, was einen Stecker hat.

Keine Kommentare

    Antworten

    Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.