weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturHelpdeskAstronomieGruppenSpieleGamingFilmeMusikClashVerbesserungenAllmysteryWillkommenEnglishGelöscht
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Do it yourself: CSS für Profil und Blog

6.265 Beiträge, Schlüsselwörter: Allmystery, Hilfe, Welt, Bilder, Frieden, Profil, Farbe, Design, Html, Schrift, DIE + 18 weitere

Do it yourself: CSS für Profil und Blog

14.06.2012 um 12:01
Es ist so kompliziert, kann net jemand mal so ne Zusammenfassung machen "CSS für Dummies" oder so? Habe auch schon bei google rumgesurft aber finde nix auf meinem Niveau :D


melden
Anzeige
Keysibuna
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 12:06
Ich hoffe mal das diese Seite da etwas helfen wird :)

http://www.css-wiki.com/


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:10
Hi,

die extrem Kurzfassung.
Du hast html Elemente wie <span> etc.

Diese haben entweder eine ID oder eine Klasse oder beides.

Beispiel:




Du kannst die Elemente mittels CSS über die ID oder die Klasse ansprechen.

nimmst du die ID spricht man sie so an:

#xyz{die gewünschten Attribute;jedes Attribut wird mit einem Semikolon beendet;]

sprichst du über die Klasse an:

.zxy {Attribut 1; zwei; 3;]

Du kannst auch einzelne links ansprechen:

Beispiel:
[url=http://www.xyz.de/]xyz[/url]

angesprochen wird er so:

a[href="http://www.xyz.de/"] {Attribut1;2;3;}


Um die Bezeichnung der jeweiligen Elemente rauszufinden schaust du entwesder in den Quelltext oder nutzt das FirefoxAddon Firebug und klickst einfach auf das Element.


Verändern kannst du fast alles. Gibt nur wenig Grenzen. Farben, Form, Schatten, Bewegung, Größe, Anordnunge, etc. etc. etc.


Willst du einen MouseOver Effekt anfügen machst du folgendes. Angenommen das Element trägt die ID XYZ und die CSS sieht so aus:

#xyz {color:#ffffff; background:#000000;}

Wenn du nun willst das der Hintergrund sich bei MouseOver umfärbt musst du nur folgendes machen:

#xyz:hover {background:#ffffff}

Wenn das ganze dann innerhalb eines definierten Zeitrahmens, hier 3 Sekunden, umfärben soll nimmt man:

-moz-transition {all 3s}
-os-transition {all 3s}
-webkit-transition {all 3s}
-ms-transition {all 3s}
transition {all 3s}


Diese Optionen sind leider nicht für jeden Browser identisch betitelt und man muss jedem Browser eine Zeile anbieten. Die anderen werden ignoriert.

Genauso mit transform und anderen Spezialdingern.

Mozilla: -moz-transform {}
Chrome: -webkit-transform {}
Opera: -o-transform {}
IE: -ms-transform {}
andere: transform {}


Ausreichend?


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:20
Lol. Sorry.

-moz-transition {all 3s} und die anderen müssen natürlich so aussehen:

-moz-transition:all 3s;

sprich:

#xyz [background:ffffff;-moz-transition:all 3s;-webkit-transition:all 3s; etc;}


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:31
Hier die CSS für eine schicke Menubar:

.userfunction {
color: #FFFFFF;
font-size: 12px;
margin-left: 250px;
padding-bottom: 4px;
text-align: right;
width: 901px;
}

.heart {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://static.allmystery.de/upics/c98961_Backtrack-Black-Dragon-Wallpaper.jpg");
background-origin: padding-box;
background-position: right center;
background-repeat: no-repeat;
background-size: 70px auto;
border: 0 none;
float: left;
height: 50px;
margin-left: -930px;
margin-top: 5px;
width: 990px;
}

.header {
background-color: #000000;
background-image: url("");
background-position: left center;
background-repeat: no-repeat;
background-size: 70px auto;
clear: left;
display: block;
font-size: 12px;
height: 65px;
margin-left: 170px;
padding-left: 3px;
position: relative;
width: 920px;
z-index: 1000;
}


.header {
background-color: #000000;
background-image: url("");
background-position: left center;
background-repeat: no-repeat;
background-size: 70px auto;
clear: left;
display: block;
font-size: 12px;
height: 65px;
margin-left: 170px;
padding-left: 3px;
position: relative;
width: 920px;
z-index: 1000;
}

.tabnav a {
-moz-transition: all 0.2s ease 0s;
background: url("http://static.allmystery.de/upics/85fe2d_MenuBar3.png") repeat scroll 220px 24px transparent;
border-bottom: 1px solid #000000;
box-shadow: 0 0 50px #FFFFFF;
color: #000000;
display: block;
float: left;
font-size: 11px;
margin-right: 0;
outline-style: none;
padding: 5px 0;
text-align: center;
text-decoration: none;
}
.tabnav a:hover {
-moz-transform: rotate(360deg) scale(4);
-moz-transition: all 4s ease 0s;
background: url("http://static.allmystery.de/upics/85fe2d_MenuBar3.png") repeat scroll 220px 24px transparent;
border-bottom: 1px solid #00CCFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 10px #00CCFF;
color: #000000;
font-weight: bold;
opacity: 0.6;
}

a[href="/themen/mg"] {
border-radius: 10px 0 0 10px;
}
a[href="#"] {
border-radius: 0 10px 10px 0;
}


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:33
@Dr.BT
ich will die Farben und die Schrift und Größe von meim gb Text ändern, aber irgendwie .... hm
da muss ich ja glaube was bei basteln um das zu können so wie's grad is, könnste vielleicht mal schauen? hast mir ja schon mal super geholfen... oder überseh ich was?


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:37
Für die Namen:
#gb_posts .gb_post_text_np a {
color: #farbe;
text-shadow: 0px 0px 10px #farbe;
}


Für den Text:
#gb_posts .gb_post_text_np {
color: #farbe;
font-size: 12px;
float: left;
overflow: hidden;
position: relative;
width: 650px;
}


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 14:39
ok thank's :) @Dr.BT


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 16:40
@Keysibuna

Hi,

ich war mal so frech und hab mir die drehenden Karten von deinem Profil geklaut und verändert.

Leider erstmal nur für Firefox. Hier die css:

#frame {
-moz-perspective: 1000px;
border: 1px solid #000000;
border-radius: 10px 10px 10px 10px;
height: 200px;
margin: 10px 430px 140px;
position: relative;
width: 150px;
z-index: 1;
}


#frame_card {
-moz-transform-style: preserve-3d;
-moz-transition: all 2s linear 0s;
border-radius: 10px 10px 10px 10px;
height: 100%;
width: 100%;
}
#frame:hover #frame_card, #frame.hover_effect #frame_card {
-moz-transform: rotateY(180deg);
box-shadow: 0px 0px 0px #00ccff;
}
.topstock {
-moz-backface-visibility: hidden;
border: 1px solid #00CCFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 100px #00CCFF;
height: 100%;
position: absolute;
width: 100%;
}
.topstock.back {
-moz-box-sizing: border-box;
-moz-transform: rotateY(180deg);
background-color: #000000;
border: 1px solid #00CCFF;
border-radius: 10px 10px 10px 10px;
color: white;
opacity: 0.6;
padding: 10px;
text-align: center;
width: 150px;
text-shadow:0px 0px 5px #00ccff;
}



.front topstock img {padding:30px;}


#ima {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.deluxe-stylez.de/wp-content/uploads/2011/12/Backtrack-Black-Dragon-Wallpaper.jpg");
background-origin: padding-box;
background-position: 0px 10px;
background-repeat: no-repeat;
background-size: 150px auto;
}
#ima a {color:#ffffff; text-align:center;}
#mo {color:#ffffff}



Und hier der html Baustein:















Make


a


choice






Enter
the world
of the
dragon





melden
Keysibuna
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 17:40
@Dr.BT

Hi :)

Sieht sehr gut aus, gefällt mir :)

Gute Arbeit :)


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 20:29
hy... ich versuch seit na guten Stunde hier nen Schatten rein zu Basteln..aber irgendwie bin ich zu unwissend und das Netz hilft mir auch nich weiter :(

marquee behavior="alternate">
</marquee>
<p style="font-size:20px;

Hilfe ... :(


melden
Keysibuna
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 20:31
@tic

Einfach dahinter; ;text-shadow: 2px 1px 2px #fff;} einfügen und passende Farbe ('fff = weis) einfügen ^.^

Gutes Gelingen


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 20:31
hmm ok :D ... danke


melden

Do it yourself: CSS für Profil und Blog

14.06.2012 um 20:51
@tic

was willst du denn damit erreichen?


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:11
Wer ein bisschen Experimentalkram will kann gerne mal dass hier testen:

css:

object#cheesus, iframe#cheesus {
border: medium none;
height: 650px;
margin-bottom: 10px;
margin-left: 5px;
overflow: hidden;
visibility: visible;
width: 1000px;
}


html:

<iframe id=cheesus src="http://bluebuddha.cwsurf.de/explode.html"></iframe>

Wer wissen will wie man das ganze für sein Profil funktionsfähig umgestaltet kann einfach fragen.


melden

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:14
@Dr.BT

das css brauchste nicht im code-code verstecken ;)


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:14
Müssen nicht. Aber um Chaos zu vermeiden mach ichs dennoch.


melden
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:20
Hier eine Preview:
<iframe id=cheesus src="http://bluebuddha.cwsurf.de/explode.html" height="580px"; width="580px"></iframe>


melden
Keysibuna
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:25
@Dr.BT


Angeber :P:

Sieht wirklich sehr gut aus :)


melden
Anzeige
----
ehemaliges Mitglied

Lesezeichen setzen

Do it yourself: CSS für Profil und Blog

14.06.2012 um 22:26
lol. jquery. Ist also von der Funktion her nicht auf meinem Mist gewachsen.


melden
218 Mitglieder anwesend
Konto erstellen
Allmystery Newsletter
Alle zwei Wochen
die beliebtesten
Diskussionen per E-Mail.

Themenverwandt
Das Plus7 Beiträge
Anzeigen ausblenden