[CSS] Image Styles ✤✤✤

NEEEEEIIIIIIIIIIIIIIIIN!!!!! Die alte Blogger-Oberfläche ist weg! Komplett. Für immer! *heuuuul* Die neue ist scheisse! *googlegeradeextremblödfinde*
Jetzt geht's mir besser. Legen wir los. (R.I.P. beloved Blogger-Oberfläche!!!)

Okay, was macht man, wenn man dreieinhalb Stunden zu vertreiben hat, eigentlich an der Maturarbeit schreiben sollte, aber plötzlich ein unbeschreibliches Bedürfnis hat, es nicht zu tun? Da man sowieso im Starbucks sitzt und Kaffee schlürft, schreibt man doch am besten einfach das Tutorial zu Ende ;D

Puh das Intro war wiedermal überlang... jetzt geht es aber mit dem Tut los.
Zu Beginn möchte ich darauf hinweisen, dass diese CSS möglicherweise mit anderen Definitionen in Konfussion kommt, weswegen ich auf dem Blog hier alle die mit den hover-Möglichkeiten nicht richtig darstellen kann.
Deswegen habe ich ein DEMO gebaut, wo ihr bereits alle Styles sehen könnt, die ich euch vorstellen werde. Tut mir leid, wegen der Zeilenumbrüche. Ich versuche sie noch zu entfernen.

Wollt ihr also einen dieser Styles verwenden, sorgt dafür, dass ihr alle Definitionen, die ihr sonst für eure Bilder so macht, entfernt und entscheidet euch am Besten nur für einen Style. Das wirkt allgemein strukturierter.

Okay, legen wir los. Das Tutorial, welches die ganzen Styles erklärt hat, ist übrigens von WebdesignerWall. Allerdings sind die Erklärungen der einzelnen Codes gleich Null. Darum wollt ich selbst drüber schreiben. Ausserdem ist es jetzt Deutsch ^^

Anwendung:
Die Anwendung des Codes funktioniert immer genau gleich:
<div class="stylename"><a href="Link"><img src="Bildlink"/></a></div>

Ich mach's so, dass ich euch zuerst das Ergebnis zeige, dann den Code, den ich dann noch kurz erläutern werde.
.circle {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}
Okay, also dieser Code macht aus dem Bild einen Kreis. Der Code, der dafür verwendet wird, ist glaube ich mitlerweile bekannt, schliesslich verwende ich ihn in nahezu jedem Tutorial. Den boder-radius, also den Code für abgerundete Ecken. em ist einfach eine andere Angabe als Pixel, in diesem Falle fünfzig. Der Radius wird so stark vergrössert, dass die Rundungen sich treffen und so den Kreis bilden.
Ganz einfach =)

.card {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
Okay, dieser Code hier erstellt so eine Art Karteneffekt, indem mehrere Schatten am Bild angebracht werden. Die Schatten sind alle inset, also innerhalb der box, also des Bildes und nicht ausserhalb. Die Farbe ist in rgba angegeben, zudem ich ja letztens einen kleinen QuickTip geschrieben habe. Sie sind relativ nahe am Rand gehalten und erstellen wirklich nur einen ganz subtilen 3D-Effekt. Dann natürlich noch die abgerundeten Ecken, Karten ohne runde Ecken gibt es nicht. =)

