Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS3 doppelter Verlauf

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

    CSS3 doppelter Verlauf

    Hi Leute,

    kann mir einer evtl sagen, wie ich in CSS3 zwei Verläufe in meiner Menüleiste hinbekomme ?

    also es soll ca so aussehen:



    den Verlauf von unten nach oben kann man ja hiermit erstellen:

    background-image: linear-gradient(to bottom, #B5B3A3 0%, #4B4B4B 100%)


    (irgendwie klappt das bei mir auch nur, wenn die das Semikolon am Ende weglasse)

    und wie bekomme ich das z.B. hin, dass der background-image befehl insgesammt nur zu 20% wirken soll ?



    Danke schonmal im Voraus!

    #2
    Wo sind da zwei Verläufe? :D

    Kommentar


      #3
      Für Mozilla:
      background: -moz-linear-gradient(-45deg, #262626 0%, #5e5e5e 50%, #212121 100%);

      Für Webkit Browser:
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#262626), color-stop(50%,#5e5e5e), color-stop(100%,#212121));

      Nochmal Webkit Browser..anderer Syntax:
      background: -webkit-linear-gradient(-45deg, #262626 0%,#5e5e5e 50%,#212121 100%);

      Für alles, bis es von jedem Browser unterstützt wird:
      background: linear-gradient(135deg, #262626 0%,#5e5e5e 50%,#212121 100%);

      *edit:
      Mit "XXdeg" kannst du den Winkel des Verlaufs anpassen.



      *edit2: Sorry vergessen:
      Für 20% Transparenz einfach die #Hex Farbcodes in RGB umwandeln (Internet) dann erhältst zu zb.: 20,20,20

      Also änderst du den #Farbcode (im Verlauf) auf "rgba(20,20,20,0.2)".

      Die 0.2 ist der alpha Wert (Transparenz). 1 wäre 100%, 0.2 eben 20%.

      *edit3: Beispiel:

      background: linear-gradient(135deg, #262626 0%,#5e5e5e 50%,#212121 100%);

      wird zu

      background: linear-gradient(135deg, rgba(35,35,35,0.2) 0%,rgba(94,94,94,0.2) 50%,rgba(35,35,35,0.2) 100%);

      Kommentar


        #4
        Zitat von azn
        Wo sind da zwei Verläufe? :D
        klick auf das image, was ich hogeladen habe.
        Da ist ein Leichter, der von unten nach oben geht und einer, der von der Mitte aus nach links und rechts geht.


        //
        THX @ haco schonmal!

        Kommentar


          #5
          Hier ein komplettes Bsp:

          http://jsfiddle.net/bdS3V/1/

          Kommentar


            #6
            OP wenn du mich fragst ist das ein einziger radialer verlauf bissjen über der mitte

            Kommentar


              #7
              schon mal besten Dank, die Seite ist echt praktisch.

              also der Verlauf von Innen nach Außen klappt.
              jetzt bräuchte ich noch zusätzlich einen Verlauf von unten nach oben, der links und rechts mit ca 80% wirkt und in der Mitte nur mit ca 20%.

              kann man das irgendwie ?

              Kommentar


                #8
                Man kann 2 gradients übereinander lagern. Siehe div.neu.

                http://jsfiddle.net/bdS3V/40/

                div.neu2 hat noch diesen leichten Shine-Layer. Wie bei deinem Beispielbild. Ganz easy mit box-shadow in weiß.

                Kommentar


                  #9
                  Zitat von haco
                  Man kann 2 gradients übereinander lagern. Siehe div.neu.

                  http://jsfiddle.net/bdS3V/40/

                  div.neu2 hat noch diesen leichten Shine-Layer. Wie bei deinem Beispielbild. Ganz easy mit box-shadow in weiß.
                  DANKE!
                  du bist mein Held für heute!! ;)

                  Kommentar


                    #10
                    Photoshop? Was ist das? Kenne nur CSS3!

                    Kommentar


                      #11
                      wenns mit css zu machen ist imme > bilder (solange browser unterstützung passt)

                      Kommentar


                        #12
                        kannst 2 getrennte divs mit 2x jeweils radial verlauf versuchen, um den effekt hinzubekommen. ist aber echt nicht so einfach :)

                        hier das hier kann helfen:
                        http://www.colorzilla.com/gradient-editor/

                        Kommentar


                          #13
                          nur mal so nebenbei: wird css3 mittlerweile von allen browsern (incl. IE9+) fehlerfrei unterstuetzt?

                          Kommentar

                          Lädt...
                          X