Templates & Sprachen

11.10.2013 17:33

CrossroadDemon
#1 CSS Hilfe

Hallo :)

Also ich hab eine Kleine Frage.
Ich hab bereits einen Gewöhnlichen CSS für einen Rahmen ( den man beispielsweise um ein Bild machen kann )

Nun habe ich bei verschiedenen Seiten, zb Tumblr, schon gesehen das man diese Rahmen noch etwas verändern kann. Wenn man darüber fährt, das zb Runde Ecken zu kantigen Ecken werden, oder auch anders rum aus Eckig wird Rund.
Wie genau baue ich das in den CSS Code mit ein? Ich hab mich jetz schon länger damit beschäftigt, komme aber einfach nicht auf einen Grünen ZWeig, da ich dies doch gerne für mein Forum hätte. Vielleicht kann mir ja jemand helfen.

Mein CSS Rahmen Code lautet so:

1
2
3
4
5
6
7
8
9
10
11
12
 
.rahmen {
background-color:#000000; 
        padding:1px;
        -moz-border-radius-bottomright: 20px;
        -moz-box-shadow: 5px 5px 5px #6e6d6e; 
        -webkit-border-radius: 5px;
        -webkit-box-shadow: 2px 2px 2px #6e6d6e;
        -khtml-border-radius: 5px;
        border-bottom-right-radius: 15px;
        box-shadow: 2px 2px 2px #6e6d6e; 
        border: 5px black;         
}
 

Antworten

Beitrag melden

#2

11.10.2013 17:59

Ingmar
#2 RE: CSS Hilfe

Ingmar

Was du suchst, ist der CSS-Selektor :hover

So würde das element mit der ID mydiv z.B. beim überfahren einen runden Rahmen bekommen. Ob das alle gängigen Browser so unterstützen musst du selbst mal testen.

#mydiv{border:3px solid black;}

#mydiv:hover{border-radius: 5px;}

Viele Grüße,
Ingmar

Technik · Homepagemodules.de · Miranus GmbH

Antworten

Beitrag melden

#3

11.10.2013 18:09

CrossroadDemon
#3 RE: CSS Hilfe

CrossroadDemon

Schon mal vielen Dank für die Hilfe! Das bringt mich schon mal einen Schritt näher.
Alleridngs bin ich ein "Do-it-yourself'ling" ich hab mir das alles was ich bisher kann mit hilfe von Tutorials zusammen gebastelt.
Es müsste dann quasi so aussehen?!:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.rahmen {
background-color:#000000; 
        padding:1px;
        -moz-border-radius-bottomright: 20px;
        -moz-box-shadow: 5px 5px 5px #6e6d6e; 
        -webkit-border-radius: 5px;
        -webkit-box-shadow: 2px 2px 2px #6e6d6e;
        -khtml-border-radius: 5px;
        border-bottom-right-radius: 15px;
        box-shadow: 2px 2px 2px #6e6d6e; 
        hover{border-radius: 5px;     
 
}
 

Antworten

Beitrag melden

#4

11.10.2013 23:33 (zuletzt bearbeitet: 11.10.2013 23:44)

Olaf
#4 RE: CSS Hilfe

Ol

Olaf

Zitat von CrossroadDemon im Beitrag #3

Es müsste dann quasi so aussehen?!:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.rahmen {
background-color:#000000; 
        padding:1px;
        -moz-border-radius-bottomright: 20px;
        -moz-box-shadow: 5px 5px 5px #6e6d6e; 
        -webkit-border-radius: 5px;
        -webkit-box-shadow: 2px 2px 2px #6e6d6e;
        -khtml-border-radius: 5px;
        border-bottom-right-radius: 15px;
        box-shadow: 2px 2px 2px #6e6d6e; 
        hover{border-radius: 5px;     
 
}
 

Nein.So geht es nicht.
Das Prizip ist ganz einfach.
Du legst eine CSS Klasse für Deinen Rahmen als Standartanzeige an(.rahmen) und eine Klasse für die Veränderung,wenn man mit der Maus in den Rahmen fährt(.rahmen:hover).
In meinem Beispiel habe ich in die Klasse ".rahmen" einen eckigen Rahmen mit Schattenschlag um ein Bild gelegt.
In der Klasse ".rahmen:hover" wird aus dem eckigen Rahmen ein Rahmen mit runden Ecken,wenn man mit der Maus daraufährt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style type="text/css">
.rahmen {
        background-color:#ffffff; 
        -moz-box-shadow: 10px 10px 15px #000;
        -webkit-box-shadow: 10px 10px 15px #000;
        box-shadow: 10px 10px 15px #000;
        padding:2px;
        border: 3px solid gray;         
}
.rahmen:hover {
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        -khtml-border-radius: 30px;
        border-radius: 30px;
}
</style>
<img class="rahmen" src="https://files.homepagemodules.de/b214495/bhnetfiles-1byq-8n.gif">
 
 

Hier geschrieben als eigenständiges Programm zum testen,lauffähig in allen gängigen neuen Browsern.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#5

12.10.2013 16:23

CrossroadDemon
#5 RE: CSS Hilfe

CrossroadDemon

Ah jetz hab ichs verstanden :)
Vielen Dank Olaf!

Antworten

Beitrag melden

#6

12.10.2013 21:30

CrossroadDemon
#6 RE: CSS Hilfe

CrossroadDemon

Jetz hab ich doch noch mal eine Frage.

Das mit den ecken abrunden hab ich verstanden, funktioniert auch super bei mir!

Auf ner Seite für CSS Hilfe hab ich nun gefunden, wie man Rahmen noch anders gestalten kann, zb das der Rahmen nur gestrichelt ist mit hilfe von dotted.
Aber irgendwie funktioniert das nicht bei mir.

1
2
3
4
5
6
7
8
9
10
11
12
 

rahmen2 {
        background-color:#ffffff; 
        -moz-box-shadow: 10px 10px 15px #000;
        -webkit-box-shadow: 10px 10px 15px #000;
        box-shadow: 10px 10px 15px #000;
        padding:5px;
        border-width:medium; 
        border-color:#FF9999; 
        border-style:dotted;      
 
}
 

Antworten

Beitrag melden

#7

12.10.2013 22:42

Olaf
#7 RE: CSS Hilfe

Ol

Olaf

Dein Code ist soweit richtig,nur für eine gestrichelte Linie muß es nicht "border-style:dotted;" heissen,sondern "border-style:dashed;".

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#8

12.10.2013 23:32

CrossroadDemon
#8 RE: CSS Hilfe

CrossroadDemon

Oh, denkfehler. hab grad selber auch bemerkt das meins gepunktet hieß statt gestrichelt.

Danke.
Aber irgendwie funktionert das immer noch nicht gestrichelt.