Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


CSS-Garagentor für Gerd59
#1
Weil unter anderem auch durch meine Schuld Gerds Thread nun im Offtopic sein Dasein fristen muss und mich schon seit ein paar Tagen die Frage nach einer reinen CSS-Lösung für ein aktives Garagentor umtreibt, hab ich für dich, Gerd (und natürlich für alle anderen, die sich dafür interessieren) eine einfache CSS-Lösung gefunden, die auch mobil (in Android) funktioniert.

Wer ein Iphone hat, den bitte ich mal um kurze Überprüfung, ob ich dafür noch ein Prefix setzen muss. Lieben Dank

http://www.fotoatelier-essen.de/freieweb...entor.html

Der HTML-Aufbau:

<div class="Garage">
<div class="Garagentor">
<div class="link-container">
<a href="http://www.fotoatelier-essen.de/freiewebsite/Garagentor.html">zur Garage</a>
</div>
</div>
</div>


die CSS-Anweisungen dafür:

.Garage {

width: 400px;
height: 471px;
box-shadow: inset 5px 5px 15px #666;
margin: 100px auto 0;
border: 20px solid rgb(200,200,200);
border-bottom: 2px solid rgb(200,200,200);
background: url(bilder/Mercedes-Garage.jpg);
background-position: bottom;
background-repeat: no-repeat}

.Garagentor {
width: 400px;
height: 471px;
box-shadow: inset 5px 5px 15px #666;
background: url(bilder/Garagentor.png);
background-position: bottom;
background-repeat: no-repeat;
transition: height 3s ease-in}

.Garagentor:hover {
height: 90px}

.Garagentor a {
font-family: Dosis;
font-size: 20px;
padding: 5px 10px;
color: rgb(255,255,255);
text-decoration: none;
text-align: center}

.Garagentor a:hover {
color: rgb(255,0,100)}

.link-container {
background: rgb(175,175,175);
text-align: center;
padding: 10px 0;
box-shadow: inset 5px 5px 15px #666;}

Wenn man die Maus über der Garage in der Höhe hin und her bewegt, kann man mit dem Garagentor spielen und es immer schön auf und zumachen. Es geht nur soweit auf, wie die Platzierung der Maus in der Höhe über dem Tor liegt.

Wenn ich oben auf den Textlink gehe, geht das Tor ganz auf und beim Verlassen der Maus des Garagentores schließt es sich wieder...

VIEL SPASS !


User: DorisR
PW: SiroD59
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Hallo Doris,

Hast du noch den Zugang zur Seite bitte?  Hehe!  thumbs up
mfg.

"Ich weiß, das ich nicht('s) weiß"   (Sokrates)
----------------------------------------------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
für mobile Geräte muss ich noch eine Verzögerung auf den Link einbauen (mal sehen ob ich das hinbekomme, denn beim touch wird ja sofort der Link ausgelöst)
Oder ohne Link und den erst auf das Auto setzen... geht natürlich auch und ist vermutlich einfacher...


Nachtrag: Geht nicht, denn das Garagentor geht ja wieder zu.

Mobil muss man halt zum Öffnen der Garage auf den Griff oder eine andere Stelle auf dem Tor touchen...

Für Handys ist es dann aber besser, diese Funktion auszuschalten per Media Queries. Für die Kleingeräte ist die Spielerei zu unübersichtlich.
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Tschuldigung. Danke für den Hinweis Smiling
....
hab ich noch unter den Beitrag gesetzt.

(20.06.2017, 11:08)immergut schrieb: Hallo Doris,

Hast du noch den Zugang zur Seite bitte?  Hehe!  thumbs up
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Das ist aber ein schönes Garagentor! Viel schöner als das ursprüngliche Beispiel! Da würde ich zugreifen, Gerd!
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 51.0.1,6234 Java 7 32bit, IE10, Chrome, GIMP 2.8.4; Mobirise 3.12.1
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
@Doris
schöne nette Lösung thumbs up
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
(20.06.2017, 10:55)Doris Rehhausen schrieb: http://www.fotoatelier-essen.de/freieweb...entor.html

Schade, daß ich nicht gucken kann thumbs up
Herzliche Grüße aus Koblenz
***********************




Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Wieso kannst du das nicht gucken, Kurt?

Die login Daten im Eingangspost haben nach wie vor Geltung.
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!