Be KreaTief

[CSS] Buttons ✤✤✤

Verfasser:
Halli Hallo =)
Ja, ich bin grad fleissig. Bevor es nach Schottland geht, denk ich jetzt mal nicht an Schule, sondern schreib lieber noch ein Tutorial für euch. ^^
Diesmal geht es um Buttons!
Und hier das Ergebnis:


Der Code ist eeeeewig, weil das alles noch für jeden einzelnen Browser definitert werden muss. Aber ich erklär euch grundsätzlich was hier was macht =)

Oh und das Tutorial ist wieder aufgrund des Ursprungscodes von


Oliver hat dort das Linklistengadget verschönert und ich hab den Code so angepasst, dass er allgemein funzt. Wenn ihr aber wissen wollt, wie ihr direkt Linklisten verändern könnt, klickt auf den Button!
Okay. Also zuerst natürlich, wo ihr den Code braucht. Wenn ihr den Code überall verwenden wollt, würd ich definitiv empfehlen ihn beim Vorlagendesigner reinzukopieren, ansonsten geht das natürlich auch immer in einem HTML-Gadget oder Post.
Dann müsstet ihr den ganzen Code in folgende Tags packen:
 <style="text/css"> </style>

Okay, legen wir los.
Zu Beginn haben wir einen Link, dem wir eine Hintergrundfarbe, eine Grösse und eine Textfarbe geben. Ausserdem soll das Unterstreichen des Links weg sein. Dann kommt noch bisschen Blabla, welches den Rand des Buttons markiert.
Der Code schaut dann so aus:
#button a{
 background-color:#ff6b7c;
 font-size:20px;
 text-decoration:none;
 color:#fff;
 position:relative;
}
Oh und unser Button momentan so:



Als nächstes bekommt der Button ein Gradient um ihn etwas dynamischer aussehen zu lassen.
Der Code dafür muss eben für alle Browser angepasst werden, aber eigentlich bedeutet jede Zeile das Gleiche. Erste Farbe zu zweite Farbe in nem Gradient. Ausserdem runden wir die Ecken ab (und wieder viel Code, aber nur eine Aussage in verschiedenen Formulierungen)
#button a{
background-image: -webkit-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
       background-image: -moz-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
        background-image: -ms-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
         background-image: -o-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
            background-image: linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}

Der Button schaut nun so aus:


Der nächste Schritt ist ein Schatten, damit der dreidimensionale Effekt nachher noch besser rüberkommt:
#button a{
-webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
}

Und das ist alles für die Linkoptik. Unser Button schaut also in der Grundbeschreibung folgendermassen aus:



Als nächstes gehen wir zum Hover über. Also zum Aussehen des Buttons, während wir mit der Maus drüber schweben.
Der Hover soll folgendes tun. Er soll das Gradient umkehren und den Schatten verkürzen. Ausserdem soll er 3px nach unten rücken.
Im Code hat das also ein Wechsel der Farbcodes zur Folge, sowie eine Schattenverkürzung. Die 3px werden einfach mit top angegeben.
#button a:hover{
 top:3px;
    background-image: -webkit-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
       background-image: -moz-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
        background-image: -ms-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
         background-image: -o-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
            background-image: linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
}


Und das ist alles. Der Button könnte so eigentlich fertig sein (drüberfahren um die Änderung zu sehen)



Aber, um den Effekt noch cooler zu machen, gibt's dieses tolle Pfeilchen. Und wie das hinzukommt, folgt jetzt.

Dieses kleine Pfeilchen ist eigentlich einfach ein leeres Element, welches hinzugefügt wird. Und hier der Code für den Link allgemein:
Zuerst bestimmt ihr die Farbe des Kreises. Der Link ist für den Pfeil. Dann werden einfach Grösse und Postion definiert. Dann wird aus dem Quadrat ein Kreis und auch hier werden wieder Schatten hinzugefügt um den ganzen 3D-Effekt zu gestalten.
#button a::before {
 background-color:#c10031;
 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 #871230, 0px 1px 0px #ff4681;
    -moz-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
      -o-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
         box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
}

Okay. Das ganze schaut jett folgendermassen aus:



Und nun der letzte Schritt CSS. Der Hover für den Kreis mit dem Pfeil. Hier passiert der wahre 3D-Effekt!
#button a:hover::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
}

Und das ist sie. Die gesamte CSS. Und so schaut's aus:
#button a{
 background-color:#ff6b7c;
 font-size:20px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 50px 10px 20px;
    background-image: -webkit-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
       background-image: -moz-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
        background-image: -ms-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
         background-image: -o-linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
            background-image: linear-gradient(bottom, #ba2e48 0%, #9b0027 100%);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 5px 0px 0px #860027, 0px 10px 5px #999;
}
#button a:hover{
 top:3px;
    background-image: -webkit-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
       background-image: -moz-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
        background-image: -ms-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
         background-image: -o-linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
            background-image: linear-gradient(bottom, #9b0027 0%, #ba2e48 100%);
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 2px 0px 0px #860027, 0px 5px 3px #999;
}
#button a::before {
 background-color:#c10031;
 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 #871230, 0px 1px 0px #ff4681;
    -moz-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
      -o-box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
         box-shadow: inset 0px 1px 0px #871230, 0px 1px 0px #ff4681;
}
#button a:hover::before {
 top:50%;
 margin-top:-12px;
 -webkit-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
    -moz-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
      -o-box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
         box-shadow: inset 0px 1px 0px #ff0050, 0px 3px 0px #800020, 0px 6px 3px #d20035;
}

