it-swarm.com.de

Schaltflächen in reinem CSS3 oder Image-Sprite

Ich möchte wissen, ob es besser ist, ein Bild für die von mir verwendeten Schaltflächen zu erstellen, oder ob ich mit reinem CSS davonkomme. Ich gebe dir den Code.

html:

<ul id="buttons-dev">
  <li id="button-plan">P<span id="text-plan">plan</span></li>
  <li id="button-develop">D<span id="text-develop">develop</span></li>
  <li id="button-Host">H<span id="text-Host">Host</span></li>
  <li id="button-support">S<span id="text-support">support</span></li>
</ul>

Nun das CSS

ul#buttons-dev li{
    color:#FFF;
    font-size:10px;
    margin:4px 3px;
    height:15px;
    line-height:14px;
    text-align:center;
    width:15px;
    cursor:pointer;
    /*rounding-border*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:2px solid #FFF;
    /*shaddow*/
    -webkit-box-shadow: 1px 1px 2px #33454E;
    -moz-box-shadow: 1px 1px 2px #33454E;
    box-shadow: 1px 1px 2px #33454E;
    /*select*/
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
li#button-plan     {background-color:#CE534D;}
li#button-develop  {background-color:#E2B842;}
li#button-Host     {background-color:#64B6B1;}
li#button-support  {background-color:#B7CF79;}

ul#buttons-dev li span{
    display:none;
    font-weight:bold;
    font-size:14px;
    left:77px;
    position:absolute;
    top:18px;
    width:95px;
    text-align:center;
}
span#text-plan      {color:#CE534D;}
span#text-develop   {color:#E2B842;}
span#text-Host      {color:#64B6B1;}
span#text-support   {color:#B7CF79;}

li#button-plan:hover span, li#button-develop:hover span,
li#button-Host:hover span, li#button-support:hover span{
    display:block;
}

Hinweis: Ich benutze dies für mindestens 8 Teile einer einzelnen Seite.

Deshalb möchte ich wissen, ob es besser ist, nur ein Bild zu verwenden. Vielleicht überlade ich das DOM mit all diesen Elementen.

Oder kann ich einfach damit durchkommen. Ich finde das einfacher, wenn ich etwas ändern möchte. Sie müssen nicht in den gesamten Photoshop/FTP usw. gehen.

2
Saif Bechan

Kürzlich bin ich auf einen ausgezeichneten Artikel über CSS3 Gradient Buttons gestoßen, und das gab mir den Kick, zu reinem CSS anstatt zu Hintergrundbildern zu wechseln. Der gleiche Stil gilt für unterschiedliche Breiten und Höhen von Schaltflächen und passt sich sogar der verwendeten Schriftgröße an. Es kann auch für Schaltflächen sowie für Links und andere Elemente verwendet werden.

Ich fand es viel einfacher, Änderungen vorzunehmen, Schaltflächen können eine dynamische Breite haben und Sie können die Anzahl der herunterzuladenden Dateien reduzieren.

Der einzige Nachteil, den ich bisher festgestellt habe, ist, dass die abgerundeten Ecken im IE nicht angezeigt werden. Version 10 von IE sollte in der Lage sein, sie anzuzeigen, aber ich konnte dies nicht selbst testen.

5
martinstoeckli

"Ich gebe dir den Code." Besser wäre ein Design-Entwurf Ihrer Buttons ...

Meistens benötigen Sie Schaltflächen mit variabler Länge, was mit reinem CSS einfacher möglich ist. Dies allein wäre meiner Meinung nach eine Entscheidung für CSS. Auch bei Verwendung von Grafiken erhöht sich die Ladezeit.

Übrigens:

span#text-plan {}
/* is the same as */
li#button-plan span {}
/* is the same as */
#button-plan span {}

li#button-plan:hover span, li#button-develop:hover span,
li#button-Host:hover span, li#button-support:hover span{
    display:block;
}
/* is the same as */
#buttons-dev li:hover span {
    display:block;
}

Anscheinend möchten Sie auch anklickbare Schaltflächen haben - warum verwenden Sie also nicht <button> oder <a> in Ihrem Markup anstelle von <li>?

0
feeela