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 |
Mit CSS kann man ganz einfach Bilder "schräg" darstellen. Auf PinkPearl habe ich das mit der Navigation gemacht. Mit "transform: rotate(-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) |
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.
im ernst das mit dem hover effekt für das halb-transparent dingens geht so leicht o.o
AntwortenLöschenIch hab dafür so nen.. javascript xD maannn... aber ok
ja aber so geht es nicht in jedem browser und fliegt dir leicht um die ohren.
Löschenman sollte sich da genau informieren.
opacity funktioniert eigentlich in jedem gängigen Browser außer im IE
LöschenDort heißt es
filter: alpha(opacity=50);
es gibt da noch Zusatzbefehle und man muss den stack beachten sonnst geht es nicht.
Löschenes 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.
*kopf wieder gerade nehm* und ich dachte, ich hab nen knick in der optik :DDD
AntwortenLöschenNein 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
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.
AntwortenLöschenweil auf einem Browser sieht es schick aus und auf den anderen total ... ihr wisst schon was ich meine xDDD
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.
AntwortenLöschenVll. schreibst du ja mal das ein oder andere Tutorial auf PinkPearl zu diesen Effekten?