0
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!

Unterstütze diesen Blog

Unser Server, die Domain und die ganze Technik drumherum sind mittlerweile ganz schön teuer geworden. Du kannst uns helfen, diesen Blog weitestgehend werbefrei und am laufen zu halten. Wie? Werde bei Unterstützer bei Patreon und erhalte dafür tolle Geschenke, oder trink einen Kaffee bei Ko-Fi mit uns - Wir danken dir!

Keine Kommentare

    Kommentar verfassen

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