Als Nachtrag zum Post von gestern noch der versprochene Entwurf zum halbtransparenten Hintergrund für die Kacheln in der dynamische Ansicht 'Flipcard'. Das ist nur eine Skizze und gedacht für Leute, die Lust haben, mit den Kachenln rumzuexperimentieren. Bitte erst in einem Testblog ausprobieren!
Code
.items .bilder .card .front, .items .bilder .card .back {
background-color: transparent;
-webkit-transition: all 0.5s ease-in 0s; /*Safari ab 3.2, Chrome */
-moz-transition: all 0.5s ease-in 0s; /*FF ab 4.0*/
-ms-transition: all 0.5s ease-in 0s; /* Internet Explorer ab 10?*/
-o-transition: all 0.5s ease-in 0s; /* Opera ab 10.5 */
transition: all 0.5s ease-in 0s; /*CSS-Standard*/
}
.items .bilder .card .back .date, .items .bilder .card .back .title {
color: transparent;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}
.items .bilder .card .front .title{
background-color: rgba(238, 148, 37, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99EE9425,
endColorstr=#99EE9425); /* IE6–IE9 */
zoom: 1;
color: #116bda;
}
.items .bilder .card .back .comments-count {
visibility:hidden;
}
.items .bilder .card .back:hover .comments-count {
visibility:visible;
}
.items .bilder .card:hover .back {
background-color: rgba(255, 255, 255, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fFFFFFF,
endColorstr=#7fFFFFFF);
zoom: 1;
}
.items .bilder .card:hover .back .title, .items .bilder .card:hover .back .date {
background-color: transparent;
color: rgba(0, 0, 0, 0.5); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
-webkit-transition: all 0.5s ease-out 0s; /*Safari ab 3.2, Chrome */
-moz-transition: all 0.5s ease-out 0s; /*FF ab 4.0*/
-ms-transition: all 0.5s ease-out 0s; /* Internet Explorer ab 10?*/
-o-transition: all 0.5s ease-out 0s; /* Opera ab 10.5 */
transition: all 0.5s ease-out 0s; /*CSS-Standard*/
}
.items .bilder .card:hover .front .title {
background-color: transparent;
color: transparent;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
Kommentar
Die halbtransparente Farbe ist in RGBA geschrieben - ein Format, was den Internet Explorer bekanntlich überfordert, deshalb der
DXImage Filter. Muss nicht unbedingt sein, das Ergebnis ist für den Internet Explorer eh so lala. Der ganze Rest vom Code ist deshalb notwendig, weil bei 'Transparenz' Titel, Datum und Kommentare von Vorder.- und Rückseite durchscheinen und das jeweiligen Element ausgeblendet werden muss. Um das nicht so 'flackrig' zu gestaltet sondern weicher, habe ich noch die transition dazugeschrieben.Wie wird's angewendet?
Der Coder gibt Kacheln mit dem Label 'Bilder' (oder auch 'bilder') in der dynamischen Ansicht Flipcard eine halbtransparente Vorder.- und Rückseite. Das funktioniert je nach Browser unterschiedlich gut, am besten seht ihr den Effekt in Webkit-Browser, am schlechtesten im Internet Explorer. Aber das ist ja nichts neues :=(.