Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5

Programmierer unter euch? Wie wurde das gemacht?
#1

http://www.mylittlefabric.com/en

Wenn man oben über die Links fährt (z.B. "Sweet Food") schwenkt so eine Grafik nach oben.

Hat jemand eine Idee wie das umgesetzt wurde??
Zitieren
#2

Simples CSS
Code:
#main-menu a#gourmandises img {
    left: 68px;
    opacity: 0;
    top: -55px;
    transform: translate(50px, 20px) rotate(90deg);
    transition-delay: initial;
    transition-duration: 850ms;
    transition-property: initial;
    transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
#main-menu a#button-home:hover img, #main-menu a#gourmandises:hover img, #main-menu a#decouvertes:hover img, #main-menu a#griboullis:hover img, #main-menu a#gourmandises.selected img, #main-menu a#decouvertes.selected img, #main-menu a#griboullis.selected img {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}
und ein Bild
Code:
<img width="77" height="64" alt="Button Gourmandises Hover" src="http://www.mylittlefabric.com/wp-content/themes/mylittlefabricV2/images/menu/button-gourmandises-hover.png">
Beim Hovvern wird die "Opacity" des Bildes geändert und die position geändert

Signatur
Zitieren
#3

WOW! Danke!
Kann ich diesen Effekt auch "einbauen" wenn ich eine auf HTML basierende Homepage habe? Also in den HTML Quelltext einfügen?
Zitieren
#4

Klar kann man es theoretisch überall einbauen. Du musst dich nur mit CSS auskennen.

Signatur
Zitieren
#5

Kenne mich mit css leider nicht aus, lediglich einigermaßen mit HTML.
Heißt den css Code kann ich nicht einfach an entsprechender Stelle im HTML Code einfügen, oder?
Zitieren
#6

CSS ist kein richtiger Code sondern "nur" eine Style-Anweisung für den Browser. Das ganze kommt z.B. in eine style.css welche im HEAD-Bereich deines HTML deklariert ist. Hier mal ein paar Infos zum Einlesen

http://www.w3schools.com/css/
http://de.selfhtml.org/css/
Zitieren
#7

Danke für die Links und die Info!
Werde ich mir mal zu Gemüte führen.

Gruß!
Zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste