[CSS3] "Apple" Effekt?

[d3221]

Hi eine Frage zum neuen CSS3

Weiß jemand von euch, wie man diesen Effekt von der Apple Navigation oben von den Menüpunkten mit CSS erzeugen kann? Oder ist das überhaupt möglich?

Wäre nice wenn da jemand was wüsste

Danke schon einmal ^_^

 

[Rage2008]

AW: [CSS3] "Apple" Effekt?

meinst du die farbveränderung wenn man mit der maus drüber geht?
nennt man "hover" un kannste ganz einfach googlen^^

 

[d3221]

AW: [CSS3] "Apple" Effekt?

Oh nein Ich mein wen nder Button so da ist, mit dem leichten weißen Rand das es "reingepresst" aussieht :'DDDDD

Omg nein doch kein Hover xD (=D)

 

[hellemon]

AW: [CSS3] "Apple" Effekt?

Hier habe ich ein paar Links

http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and-buttons-tutorial/







Vista Web Buttons: Überragende HTML-Schaltflächen und HTML-Menüs!

Gruß hellemon

 

[d3221]

AW: [CSS3] "Apple" Effekt?

...nochmal: Es geht hier nicht um MOUSEOVER! Es geht um den "Eingedrückten" OPTISCHEN Effekt.

 

[fakerer]

AW: [CSS3] "Apple" Effekt?

das ist nix andres als ein Hintergrund wo der Butten eben so gezeichnet ist mit den Rändern das er eingedrückt aussieht.

und die backgroundposition wird dort per javascript mit nem onclick ereigniss verschoben.

 

[TMP2k1]

AW: [CSS3] "Apple" Effekt?

Das ist so wie ich das sehe ein onlick-Event in Javascript.
Ob es in CSS sowas auch gibt, weiß ich nicht, aber ich würde mal die Suche mit "onclick css" oder sowas empfehlen

\E: ah ... zu lange rumgelesen, fakerer hat's auch schon gesagt

 

[d3221]

AW: [CSS3] "Apple" Effekt?

Okay ich glaub ich habe es immer noch falsch formuliert... es geht ums das OPTISCHE wenn man druf guckt! Ohne die Maus auch nur anzufassen! xD

Ich meine bei den Menüpunkten.. diesen 1px rand unterhalb der Schrift..

 

[GoMeZ]

AW: [CSS3] "Apple" Effekt?

... 1px Rand ... wozu willst Du da CSS einsetzen? Das ist doch nur GRAFIK?!
Dazu brauchst Du PS oder Gimp?!

Gruß, der GoMeZ

 

[andrepape]

AW: [CSS3] "Apple" Effekt?

hallo.
also hier gibt es doch auch das tutorial wie man die apple seite nachbaut und ich habe das versucht und muss sagen das es genauso aussieht wie das original.

 

[Rima1337]

AW: [CSS3] "Apple" Effekt?

Also ich versteh auch nicht wirklich was du willst, meinst du einfach die Font?

Aber auch egal was es ist, hier lernst du wie du die komplette Navigation zusammenbaust:

Da wird ja das richtige hoffentlich dabei sein =D

Greetz Rima

 

[d3221]

AW: [CSS3] "Apple" Effekt?

... 1px Rand ... wozu willst Du da CSS einsetzen? Das ist doch nur GRAFIK?!
Dazu brauchst Du PS oder Gimp?!

Gruß, der GoMeZ

Weil es auch mit CSS3 geht. Das weiß ich. Nur nicht genau wie. Und Grafiknavigationen werden immer unmorderner grade eben weil es solche Lösungsansätze gibt. Außerdem muss man dann nicht für jeden neuen Punkt eine neue Grafik anlegen sondern kann einfach (wenn man sich selbst ein gutes Backend gebaut hat oder ein CMS nutzt) neue Menüpunkte adden und verwalten.

 

[hubspe]

AW: [CSS3] "Apple" Effekt?

Weil es auch mit CSS3 geht. Das weiß ich. Nur nicht genau wie. Und Grafiknavigationen werden immer unmorderner grade eben weil es solche Lösungsansätze gibt.

sorry aber das ist schlichtweg Unfug, wenn ich das mal so hart ausdrücken darf.

CSS 3 funktioniert nicht browserübergreifend. Grade der Winzigweichbrowser hat damit massive Probleme.
Grafiknavis sind ausgesprochen modern grad weil man damit ohne Scripten tolle optische Effekte (Eindrückeffekt der Buttons!) zaubern kann.

Außerdem muss man dann nicht für jeden neuen Punkt eine neue Grafik anlegen

Bei einer vollgrafischen Navi braucht man pro Link eine Grafik für alle Zustände.
Die Apple-Navi ist von dieser Art, wenn ich das richtig sehe, nur das Apple überflüssiges JS nutzt.

Es geht auch mit einer Grafik für alle Links und alle Zustände. CSS-Sprites heißt es dann.

sondern kann einfach (wenn man sich selbst ein gutes Backend gebaut hat oder ein CMS nutzt) neue Menüpunkte adden und verwalten.

Es braucht weder Backend noch CMS um durch includen eine schreibsparende Navi ohne Deppenlink zu bauen.

Du hast dein Anliegen auch nicht falsch formuliert, dir sind nur noch nicht alle Möglichkeiten bekannt die modernes CSS so bietet, habe ich den Eindruck.

 

[Rage2008]

AW: [CSS3] "Apple" Effekt?

aso jetzt weiß ich was du meinst^^ das verwenden sie bei deviantart au.
geht mit dem css befehlt "text-shadow" un den kannst du problemlos googlen^^

das hier wäre ein unterer, weißer rand wie auch bei apple:

#text {
text-shadow: 0 1px 0 #ffffff;
}

 

[hubspe]

AW: [CSS3] "Apple" Effekt?

aso jetzt weiß ich was du meinst^^ das verwenden sie bei deviantart au.
geht mit dem css befehlt "text-shadow" un den kannst du problemlos googlen^^

dann google doch auch mal welche Browser text-shadow interpretieren können.
Ein Textschatten in einer navi zu erzeugen ist auch heutzutage ohne CSS 3 ohne Probleme jederzeit möglich , Stichwort: vollgrafische navi in meinem letzten Posting.

 

[Rage2008]

AW: [CSS3] "Apple" Effekt?

mag ja sein das es nicht jeder browser unterstützt, aber er wollte wissen wie man es mittels css machen kann un mit text-shadow kann man es machen^^

 

[hubspe]

AW: [CSS3] "Apple" Effekt?

mag ja sein das es nicht jeder browser unterstützt, aber er wollte wissen wie man es mittels css machen kann un mit text-shadow kann man es machen^^

ich habe auch nur CSS-Lösungen verlinkt.
Und zwar welche die heutzutage schon in allen gängigen Browsern funktionieren.

Klar kann man text-shadow auf einer HP einsetzen, bloß der Sinn dessen ist mir nicht so klar, wenn die Mehrzahl der Besucher, die ja immer noch mit dem Winzichweichbrowser daherkommt da nix von hat.

 

[d3221]

AW: [CSS3] "Apple" Effekt?

@hubspe: Doch! Nur will ich mich einfach in das Thema CSS3 einarbeiten da es sehr bald auch Browserübergreifend sein wird. Derzeit nur im FF und Safari und in der IE9 Version wird das auch 100% drin sein. Wer nicht updated ist selbst Schuld. Ja es gibt Leute die nicht updaten DÜRFEN aber CSS3 wird früher oder später fest integriert sein Und da will ich mich jetzt schon einmal einlesen und rumprobieren. Deswegen auch die expliziete Frage nach CSS3

 

[hubspe]

AW: [CSS3] "Apple" Effekt?

@hubspe: Doch! Nur will ich mich einfach in das Thema CSS3 einarbeiten da es sehr bald auch Browserübergreifend sein wird. Derzeit nur im FF und Safari und in der IE9 Version wird das auch 100% drin sein. Wer nicht updated ist selbst Schuld. Ja es gibt Leute die nicht updaten DÜRFEN aber CSS3 wird früher oder später fest integriert sein Und da will ich mich jetzt schon einmal einlesen und rumprobieren. Deswegen auch die expliziete Frage nach CSS3

ich denke CSS 3 wird noch lange nicht Standard sein können.
MS hat den Support für den IE6 soweit ich weiss bis 2014 verlängert, IE7 und IE8 können mit CSS3 so gut wie nix anfangen.

Als angehender Mediengestalter soll es dir unbenommen sein mit CSS3-Features zu spielen, die praktische Verwendung im Alltag der kommerziellen Websites liegt leider noch in weiter Ferne, bzw. ist nur eingeschränkt möglich.

Vor dem Hintergrund sollte die Nutzung von CSS3-Effekten mit dem heutigen CSS-Standard für dich fachlich eigentlich interessanter sein.

Watt nützt dir das ganze CSS3-Gedöns beruflich, wenn du nicht in der Lage bist z.B. eine vollgrafische navi mit der Image Replacement Technik nach Gilder/Levin umzusetzen (wobei ich nicht andeuten will das du es nicht kannst, ist ja nur ein Beispiel).

Ich hoffe du verstehst worauf ich hinaus will.

 

[fakerer]

AW: [CSS3] "Apple" Effekt?

also meiner Meinung nach wird CSS3 noch lange kein Thema sein, zumindest für grössere Seiten, da leider IE6 noch immer zu berücksichtigen ist.