Re: (Aussensaiter) Runde Ecken

[ verfasste Antworten ] [ Thread-Anfang ] [ Aussensaiter-Forum ]

Beitrag von Tom(2) vom Oktober 21. 2012 um 19:20:45:

Als Antwort zu: Re: (Aussensaiter) Runde Ecken geschrieben von lonestar am Oktober 21. 2012 um 18:57:55:

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



verfasste Antworten:


Dieser Beitrag ist älter als 3 Monate und kann nicht mehr beantwortet werden.