Schlagwörterarchiv: Tricks

Photoshop und die wundersame Verwandlung eines Models

Photoshop macht`s möglich – Verwandlung in ein Supermodel

Wundern Sie sich auch manchmal, woher all die tollen Frauen in den Modemagazinen herkommen. Diese Models sehen fantastisch aus und scheinen die Schönheit gepachtet zu haben.

Doch weit gefehlt! Das obige Gif-Bild zeigt, was Photoshop aus einer ganz normalen Frau mit vielen kleinen Tricksereien machen kann. Es ist offensichtlich völlig egal, wie das Model vorher aussieht!

Weiterlesen

CSS für Anfänger: Bilderrahmen um Grafiken mit CSS

Mit CSS schöne Bilderrahmen um Grafiken gestalten

Mit CSS schöne Bilderrahmen um Grafiken gestalten

Auf der Webseite von The Web Squeeze gibt es ein interessantes Tutorial, welches sich mit dem Einsatz der CSS-Eigenschaften border und background beschäftigt, um schöne und ansprechende Bilderrahmen um Grafiken/Bilder erstellen zu können.

Ich habe mir die einzelnen Punkte des Artikels genauer angesehen und möchte Ihnen die meiner Meinung nach besten 6 Beispiele näher vorstellen. Ich habe die Vorlagen mit meinen eigenen Grafiken ausgestattet und die CSS- und HTML-Formatierungen an meine Beispiele angepasst.

Alle verwendeten Bilder/Kunstwerke habe ich selber gemalt/erstellt. Sie können diese neben meinen anderen Kunstwerken in meinem Webalbum auf Google Picasa ansehen. Weiterlesen

CSS-Tip: Doppelte Rahmen um div-Boxen erstellen

Doppelte Rahmen um div-Boxen mit Pseudo-Klassen :after + :before

Ich möchte Ihnen heute das kurze Tutorial „Multiple Borders with Simple CSS“ von Jeffrey Way von NetTuts+ vorstellen.

In diesem wird erklärt, wie Sie doppelte Rahmen um div-Boxen ohne Einsatz von Grafiken, sondern nur mit CSS unter Verwendung der Pseudo-Klassen :after und :before erstellen können.

Sehen Sie sich bitte dazu das YouTube-Video an

Ich habe das vorliegende Beispiel von Jeffrey Way ein wenig bearbeitet und möchte Ihnen nachfolgend meine Version vorstellen. Die Änderung ist geringfügig und betrifft nur die Größe der div-Box. Die Höhe und Breite der Box betragen bei mir jeweils 400 Pixel (Original: je 200 Pixel).

Quick-Tip ansehen | Fertiges Beispiel herunterladen (Zip-Datei: 4,0 KB)

HTML-Quellcode:

<body>
     <div id="box"></div>
</body>

CSS-Anweisungen:

body { background: #d2d1d0; }
#box {
     background: #f4f4f4;
     border: 1px solid #bbbbbb;
     width: 400px;
     height: 400px;
     margin: 60px auto;
     position: relative;
}
#box:before {
     border: 1px solid white;
     content: '';
     width: 398px;
     height: 398px;
     position: absolute;
}
#box:after {
     content: '';
     position: absolute;
     width: 396px;
     height: 396px;
     border: 1px solid #bbbbbb;
     left: 1px; top: 1px;
}

Quick-Tip ansehen | Fertiges Beispiel herunterladen (Zip-Datei: 4,0 KB)

Das Beispiel wird in allen gängigen Browsern in der jeweils neuesten Version korrekt dargestellt. Hinsichtlich des Internet Explorers wird festgestellt, dass der Quick-Tip bis zum IE7 nicht funktioniert. Lesen Sie bitte dazu auch die zahlreichen Kommentare im Original-Artikel „Multiple Borders with Simple CSS“ – dort erfahren Sie auch andere Möglichkeiten, wie Sie doppelte Rahmen um div-Boxen realisieren können!