Runde Ecken, ohne Javascript oder Grafikprogramm!

    Seid ihr an einem CSS3-"Guide" interessiert? 2

    1. Naja.. mir eigentlich egal.. (0) 0%
    2. Eher weniger Interesse... (0) 0%
    3. Ja, sehr sogar! (2) 100%

    Guten Abend allesamt :)


    Ich habe durch einen Thread hier im Forum(Die Sache mit den Rahmen/Doctype) einen kleinen Denkanstoß bekommen, welchen ich nun ein wenig ausgearbeitet habe :)
    Um dies nun in all seinen Vorzügen genießen zu können, empfehle ich euch euren Browser zu aktualisieren. (Meist unter Optionen/Extras -> Nach Updates suchen oder aber neu downloaden)
    Außerdem kann ich aus eigenen Erfahrungen berichten, dass ihr die schönsten Ergebnisse mit Googles Chrome erhaltet.
    Solltet ihr den Feuerfuchs benutzen, so kann ich euch schon sagen, dass ihr das Ergebnis nur eingeschränkt zu Gesicht bekommt..
    Bist du ein Internet Explorer Benutzer, so muss ich dir leider mitteilen, dass du hier schon lange hättest aufhören können zu lesen, wenn du dir nicht gerade einen anderen Browser(am besten Chrome) downloadest, da du rein gar nichts sehen wirst.
    Opera und Safari habe ich noch nicht getestet.


    Nun zu meiner Idee:
    Durch den Thread(siehe oben) habe ich überlegt und da viel mir ein, dass es möglich ist durch einige neuere CSS3 Befehle rundungen zu erzeugen.
    Auch viel mir schnell eine Möglichkeit zum erzeugen eines Schattens ein.
    Ein wenig rum getüpfelt und das Ergebnis konnte sich sehen lassen :)
    Ich habe einen Code kreiert, mit dem man ohne ein Grafikprogramm seine Bilder Abrunden kann und mit einem Schatteneffekt versehen kann :)
    Das Ergebnis finde ihr hier.
    Wer aufmerksam war, hat bemerkt, dass es oben noch einige Links auf der Seite gab^^
    Diese führen zu Weiterentwicklungen der Grundidee, die mir während des Programmierens kamen.
    Besonders die letzte Sache ("Galeriefunktion") finde ich interessant :)


    Naja, nun würde mich eure Meinung brennend interessieren ^^


    Zudem würde mich interessieren, ob es euch interessiert, wenn ich euch in einem Extra-Thread die Neuerungen die CSS3 mit sich bringen wird näher bringen soll/darf und euch diese erklären darf :)


    LG
    Sarkkan
    __________________________________________________________________________
    PS: Wer Reschtchrib-, Gramatik-, Zeischensatzung- oder sonstige Fehla fintet darf es behaltn :)

    das ergebnis mit google chrome ist cool.
    bei der galeriefunktion kann ich das bild vergrössern und verkleinern je nach mausposition.
    nur - die fotos sind beim ersten rund und dann nicht mehr "nur" die schatten. ist das absicht?


    woher kennst du den code?
    werden da ständig neue codes kreirt und dann veröffentlicht oder wie kann ich mir das vorstellen.
    auf jeden fall fänd ich das gut neuerungen von css zu erfahren.


    ist jetzt der browser von google so gut ?

    Würd mich auch interessieren.
    Nur kann man die neuen Befehle erst einsetzen, wenn alle Browser das unterstützen, Chrome benutzen ja nicht so viele wie Firefox und IE.

    Spontan würde ich sagen, er hat den Code selbst zusammengebastelt, die Idee dahinter (die seh ich da zumindest :P):
    -Bild nehmen und Ecken abrunden
    -div drum, dem ne Hintergrundfarbe, Ecken abrunden
    -Bild so verschieben das es passt mit dem Abstand.


    Fertig.


    Vorzüge von CSS3 kenne ich zwar schon, aber eine Ausarbeitung ist mit Sicherheit ganz gut für den Überblick. Vielleicht direkt in Verbindung mit den Neuerungen von HTML5, dann hat man einen guten Gesamt-Überblick.
    Wenn du Hilfe brauchst, sag Bescheid ;)


    LG
    Laura

    @Peter1978:
    "die fotos sind beim ersten rund und dann nicht mehr "nur" die schatten."
    Wie meinst du das? Die Bilder 2 & 3 haben wirklich von "Natur" aus keine Rundungen, diese erscheinen erst, wenn man mit der Maus darüber fährt :)
    Es sollte also irgendwie so wirken, als ob der Benutzer sich die Bilder etwas weiter in den Vordergrund ziehen kann :)


    Den Code habe ich von vielen Seiten^^
    Bin halt mal durch einen Zufall auf eine Seite mit CSS3 Codes gekommen und hab dann weitere gesucht^^
    Nun suche ich mir meine Codes bei W3C-CSS heraus ^^
    Die Seite wird wenn man nach CSS3 googelt mittig bis unten angezeigt, daher kenne ich sie noch nicht so lange.. >_>'


    Der Browser von Google ist ziemlich gut :)
    Er benötigt nur einen relativ Leistungsstarken Computer^^
    Dafür er kennt Chrome eigentlich ALLE neuen Features/Funktionen/Codes und führt diese Richtig aus :)



    Sören:
    Wohl war, aber es soll theoretisch in der Mache sein, dass die Browser alle aufgerüstet werden :)
    Der Firefox z.B. kennt schon einiges an Befehlen ^^
    Nur in der Konkreten Ausführung hapert es noch :D



    lauras:
    Mehr war es eigentlich wirklich nicht^^
    Nur gab es halt immer wieder einige Schwierigkeiten :?
    Aber die habe ich dann doch noch irgendwie ausbügeln können :D


    Das letztere darf ich also dann mehr oder weniger als Arbeitsauftrag sehen? :D

    Also gibt es von W3C eine überarbeitet Version von css, in dem Fall css3?
    So ähnlich wie bei es html ständig neue Versionen gibt, zurzeit html5?


    Sarkkan
    Es wirkt für mich genau so - das Bild kommt mir entgegen.


    Surfst du mit Chrome oder mit mehreren oder einem anderen Browser?


    freundlich
    Peter[/list]

    Dann habe ich alles richtig gemacht =D


    Ich persönlich surfe seit neustem mit Chrome ^^
    Hab vorher auf FF geschwört :D
    Aber habe auch alle anderen Browser^^ (Nun wieder.. hatte sie vor kurzem entfernt, daher konnte ich das nicht testen^^)



    PS:Überlege gerade, ob ich nicht besser diesen "Guide" auslagern sollte.. =/
    Dann kann ich immer direkt noch ein Beispiel anführen^^

    Mit auslagern meine ich, dass ich euch hier einen Link zu meiner Seite poste, auf der ich euch diesen "Guide" schreibe ;)
    Dort hätte ich dann vollen Zugriff auf alles, ich kann euch direkt ein Beispiel angeben,...


    Klick mal irgendwo Rechts hin und Klicke auf 'Element untersuchen' :)
    Dort findest du unter anderem den Reiter 'Console' ich glaube, der müsste mit Firebugs gleich zu setzten sein ^^
    Ansonsten müsstest du mal eben, die Extensions for Web Developers-Site Besuchen und nachsehen ^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden