Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Bildeffekte mit CSS-Eigenschaft “background-attachment: fixed”

Posted by sura1 - 17. Februar 2009

februar_17
Bookmark and Share

www.askthecssguy.com/

askthecssguy_screenshot

Schöner “Scrolling – Trick” mit fixed background images

Ask the CSS Guy erklärt in seinem Artikel CSS Guy about a scrolling trick with background images, wie der “Scrolling – Trick” mit der CSS-Anweisung „background-attachment: fixed“ zustande kommt und zeigt hierzu 3 interessante Beispiele.

Die CSS-Eigenschaft background-attachment ist nicht weit verbreitet. Sie bestimmt, ob ein Hintergrundbild beim Scrollen mitwandert oder seinen festen Ort auf der Seite behält und wird deshalb in Zusammenhang mit background-image verwendet.

Info:

http://www.css4you.de/background-attachment.html
http://www.css4you.de/example/background-attachment.html

Mit etwas Kreativität lassen sich mit dieser Eigenschaft hübsche Effekte anstellen. Sie kann Ihnen sogar die Arbeit erleichtern, falls Sie mit grafischen Menüs arbeiten. Mit Hilfe von background-attachment können beispielsweise die folgenden Effekte erzielt werden, welche Sie auf dieser Beispielseite auch selbst testen können.

   Fertige Beispiele: Zip_Datei (128 KB)
button1

3 Beispiele von Ask the CSS Guy

Beispiel 1 [Ansehen: bitte Grafik anklicken!]

scrolling_tricks1
Im ersten Beispiel kommt ein Bild in 2 Varianten (1x in Farbe, 1x Schwarz/Weiß) zum Einsatz.

HTML:
<body>
<div class="header">
<h1>Some info about <i>One Flew over the Cuckoo's Nest</i></h1>
<p>The novel by Ken Kesey, with a plot synopsis lifted from Wikipedia</p>
<h2>Background</h2>
<p>Blindtext einsetzen</p>
</div>
<div class="content">
<h2>Plot Synopsis</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
</body>

CSS:

body { padding:0; margin:0; background:#fff; }
.header { width: 600px;
        padding:40px 40px 140px 400px;
        background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 80px 80px fixed;
}
.header h1 {
        font:normal 40px/50px arial;
        color: #735442;
}
.header h2 {
        font: normal 20px/27px arial;
        color: #735442;
}
.header p {
        font:normal 12px/18px verdana;
        color: #735442;
}
.content { width: 600px;
        padding:10px 40px 10px 400px;
        background: transparent url(images/cuckoo_bw.jpg) no-repeat 80px 80px fixed;
}
.content h2 {
        font: normal 20px/27px arial;
        color: #000;
}
.content p {
        font:normal 12px/18px verdana;
        color:#000;
}

Beispiel 2 [Ansehen: bitte Grafik anklicken!]

scrolling_tricks2
Hier werden 5 Grafiken (green,blue,yellow,purple,red) in das Musterbeispiel eingebaut.

HTML:
<body>
<div class="content green">
<h2>Scrolling Tricks - 5 Circles (#1 - green)</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
<div class="content blue">
<h2>Scrolling Tricks - 5 Circles (#2 – blue)</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
<div class="content yellow">
<h2>Scrolling Tricks - 5 Circles (#3 – yellow)</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
<div class="content purple">
<h2>Scrolling Tricks - 5 Circles (#4 - purple)</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
<div class="content red">
<h2>Scrolling Tricks - 5 Circles (#5 - red)</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
</div>
</body>

CSS:

body { padding:0; margin:0; background:#fff; }
.content {
	padding:10px 20px 10px 200px;
	border-bottom:1px solid #666;
	background-color: trasnsparent;
	background-repeat: no-repeat;
	background-position: 20px 20px;
	background-attachment: fixed;
}
.green {
	background-image: url(images/circle_green.gif);
}
.yellow {
	background-image: url(images/circle_yellow.gif);
}
.red {
	background-image: url(images/circle_red.gif);
}
.purple {
	background-image: url(images/circle_purple.gif);
}
.blue {
	background-image: url(images/circle_blue.gif);
}
.content p {
	font:normal 12px/18px verdana;
	color:#000;
}

Beispiel 3 [Ansehen: bitte Grafik anklicken!]

scrolling_tricks3
Im letzten Beispiel kommen 2 Grafiken (document.png, document_shredded.png) zum Einsatz.

HTML:
<body>
<div class="header">
        <div class="wrap">
<h1>Paper Marauder 3000</h1>
<p>When you can't leave any trace behind.</p>
<h1>Scrolling Trick - Shredder</h1>
<img src="images/shredder.png" class="shredder" />
        </div>
</div>
<div class="content">
        <div class="wrap">
<h2>Features</h2>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
<p>Blindtext einsetzen</p>
        </div>
</div>
</body>

CSS:

body { padding:0; margin:0; background:#fff; }
.header {
        background: #dbded1;
        border-bottom:10px solid #000;
}
.header .wrap {
        width: 700px;
        padding:40px 40px 40px 200px;
        background: #dbded1 url(images/document.png) no-repeat 30px 80px fixed;
}
.header h1 {
        font:normal 40px/50px arial;
        color: #735442;
}
.header h2 {
        font: normal 20px/27px arial;
        color: #735442;
}
.header p {
        font:normal 12px/18px verdana;
        color: #735442;
}
.content .wrap {
        width:700px;
        padding:10px 40px 10px 200px;
        background: transparent url(images/document_shredded.png) no-repeat 30px 80px fixed;
}
.content h2 {
        font: normal 20px/27px arial;
        color: #000;
}
.content p {
        font:normal 12px/18px verdana;
        color:#000;
}
img.shredder { position:absolute; left:20px; top:290px; }
   Fertige Beispiele: Zip_Datei (128 KB)
button1

Eine ausführliche Beschreibung und ein Tutorial über Bildeffekte mit der CSS-Eigenschaft „background-attachment: fixed“ finden Sie auch auf der Webseite www.webmasterpro.de.

Ähnliche Artikel:

CSSplay: Inline links – block styling
3D-Wirkung mit CSS: Schatteneffekte für Fotos und Grafiken
CSS-Tricks: Walking Links – Spazierende Links
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links>
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: