Liebe Aussensaiter,

ich wollte nur mal kundtun, dass ich Toms neues Design der Sessionbildchen oben links todschick finde.

Danke, Tom(2)!

Keep rockin'
Friedlieb(1)

Hi Friedlieb(theoneandonly),

vielen Dank. Der erste Anlauf mit dem dunklen Hintergrund war mir zu aufdringlich, deshalb bin ich da noch mal ran. Bei manchen querformatbildern bleibt oben ein kleiner Rand stehen und dann gibts oben keine runden Ecken, wieso habe ich noch nicht herausgefunden… :)

Viele Grüße

Tom

Tach Tom,

mich würde interessieren wie man das herauszoomen macht ?!

GruZZ *

: Tach Tom,
: mich würde interessieren wie man das herauszoomen macht ?!
: GruZZ *

per CSS:

transform: scale(1.1) rotate(-3deg) translate(-5px, -5px);

LG Andreas

Hi Lone*,

das geht mittlerweile komplett ohne Javascript oder Flashfirlefanz, einen halbwegs neuer Webbrowser vorausgesetzt. In CSS3 gibt es "transitions" -- mit denen kann man zwischen zwei Zuständen eines Elementes, die man per CSS herstellt (also zb Hintergrundfarbe oder Position) animieren. Ausserdem gibt es "transformations", mit denen man zb die Rotation und Skalierung beeinflussen kann. Kombiniert man das miteinander, kommt so ein Effekt dabei raus.
Die CSS3 Eigenschaften müssen momentan noch für jede Browser-Engine mittels sog. Vendor-Prefixes angegeben werden, also zb "-moz-transition", "-webkit-transition", "-o-transition" (für Firefox, Safari/Chrome, Opera), dh man schreibt den ganzen Kram mehrfach, aber das schöne ist, wenn ein Browser den Kram nicht versteht, ignoriert er es einfach und die Elemente werden halt ohne Effekt dargestellt.

Der Mouseover über das Sessionbild macht es 110% grösser und dreht es leicht und versetzt es etwas nach links oben:

.session-link:hover {
    transform: scale(1.1) rotate(-3deg) translate(-5px, -5px);
}

Zuvor wurde festgelegt, wo das Bild sitzt und wie es so aussehen soll, interessant für hier ist nur die Zeile mit der "transition":

.as-header .session-link {
    background: none repeat scroll 0 0 #EEEEDD;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    display: table-cell;
    height: 120px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
    vertical-align: middle;
    width: 120px;
}

Damit wird der Effekt auf 0.3sec animiert.

Das Ganze kannst Du Dir in der Datei "css/styles.css" des Forums ansehen.

Viele Grüße
Tom

Hallo Tom,

danke vielmals - habs hingebracht ...

GruZZ *