5202

ein Blog über technische Fragen zu Blogger

Skizzenbuch: Halbtransparente Kacheln

von
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 :=(.

Fragen? Anregungen?

Ihr steckt irgendwo fest und kommt nicht weiter? Im Post sind Fehler? Ihr habt eine wesentliche einfachere Methode gefunden? Ich freue mich über eure Fragen, Kommentare oder auch weiterführende Ideen!