Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Montag, 10. September 2012

CSS

lulu
Lange habe ich überlegt über welches Thema ich heute schreiben soll. Ein paar sind mir dann auch spontan eingefallen, aber so richtig gefallen wollte mir keines. Deswegen greife ich jetzt einfach das Thema von letzem Montag auf: Die Navigationsarten und verändere es ein bisschen, denn heute gehts nicht um die Arten, sondern um die Styles.

Mit CSS kann man heutzutage so vieles machen. Und das merkt man auch immer häufiger an den verschiedenen websiten. Es gibt mehr Möglichkeiten und die Webbys nutzen das aus.
Die besten Ideen möchte ich euch hier vorstellen und auch erklären, wie diese funktionieren.




Navigation auf PinkPearl
Häää, seh ich jetzt schief?
Mit CSS kann man ganz einfach Bilder "schräg" darstellen. Auf PinkPearl habe ich das mit der Navigation gemacht. Mit "transformrotate(-2deg);" könnt ihr diesen Effekt erzielen. Leider rendert Google Chrome das ganze ein bisschen anderst, wodurch alles sehr verpixelt aussieht...
Auf PinkPearl binde ich daher zwei verschiedene style.css ein.




Den "Transform" Effekt kann man auch auf Bilder anwenden und mit den verschiedensten Sachen kombinieren. So dreht sich auf RainbowQuest die Hauptfigur auf dem Header wenn man mit der Maus darüber fährt.


Diese Icons werden erst beim
drüber Fahren richtig sichtbar (RQ)
Hover Effekte gibts in allen Variationen. (to) hover heißt übrigens "schweben". Das ist also der Effekt, wenn man mit der Maus über einem Element "schwebt".
Der Hintergrund wird bunt, oder die Schrift verändert sich, oder es wackelt oder dreht sich. Übrigens: das coole wackeln geht einfach. Auf dieser Seite könnt ihr nachlesen wie. Oder ihr wollt, dass euer Bild erst halb transparent ist und beim darüber Fahren sichtbar wird? Kein Problem :) Fügt einfach "opacity: 0.5" ein und beim Hover dann "opacity: 1".
1 bedeutet voll sichtbar, 0.5 bedeutet halb sichtbar (oder anders gesagt: halb transparent ;D).

Das Ganze sieht dann so aus:
Bei eurem Bild:
<img class="affis" src="einSchoenesBild.png"  />

In eurer stye.css:


.affis{
       opacity: 0.5;
}

.affis:hover {
       opacity: 1;
}

Einfach, oder?

Ihr habt noch mehr so toller Effekte oder kennt welche und wollt wissen, wie sie funktionieren? Dann schreibt mir!

Ach übrigens:




Wenn ihr euer Layout codet ist das FireFox Add-on "Firebug" ganz nützlich. Nachdem ihr es installiert habt könnt ihr mit "F12" einen neuen Bereich öffnen und seht recht dann euren Layoutcode und links davon eure styles. Nun könnt ihr einfach direkt im Browser euer Layout stylen und schauen, wie was aussieht. Danach müsst ihr diesen Style nur nur noch in eure style.css kopieren und fertig. In Google Chrome und im Internet Explorer 9 (ich glaub auch 8) geht das auch ganz ohne Add-on.








7 Kommentare:

  1. im ernst das mit dem hover effekt für das halb-transparent dingens geht so leicht o.o
    Ich hab dafür so nen.. javascript xD maannn... aber ok

    AntwortenLöschen
    Antworten
    1. ja aber so geht es nicht in jedem browser und fliegt dir leicht um die ohren.

      man sollte sich da genau informieren.

      Löschen
    2. opacity funktioniert eigentlich in jedem gängigen Browser außer im IE
      Dort heißt es
      filter: alpha(opacity=50);

      Löschen
    3. es gibt da noch Zusatzbefehle und man muss den stack beachten sonnst geht es nicht.

      es können nämlich bugs im ie 7 und 8 sonnst auftreten. habe noch mal schnell die Zeitschrift hoch gewühlt. gab mal ein css 3 special.

      Löschen
  2. *kopf wieder gerade nehm* und ich dachte, ich hab nen knick in der optik :DDD

    Nein Scherz. Das mit dem schrägen und wackeln und wahhh..css3 is einfach toll ! Ich bin SO gespannt, wo scripten code etc noch hin geht ! *aufgeregt hin und her hüpf*

    Das Lay und der Effekt von Rainbow Quest ist soooo genial :3 Hamoniert super :D

    AntwortenLöschen
  3. Ich finde einige Effekte sehr schön, doch bin jemand die möchte, dass es überall bei jedem Browser funktioniert. Meine Schule z.b. besitzt die alten Browser wo manches nicht geht und deswegen werde ich nicht ganz auf css3 einsteigen. Ich will aber nicht bestreiten das einige effekte voll Lustig sind. Rainbow Quest ist das beste Beispiel und ich finde es sehr schön, wie Foxy das macht. Jedoch regt mich das nicht an so etwas auf meiner HP zu machen.
    weil auf einem Browser sieht es schick aus und auf den anderen total ... ihr wisst schon was ich meine xDDD

    AntwortenLöschen
  4. Schöne Effekte und du hast recht, die werden aktuell gerne verwendet xD. Den schiefen Effekt hab ich selbst noch nicht ausprobiert, aber ich glaub der hätte bei mir nicht so gepasst. Den Opacity dagegen hab ich selbst eingebaut x3.

    Vll. schreibst du ja mal das ein oder andere Tutorial auf PinkPearl zu diesen Effekten?

    AntwortenLöschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates