Devon (05.09.2013), xOneDirectionx (03.09.2013)
-
03.09.2013, 00:15 #1
- Registriert seit
- 18.03.2013
- Beiträge
- 481
Thanked 264 Times in 168 PostsSidebar-Login einfliegen lassen
Huhu
ich möchte ein Loginfeld, das bei Maushover von rechts eingeflogen kommt. Also ähnlich wie hier der Styleswitcher, nur größer, auf der anderen Seite und andere Farben/Inhalt. Allerdings hab ich keine Lust, mich hier durch den ganzen HTML/CSS-Code zu kämpfen und die benötigten Teile rauszusuchen.
Wie ich es mir ungefähr vorstelle, ist auf abalo media GmbH zu sehen. Nur will ich nicht erst auf Login klicken lassen, sondern beim Hover soll das Feld schon ausfahren.
Zum Googlen hab ich wohl die falschen Stichwörter verwendet. Kann mir hier jemand helfen oder einfach sagen, wonach ich googlen kann, um einen Sample-Code zu finden? Umbauen kann ich es ganz alleine.
-
03.09.2013, 04:11 #2
- Registriert seit
- 15.11.2011
- Beiträge
- 6.142
- Blog Entries
- 5
Thanked 9.130 Times in 3.005 PostsAW: Sidebar-Login einfliegen lassen
Der Designswitcher wurde mit CSS3 Transitions gemacht.
Code:<div class="switch"> <div class="color-palette" title="Farbstyl ändern"></div> <a href="{vb:raw vboptions.bburl}forum.php?styleid=11"><div class="blue"></div></a> <a href="{vb:raw vboptions.bburl}/forum.php?styleid=15"><div class="orange"></div></a> </div>
.switch .blue, .switch .orange, .switch .color-palette {
background:url(images/uhacks_orange/sprite-main-switch.png) no-repeat;
}
.switch .color-palette {
height: 32px;
width: 32px;
background-position: 0 0;
}
.switch .blue, .switch .orange {
height: 15px;
width: 24px;
}
.switch .blue {
background-position: 0 -32px;
}
.switch .orange {
background-position: -24px -32px;
}
.switch {
position: fixed;
left: -35px;
top: 70px;
width: 24px;
padding: 10px 10px 10px 15px;
background-color: #333;
box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
border-radius: 5px;
z-index: 1000;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
}
.switch img {
margin-bottom: 0px;
}
.switch:hover {
left:-10px;
}
.switch a:hover {
position: relative;
left: 2px;
}
-
The Following 2 Users Say Thank You to DMW007 For This Useful Post:
Ähnliche Themen
-
Autoschlüssel nachmachen lassen für Golf 4?
Von Nachto im Forum FahrzeugeAntworten: 6Letzter Beitrag: 04.08.2013, 22:07 -
Trusten lassen
Von Rshard im Forum SupportAntworten: 3Letzter Beitrag: 17.02.2012, 17:04 -
[Win7] Gadget aktivieren und zur Sidebar hinzufügen
Von AFU im Forum WindowsAntworten: 3Letzter Beitrag: 01.01.2012, 18:35
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.