Möglich dieses mit CSS nachzubauen?

[Melina]

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.