Do it yourself: CSS für Profil und Blog

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

Ich hoffe mal das diese Seite da etwas helfen wird :)

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

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?

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;}

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; }

@----
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?

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;
}

ok thank's :) @----

@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

@----

Hi :)

Sieht sehr gut aus, gefällt mir :)

Gute Arbeit :)

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 ... :(

@tic

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

Gutes Gelingen

hmm ok :D ... danke

@tic

was willst du denn damit erreichen?

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.

@----

das css brauchste nicht im code-code verstecken ;)

Müssen nicht. Aber um Chaos zu vermeiden mach ichs dennoch.

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

@----


Angeber :P:

Sieht wirklich sehr gut aus :)

lol. jquery. Ist also von der Funktion her nicht auf meinem Mist gewachsen.