# Wie nennt sich dieser Effekt und womit ist er gemacht ?



## Razer3k (4. Februar 2011)

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 (4. Februar 2011)

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 (4. Februar 2011)

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


----------



## ComFreek (5. Februar 2011)

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 (5. Februar 2011)

Razer3k hat gesagt.:


> 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 (6. Februar 2011)

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 (7. Februar 2011)

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.


----------

