Wie nennt sich dieser Effekt und womit ist er gemacht ?

[Razer3k]

Nabend,
ich würde gerne eine HTML5 Webseit erstellen u.a. auch um es selber zu lernen.

Nun habe ich die beiden folgenden Seiten gesehen und Frage mich wie der Effekt für das Menü und den Header und bei der zweiten Seite eigentlich auch der Content (die ganze, bunt Schrift).

http://impactjs.com/buy-impact
http://waytoogood.ca/

 

[timestamp]

Google mal nach CSS (Cascading Style Sheets). Da gibt es genug Tutorials etc. Wenn du spezifische Fragen hast, kannst du die hier im CSS-Forum stellen

 

[Razer3k]

Ja ich würde zum Beispiel gerne wissen wie sich der Effekt nennt...

 

[ComFreek]

Naja es gibt in dem Sinne keine Effekte.
Wenn du z.B. bei dem Menü mit der Maus drüberfährst, dann wird höchstwahrscheinlich der :hover-CSS-Pseudoklasse aktiviert.
z.B. hier wird die Schrift beim Drüberfahren größer:

/* normal */
#menuitem
{
  /* ... */
  font-size:1em;
}
/* Mit der Maus drüber */
#menuitem:hover
{
  font-size:1.3em;
}

 

[SpiceLab]

Nun habe ich die beiden folgenden Seiten gesehen und Frage mich wie der Effekt für das Menü und den Header und bei der zweiten Seite eigentlich auch der Content (die ganze, bunt Schrift).

Warum schauen sich interessierte Besucher nie einfach den Quellcode ihres Fundstückes an, der alle offenen Frage klärt? :suspekt:

Ist hier wohl ein ungeschriebenes Gesetz, weil doch so bequem, Dritte mit der Recherche zu beauftragen, anstatt sich eigenständig darum zu kümmern

<span class="enjoy">I enjoy</span> <span class="problems">solving problems.</span> <span class="create">I create</span> <span class="targeted">targeted</span> <span class="amphersand">&amp;</span> <span class="effective">effective</span> <span class="solutions">solutions.</span> <span class="strive">I strive</span> <span class="for">for</span> <span class="simplicity">simplicity.</span> <span class="want">I want to</span> <span class="succeed">succeed.</span> <span class="like">I like</span> <span class="people">people.</span><span class="i">I</span> <span class="focus">focus</span> <span class="on">on</span> <span class="communication">communication.</span> <br><span class="have">I have a</span> <span class="attitude">great attitude.</span> <span class="love">I love</span> <span class="what">what I do.</span></h3>

Der farbenfrohe Text ist in einzelne <span>-Elemente unterteilt, die per CSS-Klassen ihre Formatierung erhalten.

War es wirklich sooo schwer, dieses popelige Geheimnis zu lüften?

 

[Razer3k]

Naja mir bringt es doch ncihts zu wissen das das mit Klassen gemacht wurde (das habe ich nachgeguckt) wenn ich die Definition und somit den eigentlichen Effekt dahinter nicht kenne.....!?

 

[ComFreek]

Naja die Klassen und Eigenschaften von CSS sind irgendwo im HTML-Dokument oder in einem externen CSS-Dokument definiert.
Ich würde dir z.B. Firebug als Browseraddon empfehlen, mit dem kannst du formatierten CSS-Code für jedes Element einsehen.