Ankündigung

Einklappen
Keine Ankündigung bisher.

Hilfe bei Logo mit CSS3

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Hilfe bei Logo mit CSS3

    Ich wollte gerade ein Logo mit CSS3 machen, kriege aber keinen abgeschnittenen Kreis hin.

    [image]http://i.imagebanana.com/img/dhm0t3jr/logo.jpg[/image]

    So sollte der aussehen mit den Maßen 200x200px.

    Hab bisher nur den Kreis hinbekommen.

    width: 200px;
    height: 200px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    Wäre schön wenn mir da jemand helfen könnte :)

    Obligatorische Pic:
    Spoiler: 
    [image]http://i.imagebanana.com/img/ojoo2p4l/wallpaper2496039.jpg[/image]

    #2
    WIe ich es einfach liebe :D Wenn man von hinten guckt und man dann den Hügel sieht^^

    Kommentar


      #3
      well all love the gap.

      und jetzt, helft dem mann.

      Kommentar


        #4
        So? http://cssdesk.com/PuH4L

        Kommentar


          #5
          Perfekt, danke! :)

          Edit: Dadurch, dass du eine Fläche über den Kreis gemacht hast, ist diese ja Weiß. Wäre es möglich die transparent zu machen? Hab nämlich ein Bild als Hintergrund.

          Kommentar


            #6
            Wenn die Fläche transparent ist, sieht man aber erst einmal den Kreis wieder. ;)

            Wenn du ganz genau weiß, an welcher Stelle das Logo sein soll, könntest du aus der Hintergrundgrafik genau die Fläche ausschneiden und die Ausschnittsfläche damit füllen. Das ist aber Pixelarbeit. Wieso nicht einfach den Kreis als Grafik machen?

            Kommentar


              #7
              Ich wollte meine CSS Skills mal erweitern und mit CSS3 ist ja einiges möglich :P Ich hatte den Kreis am Anfang als Grafik, aber als ich dann diverse Sachen mit CSS gemacht habe, wollte ich mich mal ans Logo ranprobieren^^ So programmiertechnisch halt einfach nice2have :)

              Kommentar


                #8
                Ach anders: Du kannst in der Ausschnittsfläche einfach die gleiche Hintergrundgrafik nehmen wie für das Body/Wrapper-Element. Du musst mit background-position einfach die Grafik richtig positionieren. Ist zwar auch richtig gute Fummelei, aber würde auf jedenfall eine weitere Grafik ersparen. ;)

                Kommentar


                  #9
                  Ich werd das mal probieren, danke :)

                  Hab aber auch noch was ganz nettes gefunden: http://css3ps.com/

                  Weiß aber noch nicht obt das so klappt, da ich noch auf der Arbeit bin.

                  Kommentar


                    #10
                    http://cssdesk.com/nXqZF

                    ist halt webkit only, farben + -moz-linear-gradient anpassen, done

                    Kommentar


                      #11
                      Ich seh rechts nur grün :S

                      Kommentar


                        #12
                        browser? ;)

                        edit: Hab dir mal die anderen Browser-Prefixe geadded. Also bei mir gehts im FF + Chrome: http://cssdesk.com/nXqZF

                        Kommentar


                          #13
                          Hatte nur ein Ladefehler. FF unter OSX.

                          So sieht das doch super aus :)

                          http://cssdesk.com/3trKA

                          Viele Dank!

                          Kommentar


                            #14
                            für logos wäre illustrator doch sowieso besser geeignet - viel einfacher mit zu arbeiten und umzugehen :)

                            Kannste dir ja auch mal anschauen.

                            Kommentar


                              #15
                              Danke für die Info kEv. Das ist mir alles klar. Arbeite beruflich als Mediengestalter. Aber ich mache kein aufwendiges Logo das ich auf 10 verschiedene Medien verwende, sondern benutze es nur für eine statische HTML Seite, die ich aus eigenem Interesse mache. Und Illustrator hätte mein Problem nicht gelöst.

                              Kommentar

                              Lädt...
                              X