Okay. Jetzt haben wir die CSS, doch wie kriegen wir die Buttons hin?
Dafür braucht ihr zu allererst einen Link.
<a href="LINK"> Button </a>
diesen Link müsst ihr in einen <div>-Container packen.
<div><a href="LINK"> Button </a> </div>
Und damit nun auch das CSS verwendet wird, welches den Button definiert, müssen wir dem Container eine id geben. DIese id ist das, was wir mit dem Hashtag (#) definitert haben. Also button.
Der Button wird also angezeigt wenn wir folgendes eingeben:
<div id="button"> <a href="LINK"> Button </a> </div>


Und das war's auch schon =)
Ich find die Buttons total toll und werd sicher Verwendung dafür finden, ich hoffe der ein oder andere von euch auch.

Und hier noch eine kleine Variation, wie der Button auch aussehen könnt ^^


[Blogger] VerschiedeneTexteffekte mit CSS/HTML ✤

Verfasser:



Hey Zusammen ^^
Ja, ich bin's wieder und wie ihr voraussichtlich sehen könnt, hab ich hier bereits ein paar einfache Effekte eingefügt, was den Text angeht.

Und darum geht es auch. Ich möcht euch heute ein paar einfach Text-effekte mithilfe von Html bzw. CSS zeigen.
Ich fang mit einfachen Tags an, die man auch direkt bei Verfassen reinmachen kann, aber wenn man seine Posts vorwiegend im HTML schreibt, oder zum Beispiel irgendwo anders HTML-Tags verwenden will (ein Beispiel wären Blogger-Kommis^^) will, ist es definitiv nicht schlecht diese zu kennen.
Bei denjenigen, bei denen keine Erklärung nötig ist, zeig ich euch einfach den Code und darüber jeweils das Ergebnis.

Dieser Text wird Fett angezeigt.
Dieser hier auch.
<b>Dieser Text wird Fett angezeigt.</b>
<strong>Dieser hier auch.</strong>

Hier haben wir ein Beispiel für einen kursiven Text
Und dieser Tag, hat den gleichen Effekt
<i>Hier haben wir ein Beispiel für einen kursiven Text</i>
<em>Und dieser Tag, hat den gleichen Effekt</em>

Und hier haben wir einen Text, mit dem wir Code anzeigen können, wie zum Beispiel <a href='bliblablubbisteinlink'>BliBlaBlubb</a>
<code>Und hier haben wir einen Text, mit dem wir Code anzeigen können, wie zum Beispiel <a href='bliblablubbisteinlink'>BliBlaBlubb</a> </code>



Der Text hier wird mittig angezeigt

Der ebenfalls
<center>Der Text hier wird mittig angezeigt</center>
<p align='center'> Der ebenfalls </p>

Und der fährt so toll von einer Seite zur anderen ^^
<marquee>Und der fährt so toll von einer Seite zur anderen ^^</marquee>

grosser Text
<span style="font-size: large;">grosser Text</span>

Unterstrichener Text
<u>Unterstrichener Text</u>

Durchgestrichener Text
<strike>Durchgestrichener Text</strike>

Roter Text
ebenfalls
<div style="color: red;"> Roter Text </div>
<p style='color:red'> ebenfalls </p>
Hier kann das red natürlich auch durch den Farbcode ersetzt werden. (#FF0000).

Nun zu den CSS-definierten Stilen.
Zu Beginn definiert man das CSS, dann wendet man es an.
Dieser Text erscheint nur in Grossbuchstaben.
/*CSS
----------------*/
<style type="text/css">
p.allesgross {text-transform:uppercase};
</style>

//angewendet
<p class='allesgross'> Dieser Text erscheint nur in Grossbuchstaben.</p>

Dieser Text ist so zusammengedrückt, dass man ihn nicht mehr lesen kann.
<style type="text/css">
p.eng {letter-spacing: -3px}
</style>
<p class='eng'> Dieser Text ist so zusammengedrückt, dass man ihn nicht mehr lesen kann.</p>

Und damit kann man bestimmte Details hervorheben die für wichtig erachtet werden.
Und damit kann man <span class='textmarker'> bestimmte Details hervorheben </span> die für wichtig erachtet werden.

<style type="text/css">
span.textmarker{
background-color:yellow;
}
</style>

Joa, das sind so die "schnellen" Formatierungen, aber was, wenn man einige dieser Stile kombinieren will? Es empfielt sich, ein CSS zu schreiben, welches man einfügen kann, wo immer man will.

Hier seht ihr, dass die Schrift auf "Lobster Two" gewechselt hat, die Grösse bei 20 Punkt, fett und der Zeilenabstand etwas vergrössert ist, sowie die Farbe "magenta" hinzugefügt wurde.

<style type="text/css">
.PrettyLook{
font-family: Lobster Two;
font-size: 20pt;
font-style: bold;
line-height: 20pt;
color: magenta;
}
</style>

<p class='PrettyLook'> Hier seht ihr, dass die Schrift auf "Lobster Two" gewechselt hat, die Grösse bei 20 Punkt, fett und der Zeilenabstand etwas vergrössert ist, sowie die Farbe "magenta" hinzugefügt wurde.</p>

Joa, das war's jetzt mal. Ich hoffe es hat dem ein oder anderen von euch was gebracht. =)

[BLOGGER] Floatlinks ✤

Verfasser:
Ich hab jetzt mal den Übertitel Floatlinks genannt, doch ihr könnt diese Methode genauso gut verwenden, wenn ihr Bilder oder Text irgendwo auf eurer Seite haben wollt, die da auch schön bleiben.
Bei mir sind das die beiden Links oben zu Twitter und Google+ als auch der Scrollsparer, der bei draufklicken direkt wieder zum Seitenbeginn führt.

Doch wie macht man sowas eigentlich?

Read More