Zurück   Web to Date - SIQUANDO Forum >

Web to Date - Data Becker
> Web to Date CCML Designs

Antwort
 
LinkBack Themen-Optionen Thema durchsuchen Ansicht
Alt 25.08.2014, 19:06   #1 (permalink)
Benutzer
 
Registriert seit: 02.01.2011
Ort: x
Beiträge: 59
elch befindet sich auf einem aufstrebenden Ast
Standard Basteltipp: Transparenz-Hover-Effekt auf Bilder

Salute zusammen
Aus einer Laune heraus lehne ich mich mal weit, weit aus dem Fenster...
Hier ein Basteltipp, um ein dezenter Transparenz-Hover-Effekt auf Bilder (inkl. Bilder in div. Plugins), dem Plugin „Leuchttisch“ und auf den „Sende-Button“ des Kontakt-Formulars und des Gästebuchs (u.a.) zu zaubern. Dies in den, bis anhin bekannten Designs von SIQUANDO Web8 / Web-to-Date…
Voraussetzung: Der Browser muss in der Lage sein, CSS3-Befehle ausführen zu können.

Da ich zu faul bin, habe ich auf Prefix für alte Browser verzichtet.

1) Gehe nach „C:\Program Files (x86)\SIQUANDO\Web 8\designs“ o.ä.
2) Original-Design sichern!
3) Öffne „style_content“ mit einem Editor.
4) Je nach Design:
a) Suche allenfalls nach (zum Beispiel)…
/* Picture */
#content img.picture {
padding:<blablablapx;
border: blablabla;
}

b) ..und ergänze diese Befehle mit

/* Picture - Button - Leuchttisch ------------------------------- */
#content a img, /* Bilder a content */
#content input[type="image"], /* gif-Button senden */
#content table img[id*="lb"] /* Bilder Leuchttisch */
{ transition: opacity .3s linear; }

#content a img:hover, /* Bilder ahoverEffekt content*/
#content input:hover[type="image"], /* gif-hoverButtonEffekt senden */
#content table img:hover[id*="lb"] /* Bilder hoverEffektLeuchttisch */
{ opacity: 0.9; } /* oder 0.8 – 0.7 – etc */
/* ------------------------------- */


…oder füge die Befehle an einem anderen Ort nach Belieben ergänzend ein.
5) Sidebar: Wiederum je nach Design „style_sidebar“ öffnen (oder alternativ „style_content“ weiter bearbeiten).
a) Suche allenfalls nach (zum Beispiel)…
/* Picture */
#sidebar img.picture {
padding:<blablablapx;
border: blablabla;
}

b) ..und ergänze diese Befehle mit

/* ------- Picture hoverDingsbums -------------- */
#sidebar a img {
transition: opacity .3s linear;
}

#sidebar a img:hover {
opacity: 0.9; /* oder 0.8 – 0.7 – etc */
}


Müsste funktionieren – bei mir tut’s
In Designs mit hellem Hintergrund werden die verlinkten Bilder nun beim „Drüberfahren“ heller, bei den dunklen Designs… na?
Ach: für IE - Website Eigenschaften > erweitert > experimentelle HTML5... wohl auf ja stellen. Hab dies nicht getestet und erst im letzten Moment daran gedacht.

Viel Vergnügen und viel Erfolg! Und Korrekturen sind immer willkommen!

Ciao!
elch

Geändert von elch (25.08.2014 um 19:16 Uhr)
elch ist offline   Mit Zitat antworten
Alt 26.08.2014, 09:47   #2 (permalink)
Erfahrener Benutzer
 
Benutzerbild von Sven aus Berlin
 
Registriert seit: 07.06.2009
Ort: Berlin
Beiträge: 479
Sven aus Berlin befindet sich auf einem aufstrebenden Ast
Standard AW: Basteltipp: Transparenz-Hover-Effekt auf Bilder

Hallo Elch,
habe ich gerade mal ausprobiert mit FF 31. Mit IE nicht getestet!

Macht schon was her. Danke für diesen tollen Tipp!
Sven aus Berlin ist offline   Mit Zitat antworten
Alt 11.12.2014, 15:41   #3 (permalink)
Benutzer
 
Registriert seit: 02.01.2011
Ort: x
Beiträge: 59
elch befindet sich auf einem aufstrebenden Ast
Standard AW: Basteltipp: Transparenz-Hover-Effekt auf Bilder

Salute zusammen
…Und da die oben präsentierte Funktion auch das Pugin „Bildcollage“ beeinflusst - und mich dies nun plötzlich stört(e), diese Zeilen ergänzend und nachträglich (nach tausenden von Tagen)…


In „style_content“ zusätzlich ergänzen:


/* exept Plugin Bildcollage */
div.w2dpicturegridcontainer a img, div.w2dpicturegridcontainer a img:hover {
transition: none !important;
opacity: 1 !important;
}


Viele Grüsse in die Welt
elch
elch ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
css3, hover

« Bannerrotation | - »
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Scrolldesign Parallax Effekt th_wolfgang Web to Date 8.0 0 26.09.2013 16:57
Aurora- Dropdown a:active anstatt a:hover F.Locher Web to Date 8.0 0 18.02.2013 12:25
Simplicity: Transparenz bei ausgeklappter Navi Fräulein_P Web to Date 8.0 10 15.09.2012 17:06
Mouse-Over-Effekt / Bewegungen in Grafik niotis Web to Date 8.0 4 07.03.2012 15:00
Hover-Effekt bei Tabelle Cykes Web to Date 8.0 11 05.01.2012 18:30


absatz pdf datei plugins

Alle Zeitangaben in WEZ +2. Es ist jetzt 00:41 Uhr.
Powered by vBulletin® Version 3.8.2 (Deutsch) - Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0 PL2
Seite generiert in 0,11412 Sekunden mit 12 Datenbankabfragen

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16