CSS Tipps und CSS3 Technik

Das Border-Verhalten von Browsern bietet eine Möglichkeit Kanten und dreieckige Elemente darstellen zu können. Hiermit ist also eine weitere Gestaltungsmöglichkeit neben CSS3 möglich. Die Technik wird auch mit älteren Browsern wie dem Internet Explorer 6 unterstützt und kann somit beliebig eingesetzt werden. Im Folgenden werde ich kurz ein kleines Beispiel für die Gestaltung dieser Kanten zeigen. Anlass für dieses Tutorial hat mir ein Artikel auf net.tutsplus.com gegeben. Wer Anmerkungen oder Vorschläge zur Verbesserung hat kann sich gerne melden.

Hier nun erst einmal die Grundlegende CSS Gestaltung:

.shadow{ border-right:70px solid #666; border-bottom:50px solid transparent; line-height: 0; width:0px; height:0px; position: relative; left:-70px; }
.content{ width:400px; border:1px solid #AAA; float:left; margin-left:70px; margin-bottom:30px; }
h1{ font-family: helvetica, arial, sans-serif; background-color:#444; color:#FFF; position: relative; width: 70%; left:-20px; padding: 5px; padding-left:10px; margin: 0px; margin-top:20px; }
.arrow{ width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #555; position: relative; left:-20px; }
<div class="content"> <h1>Überschrift</h1> <div class="arrow"></div> <p>Textinhalt</p> <div class="shadow">&nbsp;</div> </div> Das ergibt folgendes Ergebnis: Einfache Gestaltung Wenn jetzt noch ein wenig CSS3 mit ins Spiel kommt erhalten wir dieses Ergebnis: Gestaltet mit CSS3 /*CSS 3 Aenderungen*/ .content{ -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } h1{ background: -moz-linear-gradient(top, #555, #333); background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); -moz-box-shadow: 2px 1px 5px #444; -webkit-box-shadow: 2px 1px 5px #444; box-shadow: 2px 1px 5px #444; text-shadow: 1px 1px 2px #777; }

Webprojekt – Windrad Produktionen

Logo
Logo windrad-produktionen

Diese Projekt begann im Frühjahr diesen Jahres und wurde von meinem Musiklehrer Tobias Schütte angefragt, was ich natürlich gerne gemacht habe :-) Es beinhaltet ein Design, was mit Photoshop erstellt und mit Dreamweaver gestaltet wurde. Das markante Slidemenü ist durch Einsatz von Mootools zustande gekommen. Des weiteren befindet sich hier auch im Hintergrund ein selbst entwickeltes Content Management System (CMS) um die Gestaltung und Pflege der Seite vom Besitzer selbst übernehmen zu lassen. Außerdem wurde auch wieder die Flashgalerie von FlashJunior verwendet. PHP Programmierung der hauptsächliche Teil der Arbeit an diesem Projekt.

Screenshot

windrad-produktionen Screenshot

Webprojekt – Xcite-live

 

Logo Xcite-live
Logo Xcite-live

Anfang diesen Jahren habe ich eine Homepage eines guten Bekannten erstellt, dessen Unternehmen Technik für Events zur Verfügung stellt und auch Musik für den gegebenen Anlass spielt.

 

Das Projekt wurde mit Adobe Photoshop Designed und mit dem alten Macromedia Dreamweaver strukturiert. Die Flashgallerie erhielt ich freundlicher Weise von FlashJunior. Somit war es möglich die gesamte Seite mit PHP ein wenig Dynamik einzuhauchen. Das kleine Projekt beinhaltet ein simples selbst entwickeltes CMS, was rein PHP basierend ist.
Die Pflege der Seite ist nun vom Besitzer selbst möglich. Er kann Referenzen, Bilder und Links selbstständig austauschen und verwalten.
Screenshot
Xcite-live Screenshot