5202

ein Blog über technische Fragen zu Blogger

Blogger: Link-Listen Gadget gestalten

von
Das Link-Listen Gadget von Blogger ist im Ausgangszustand eine simple ungeordnete Liste - alles in allem toootal langweilig. Ich habe Lust gehabt, daraus mit CSS3 was spannenderes zu machen. Ich beschreibe die einzelnen Arbeitsschritte, vielleicht motiviert das den einen oder anderen, mal selber was auszuprobieren. Ich gebe immer nur die CSS von den einzelnen Schritten - am Ende dann eine Zusammenfassung, wo ich auch die Vendor-Präfixe für die verschiedenen Browser ausschreibe.

Ausgangs-Situation

So schaut das Link-Listen Gadget in der Ausgangslage aus. Im ersten Schritt entferne ich die Listenpunkt und die Link-Unterstriche, gebe eine Hintergrundfarbe, einen inneren Rand und eine Textfarbe/.-größe.
.LinkList li {
   list-style: none
}
.LinkList a{
   background-color:#3bb341;
   font-size:30px;
   text-decoration:none;
   color:#fff;
   position:relative;
   padding:10px 50px 10px 20px;
}

Nach Schritt 1


Die Link-Liste ist jetzt ein durchgehender Block - um die einzelnen Links voneinander abzuheben gebe ich den Listenpunkten einen äußeren Rand.
.LinkList li {
   margin: 20px 0;
}

Nach Schritt 2


Ich runde die Ecken der Listenpunkte ein ganz klein bisschen:
.LinkList a {
   border-radius: 5px;
}

Nach Schritt 3


Ich setze rechts ein Pseudo-Element ein, das später zum 'Zeiger' wird:
.LinkList a:before {
   content:"";
   width:20px;
   height:20px;
   background-color:#316d55;
   position:absolute;
   right:15px;
   top:50%;
   margin-top:-9px;
}

Nach Schritt 4


Ich 'runde' das Pseudo-Element und setze einen kleinen Grafik-Zeiger ein:
.LinkList a:hover:before {
   background-image:url(http://goo.gl/7wjMb);
   background-repeat:no-repeat;
   background-position:center center;
   border-radius: 50%;
}

Nach Schritt 5


Ich gebe den Listenpunkten ein Gradient mit CSS3 - das macht die Oberfläche spannender:
.LinkList a{
   background-image: linear-gradient(bottom, #2e855e 0%, #379d7f 100%)
}

Nach Schritt 6


Als Hover drehe ich den Gradient um und verschiebe die Listenpunkte um 3px nach oben:
.LinkList a:hover {
  background-image: linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
  top: 3px
}

Nach Schritt 7


Ich definier einen Schatten unterhalb der Listenpunkte:
.LinkList a:hover {
  box-shadow: inset 0px 1px 0px #2ab735, 0px 5px 0px 0px #154810, 0px 10px 5px #999;
}

Nach Schritt 8


Beim hovern (drüberfahren mit der Maus) verkleinere ich den Schatten - das verstärkt den Bewegungseffekt:
.LinkList a:hover {
  box-shadow: inset 0px 1px 0px #2ab735, 0px 2px 0px 0px #154810, 0px 5px 3px #999;
}

Nach Schritt 9


Ich definiere einen Schatten im Pseudoelement:
.LinkList a:before {
  box-shadow: inset 0px 1px 0px #052714, 0px 1px 0px #60c956;
}

Nach Schritt 10


Ich gebe dem Schatten im Pseudoelement einen Hover und verschiebe ihn beim hovern um 12px nach oben - das ergibt einen 3D-Effekt:
.LinkList a:hover::before {
  top:50%;
  margin-top:-12px
  box-shadow: inset 0px 1px 0px #60c956, 0px 3px 0px #0e3818, 0px 6px 3px #1a8037;
}

Fertig!

So schaut nun die Link-Liste im fertigen Zustand aus - wesentlich interessanter und spannender als vorher nur die bloße Liste, oder?

Zusammenfassung

Hier die gesamte CSS als Block - wenn ihr etwas ändert, müsst ihr auf die Vendor-Präfixe achten, d.h. damit in allem Browser das gleiche angezeigt wird, müsst ihr die CSS für jeden Browser einzeln definieren. Ich habe die Blöcke zusammengefasst, ich denke es ist klar, wie was zu schreiben ist, oder? Wenn nicht fragt noch mal nach, dann erläutere ich's detaillierter ...
.LinkList li{
   list-style: none;
   margin: 30px;
}
.LinkList a{
 background-color:#3bb341;
 font-size:30px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 50px 10px 20px;
    background-image: -webkit-linear-gradient(bottom, #2e855e 0%, #379d7f 100%); 
       background-image: -moz-linear-gradient(bottom, #2e855e 0%, #379d7f 100%);
        background-image: -ms-linear-gradient(bottom, #2e855e 0%, #379d7f 100%);
         background-image: -o-linear-gradient(bottom, #2e855e 0%, #379d7f 100%);
            background-image: linear-gradient(bottom, #2e855e 0%, #379d7f 100%);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 0px #2ab735, 0px 5px 0px 0px #154810, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab735, 0px 5px 0px 0px #154810, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #2ab735, 0px 5px 0px 0px #154810, 0px 10px 5px #999;
         box-shadow: inset 0px 1px 0px #2ab735, 0px 5px 0px 0px #154810, 0px 10px 5px #999;
}
.LinkList a:hover{
 top:3px;
    background-image: -webkit-linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
       background-image: -moz-linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
        background-image: -ms-linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
         background-image: -o-linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
            background-image: linear-gradient(bottom, #379d7f 0%, #2e855e 100%);
 -webkit-box-shadow: inset 0px 1px 0px #2ab735, 0px 2px 0px 0px #154810, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab735, 0px 2px 0px 0px #154810, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #2ab735, 0px 2px 0px 0px #154810, 0px 5px 3px #999;
         box-shadow: inset 0px 1px 0px #2ab735, 0px 2px 0px 0px #154810, 0px 5px 3px #999;
}
.LinkList a::before {
 background-color:#316d55;
 background-image:url(http://goo.gl/7wjMb);
 background-repeat:no-repeat;
 background-position:center center;
 content:"";
 width:20px;
 height:20px;
 position:absolute;
 right:15px;
 top:50%;
 margin-top:-9px;
 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
      -o-border-radius: 50%;
            border-radius: 50%;
 -webkit-box-shadow: inset 0px 1px 0px #052714, 0px 1px 0px #60c956;
    -moz-box-shadow: inset 0px 1px 0px #052714, 0px 1px 0px #60c956;
      -o-box-shadow: inset 0px 1px 0px #052714, 0px 1px 0px #60c956;
         box-shadow: inset 0px 1px 0px #052714, 0px 1px 0px #60c956;
}
.LinkList a:hover::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #60c956, 0px 3px 0px #0e3818, 0px 6px 3px #1a8037;
    -moz-box-shadow: inset 0px 1px 0px #60c956, 0px 3px 0px #0e3818, 0px 6px 3px #1a8037;
      -o-box-shadow: inset 0px 1px 0px #60c956, 0px 3px 0px #0e3818, 0px 6px 3px #1a8037;
         box-shadow: inset 0px 1px 0px #60c956, 0px 3px 0px #0e3818, 0px 6px 3px #1a8037;
}

Kommentare

Was haltet ihr von der Idee, das Link-Listen Gadget a bisserl interessanter zu gestalten? Für die Praxis brauchbar oder nur eine Skizze, ohne praktische Relevanz?