.3D {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
    box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
Hier haben wir eigentlich wieder den gleichen Aufbau wie beim Card, nur ist hier der Schatten grösser gehalten, und ein deutlicher 3D-Effekt entsteht. Ich glaube viel mehr braucht man nicht zu erklären. Wie immer muss man auch verschiedene Browser berücksichtigen und ihre Namenskonventionen.

.3D_soft {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
    box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
Und hier noch eine softere 3D-Version. Ihr seht mit minimen Änderungen (hier wurde die Verwisch-möglichkeit von box-shadow verwendet. Durch eine kleine 1 bekommt es schon eine andere Wirkung.

.cutout {
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
    box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}
Ich hab jetzt hier nen dunklen HG, damit ihr den Effekt etwas besser sehen könnt. Mithilfe von inset-Shadows wird ein Effekt erzeugt, der das Bild optisch eine Ebene tiefer legt. Wenn ihr Bilder verwendet, die zum Beispiel irgendwelche Cracks sind, wie ich sie mal hatte als Floatlinks, könnt ihr diese "echter" wirken lassen, in dem sie nicht nur draufgeklatscht sind, sondern wirklich leicht einsinken.

.glossy {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.glossy:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
Okay, der Code hier ist schon etwas länger. Hier haben wir zu beginn die normale Definition des Bildes, also Runde Ecken und ein kleiner shadow. Dann folgt das :after, welches ein Content-Behälter ist, der den "Gloss" sozusagen drüberlegt. Die Postition wird absolut auf dem Bild definiert. Das Elemt hat keinen Content, die totale Breite des Bilder, und die halbe Höhe und wird so definert, dass es oben am Bild positioniert ist. Dann wird auch dieses Bild abgerundet und bekommt als definierten Hintergrund einen linearen Verlauuf der von weiss nach transparent verläuft, von oben nach unten.
Es ist eigentlich ganz einfach, aber total praktisch. =)

.glowinghover {     -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.glowinghover:hover {
    -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -webkit-border-radius: 60em;
    -moz-border-radius: 60em;
    border-radius: 60em;
}
So, hier haben wir den ersten hover drin. Das Bild ist optisch eigentlich "normal", doch wenn man drüberhovert, dann transformiert es sich zum Kreis und bekommt einen Glow, also einen umrahmenden Schein. Damit das ganze nachher schön "smooth" abläuft (haha, wir haben gestern über Anglizismen und Internetsprache gesprochen. Und es stimmt echt, ich schreibe hier noch denglischer als ich rede! xD) fügen wir bei der Defintion des normalen Bildes noch die transition von einer Sekunde ein. Und der Rest ist bekannt. Der hover ist auch nichts Neues mehr, bloss wieder ein Box-Shadow und die Abrundung der Bilder zu einem Kreis.

.reflection {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.reflection:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 30px;
    bottom: -31px;
    left: 0;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
    background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection:hover {
    position: relative;
    top: -8px;
}
Jups, schaut wieder noch viel aus. Doch wenn man sich's anschaut steht hier nur bekanntes.
Zu Beginn normale Defintion. Nen Shadow und dann noch eine transition, damit das "Verschieben" nach oben sozusagen "animiert" verläuft. Dann wieder das leere Pseudoelement. Wir definieren wieder keinen Inhalt, die Position und dann ist diese "Spiegelung" auch wieder bloss ein gradient. Da hier nicht alle Ecken gleich gerundet sind, werden sie alle einzeln definiert. Aber sonst ist hoffentlich alles klar =)
Beim Hover muss die Positon relative sein, damit sie in Abhängigkeit zum einzelnen Bild steht und dann einfach um acht Pixel nach oben geschoben werden kann.

.tape {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.tape:after {
    position: absolute;
    content: ' ';
    width: 60px;
    height: 25px;
    top: -10px;
    left: 50%;
    margin-left: -30px;
    border: solid 1px rgba(137,130,48,.2);
    background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
    background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}
Und wieder ist eigentlich alles altbekannt. Das Tape wird wieder mit nem gradient und dem pseudoelement definiert. Nur haben wir diesmal eine margin, also einen Rand und border, also eine Umrandung. (border, sichtbar, margin, unsichtbar) Ich hoffe der Rest vom Code ist klar, sonst einfach nachfragen. ^^

.glossy-reflection {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.glossy-reflection:before {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
.glossy-reflection:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 30px;
    bottom: -31px;
    left: 0;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
    background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}
Hier noch um euch zu zeigen, dass ihr auch mit zwei Pseudoelementen arbeiten könnt, dazu braucht ihr einfach noch :before, neben :after. Before wurde hier für den Gloss verwendet und After für die Reflection.

.shadowhover {
    position: relative;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.shadowhover:hover {
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}
.shadowhover:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}
.shadowhover:hover:after  {
    background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
} Und auch das Pseudoelement kann im hover verändert werden. Für diesen Schattenkreis, verwendet ihr einfach ein radiales Gradient. (Wenn ihr wollt, kann ich mal nen QuickTip zu Gradients machen). Ansonsten hoff ich wie gesagt ebenfalls drauf, dass der Code nun selbsterklärend ist, ansonsten, bitte Fragen!

.feather {
    position: relative;
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}
.feather:after  {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}
Ich habe lange danach gesucht, wie man es hinkriegt, ein "ausgeblendetes" Bild hinzukriegen. Damals kannte ich after nicht! Mithilfe eines gradienten in der Hintergrundfarbe zu transparent kann man diesen Effekt einfach über's Bild drüberlegen!

Und das war's auch schon. Die Codes sind wirklich einfach, wie ihr sehen könnt. Ich war total freudig überrascht, als ich diese ganzen Codes gefunden habe, weil man daran sehen kann, wie vielseitig, dass die ganzen Shadows, Border-Radien und Gradients sein können, vor allem vereint mit "hovers" und "pseudoelements"(das war jetzt pure Absicht, einfach nochmal so aus Trotz *hihi*)
Ich entschuldige mich übrigens auch noch mal für die Überlänge dieses Posts, aber ich hab mich einfach dazu entschlossen, dass es in einem Post doch besser ist, weil ich dann auch einfach auf Kommentaren von eben aufbauen kann und davon ausgehen kann, dass nicht einfach nur Teil zwei gelesen wird oder so. (Ich hoffe jetzt einfach mal, dass ihr nicht von oben nach unten lest ^^)
Joa, ich hoffe es war interessant für den ein oder anderen und Ihr habt auch Ideen bekommen, wie ihr eure Bilder auf euren Blogs präsentieren möchtet.

[...]Mann, erst eine Stunde um[...]