Melina: Möglich dieses mit CSS nachzubauen?

Beitrag lesen

Hallo Matthias,

Ja. Text, Farbe, Hintergrundfarbe stellen auch ein Problem dar?

sollte klar sein. Hab dieses folgendermaßen umgesetzt.

  
<div class="telefon">  
   <p>Rückrufservice</p>  
</div>  

  
.telefon {  
	width:276px;  
	height:30px;  
	background-color:#65140a;  
	border-radius:7px;  
}  
  
.telefon p {  
	color:#b6c3d0;  
	font-weight:bold;  
	font-size:.85em;  
	letter-spacing:2px;  
	display:block;  
	padding:8px 0 8px 7em;  
	text-transform:uppercase;  
}  

Jetzt hat die rote Grafik einen ganz weichen verlauf. Wie könnte ich dieses umsetzten so dass er in allen relevanten wichtigen Browsern funktioniert? Und er sollte wirklich nur sehr sanft sein.

Mein Beispiel ist auch hier zu sehen: http://jsfiddle.net/sweu022f/

Das Bild wird als ::before-Pseudoelement realisiert, absolut positioniert, bekommt die schwarze Hintergrundfarbe und einen border-radius von 50%. Der leichte 3D-Effekt wird mit box-shadow realisiert.

Mit ::before habe ich bis jetzt noch nie etwas gemacht. Hab es mal angeschaut finde aber dieses ist hier nicht nötig. Ich kann innerhalb von meinem DIV eine Grafik einfügen?

Mit dem 3D-Effekt ist so eine Sache, da ich bis jetzt noch nie etwas mit box-shadow gemacht habe bzw. nur ein Schatten um die ganze Seite gelegt.

Die Grafik selbst reduziert sich dann auf ein weißes Telefon vor einem transparenten Hintergrund.

Beim Telefon und Haus bin ich noch am überlegen ob ich eine Grafik von hier nehmen soll.

0 64

Möglich dieses mit CSS nachzubauen?

Melina
  • css
  1. 0
    Matthias Apsel
    1. 0
      Melina
      1. 0

        Update

        Melina
        1. 0
          Melina
          1. 0

            Runder Kreis mit CSS?

            Melina
            1. 0

              Kann man es so lassen? & Anregung zum Wiki

              Melina
              1. 0
                Matthias Apsel
                1. 0
                  Melina
      2. 0
        Camping_RIDER
        1. 0
          Melina
        2. 0
          Melina
          1. 0
            Gunnar Bittersmann
            1. 0
              Camping_RIDER
              • menschelei
              1. 0
                Tabellenkalk
                1. 0
                  Camping_RIDER
            2. 0
              Auge
              1. 0
                Camping_RIDER
                1. 0
                  Auge
                  1. 0
                    Matthias Apsel
                    • menschelei
                    1. 0
                      Camping_RIDER
                    2. 0
                      Felix Riesterer
                    3. 0
                      Auge
                      1. 0
                        Der Martin
                        1. 0
                          Camping_RIDER
                          1. 0
                            Camping_RIDER
                            1. 0
                              Auge
                          2. 0
                            Der Martin
                            1. 0
                              Camping_RIDER
                              1. 0
                                Auge
                            2. 0
                              Auge
                              1. 0
                                Der Martin
                                1. 0
                                  Camping_RIDER
                2. 0
                  Der Martin
  2. 0

    SVG oder PNG

    Melina
    1. 0
      Matthias Apsel
  3. 0

    Meine fertige Grafik

    Melina
    1. 0
      Matthias Apsel
      1. 0
        Melina
        1. 0
          Matthias Apsel
          1. 0
            Melina
            1. 0
              Matthias Apsel
              1. 0

                Als ob das was Gutes wäre...

                Melvin Cowznofski
                • menschelei
                1. 2
                  1UnitedPower
                  1. 0
                    Melvin Cowznofski
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    Auge
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Auge
                        1. 0
                          Matthias Apsel
                          1. 0
                            Melina
                            1. 0
                              Matthias Apsel
                          2. 0
                            Auge
                            1. 0
                              Matthias Apsel
                              1. 0
                                Camping_RIDER
                                1. 0
                                  Matthias Apsel
                                2. 0
                                  Auge
                                  1. 0
                                    Matthias Apsel
                                    1. 0
                                      Auge
                                  2. 0
                                    Camping_RIDER
                              2. 0
                                Auge
                    2. 0
                      Melvin Cowznofski
                      1. 0
                        Auge
          2. 0
            Gunnar Bittersmann