Der Backgroundtrick
11.10.2010 - 02:04
Ihr fragt Euch wie das mit dem Cover von Dmig 5 funktioniert? Hier vier hoffentlich erklärende Beispiele:
Beispiel 1
3 Layer auf 3 verschiedenen Ebenen. Der mittlere Layer ist fix positioniert.
Beispiel 2
Zwei fix positionierte Hintergrundbilder. Eines im Body und das andere in einem absolut positionierten Layer darüber.
Jetzt nur noch die beiden ersten Beispiele kombinieren:
Beispiel 3
Wie Beispiel 1, nur daß nicht der mittlere Layer fix positioniert ist, sondern das Hintergrundbild darin wie in Beispiel 2.
Beispiel 4
Oder Beispiel 1 mit einem weiteren vierten Layer darüber wie in Beispiel 2.
Unabhängig, wobei HTML zuerst fertig war und so das PDF beinflusst hat glaube ich.
Wirkt innovativ. Dabei so simple.
50 New Useful CSS Techniques, Tutorials and Tools
[...]This page provides links to a couple of examples for the trick used on Design Made In Germany 5 where a couple of layers are used and the middle layer has a fixed background, while other layers have absolute positioning. The visual effect is unique and interesting.[...]
Inspirierende Beispiele.
Ich bin auch beeindruckt. So einfacher Code mit so einem Wow-Effekt kombiniert! Respekt!
Echt, so simpel und trotzdem so 2010. Ihr solltet öfter so Kurztutorials & Tips machen :) Mich würde z.B. interessieren wie ihr diese tollen Fade-Effekte bei den Formularen gemacht habt! :)
quixote
Bwahahaha! I love your Doctype declaration!
(And the technique is elegant too :D)
@Danijel:
input {
background-color: #eee;
-webkit-transition: background-color 700ms ease-out;
}
input:focus {
background-color: #ddd;
-webkit-transition: background-color 300ms ease-in;
}
Funktioniert halt nur im Safari/Chrome. Firefox zieht aber mit der nächsten großen Version nach..
@Martin: Vielen Dank, das hat so ein tollen Look. <3
Fabiano Guerra
Einfach genial,, einfach und schafft beeindruckende Ergebnisse, sehr godt … thanks for sharing …
Kommentieren
Alex
Wer hätte gedacht, dass es so einfach ist.
Wie hab ihr eigentlich die zwei Ausgeben erstellt? Erst die PDF und dann Web oder unabhängig?