Aus dem Footer des v8-Designs von CSS-Tricks.
footer {
clear:both;
overflow:hidden;
font-size:16px;
line-height:1.3;
}
#footer-boxes {
-moz-column-count:2;
-moz-column-gap:10px;
-webkit-column-count:2;
-webkit-column-gap:10px;
column-count:4;
column-gap:10px;
}
.footer-box {
margin:0 0 10px 0;
display:inline-block;
width:262px;
height:140px;
padding:15px;
background:#e6e2df;
color:#b2aaa4;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
background-position:320px 50%;
background-repeat:no-repeat;
text-decoration: none;
}
.footer-box h5 {
font: bold 24px Sans-Serif !important;
text-transform:uppercase;
font-size:38px;
line-height:1;
padding:0 0 10px 0;
}
.footer-box:hover h5 {
text-shadow:0 0 4px rgba(0,0,0,0.4);
color:white;
}
.footer-box:hover p {
color:white;
}
.footer-box p {
font-size:12px;
width:175px;
line-height:1.5;
}
.footer-box:hover {
background-position:200px 50%;
}
#f-diw {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1288px;
}
#f-diw:hover {
background-color:#237abe;
background-position:186px -1288px;
}
#f-qod {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1448px;
}
#f-qod:hover {
background-color:#37597a;
background-position:186px -1448px;
}
#f-htmlipsum {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1608px;
}
#f-htmlipsum:hover {
background-color:#333333;
background-position:186px -1608px;
}
#f-qod:hover p {
color:#adbde3;
}
#f-bookshelf {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1768px;
}
#f-bookshelf:hover {
background-color:#ff8400;
background-position:186px -1768px;
}
#f-html-ipsum:hover p {
color:#fff8da;
}
#f-twitter {
background-image:url(https://css-tricks.de/images/css-tricks.png);
background-position:290px -1928px;
}
#f-twitter:hover {
background-color:#4ed2fe;
background-position:186px -1928px;
}
#f-forrst {
background-image:url(https://css-tricks.de/images/css-tricks.png);
background-position:290px -2088px;
}
#f-forrst:hover {
background-color:#203f16;
background-position:186px -2088px;
}
#f-forrst:hover p {
color: #92c59c;
}
Super!
Ja, fantastisch! Solch tolle Beiträge von Chris!
Fantastisch…!
Eine großartige Verwendung von CSS, wirklich praktisch, danke. Gibt es eine Möglichkeit, den gleichen Effekt mit jQuery zu erzielen?
Hallo Chris,
Dieser Effekt ist wirklich großartig, aber es gibt keine Erklärung, wie oder warum er funktioniert. Ich bin neu in CSS und finde es leichter zu verstehen, wenn das Wie und Warum erklärt wird… Wenn Sie Zeit haben, ungefähr zu erklären, wie das funktioniert, bin ich sicher, wir würden uns alle freuen, es zu erfahren.
Ich liebe deine Seite!
– Kevin
Ich möchte eine horizontale Flyout-Bilderliste (oder etwas Ähnliches) erstellen. Es gäbe eine Reihe von Bildern auf der linken Seite eines zentralen Bereichs. Wenn man über ein Bild fährt, sollten weitere verwandte Bilder nach rechts herausfliegen.
Damit der Benutzer jedes Bild anklicken kann, das im Flyout angezeigt wird.
Was passiert, ist, dass die Bilder (in li-Tags unter einer ungeordneten Liste platziert) nicht herausfliegen, sie bleiben vertikal gestapelt – und sind somit effektiv vor dem Blick verborgen.
Hilfe?
Es ist großartig, aber ich habe es in IE und Opera versucht, es funktioniert nicht perfekt…
Kannst du das Problem beheben?
Entschuldigung für meine Kritik….
Sieht großartig aus, aber ich stimme Kevin zu… ich würde gerne wissen, wie man das macht. :)
Chris verwendet eine Sprite-Map http://www.alistapart.com/articles/sprites mit dem Hintergrundbild, das in jedem Div so positioniert ist, dass nichts angezeigt wird. Er hat auch alle Eigenschaften auf Übergang gesetzt (in diesem Fall die Hintergrundfarbe und die Position des Hintergrundbilds, beides bei Hover). Durch Ändern der Position auf der Spritemap gleitet das Bild in die Ansicht.
Für andere, die versuchen herauszufinden, wie das funktioniert, sind die wichtigen Teile:
Erstens, der Animationsübergang
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
Schließlich die Änderung der Hintergrundposition während :hover
#f-qod {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1448px;
}
#f-qod:hover {
background-color:#37597a;
background-position:186px -1448px;
}
Die Hintergrundposition beginnt 290 Pixel nach rechts und gleitet beim Überfahren des Elements mit der Maus 104 Pixel nach links. Dies erweckt den Eindruck, dass das Bild so zugeschnitten ist, dass es an den rechten Rand des Kastens passt.
-1448px ist der vertikale Versatz in der Sprite. Im Grunde ist das für dieses Element verwendete Bild 1448 Pixel von oben platziert. Der Tab „overflow:hidden“ verhindert, dass der Rest der Sprite angezeigt wird.
Wenn man sich die Sprite-Map ansieht
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png
Man wird feststellen, dass das Bild nicht wirklich speziell für dieses Element zugeschnitten ist. Daher der verbleibende linke Rändersatz von 186 Pixeln.
Der Rest ist nur eine einfache (aber elegante) Kombination aus Hintergrundfarbe und Textfarbe (Schriftfarbe) Änderung während :hover.
Das werde ich definitiv verwenden. Können wir eine Einschätzung zur Browserkompatibilität bekommen?
Wirklich cooler Effekt. Nützlich in so vielerlei Hinsicht. Ich denke, es wäre auch sehr vorteilhaft, ein Tutorial zu einem ähnlichen Effekt (mit CSS3-Übergängen) zu sehen, das erklärt, wie man es mit einer Art Polyfill und Modernizer mit yep/nope vielleicht implementiert? Nur ein Vorschlag. Nochmals vielen Dank, wirklich hervorragend.
Entschuldigen Sie, dass ich wie ein Noob klinge, welches HTML würde man dafür benötigen?
Öffnen Sie die Demo und klicken Sie dann auf F12, dort können Sie das HTML sehen.
Hallo,
Vielen Dank für das Tutorial.
Können Sie erklären, wie der Code funktioniert?
Ich habe ein neues CSS mit diesem Code erstellt und es auf ein Bild angewendet, aber nichts ist passiert. Wie wendet man diesen Effekt richtig an?
Schöner Effekt. Er ist jedoch nicht browserübergreifend, daher wird er wohl eine verlockende Kuriosität bleiben.
Sehr nützlicher CSS-Code. Das ist der Code, den ich für mein neues Projekt gesucht habe.
Am Anfang
footer {
clear:both;
overflow:hidden;
font-size:16px;
line-height:1.3;
}
haben weder ein '.' noch ein '#', ist es also eine Klasse oder eine ID?
das bezieht sich auf das Tag in HTML5, da es ein natives Tag ist, können Sie es in CSS einfach als footer deklarieren, ohne Klasse oder ID
Es ist ein Tag.
Neemu, ich glaube, es ist eine Klasse.
Das ist ein Tag.
Super cool….
Wie integriere ich das in WordPress?
Das ist ein gutes Beispiel, aber können Sie die HTML-Elemente hinzufügen? Es ist sehr schön zu sehen, wie die Übergänge in der CSS-Datei verwendet werden, aber ein kurzes Beispiel, wie man dies in den HTML-Code implementiert, wäre wunderbar. Ich glaube, einige sind verwirrt durch das HTML5-Footer-Element und wie es in der Seite selbst verwendet werden kann.
Aber wie immer, dies ist ein weiteres super nützliches Tutorial, das ich sehr schätze. Danke Chris! Tolle Arbeit und danke, dass du es mit der Community teilst!
Hallo, haben Sie es in Internet Explorer ausprobiert? Funktioniert auch mit IE 11 nicht :(
Ich habe das Problem in IE bereits gelöst. Ändern Sie einfach colum-count von 4 auf 2 :)
footer-boxes {
column-count:2;
}
Ich habe es ausprobiert… Es funktioniert mit meiner GOOGLE Ver. 31.0.1650.63, aber die gleitende Animation in IE 10 funktioniert nicht… sie macht es zu einem Durcheinander und einer zu einfachen Animation… gibt es eine andere Möglichkeit, dies mit dem IE 10-Problem zu lösen?
Sie fügen dies also in Ihr CSS-Dokument ein, wie verbinden Sie es dann mit Ihrer HTML-Seite? Ich bin verwirrt
Perfekt!
Wo ist der HTML-Code?