diedVIPs

html knowhow

Runde Ecken für Bilder











Bild mit runden Ecken, Schatten und Größenanpassung

Mit dem Befehl
So sieht´s aus



Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
Hier nichts
</style>
<head>

<body >
<img style="border-radius:10px;" height="auto" src="Bilder/Rankingcheck.jpg" width="60%" />
</body>

</html>


Bild mit runden Ecken, Schatten und Größenanpassung

Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </div>.
So sieht´s aus


Quellcode
<html>
<head>
Hier nichts
<style type="text/css">
#vier {border: 1px solid grey; border-radius: 5px;box-shadow: 5px 5px 5px white inset, 5px 5px 5px black;}
.auto-style84 {background-color: #D5FDA8;}
</style>
</head>

<body>
<table align="right" cellspacing="6" style="width: 30%">
<tr><td><div style="width: 100%; height: auto; background: #ffffff;"><a href="Info.html">
<img id="vier" src="Bilder/Fotos/T-Ratgeber.jpg" style="height: inherit; width: 100%; height: auto; float: right;" alt="Ratgeber" class="auto-style84" /></a></div></td></tr>
</table>

</body>
</html>


Boxen mit verschiedenen Rändern

Mit dem hier unten abgebildeten Frame binden Sie eine eigene Seite auf Ihre Seite ein. Wenn Sie Scrolling auf YES setzen, wird die Scrollingleiste angezeigt. Auf NO nicht. Mit WIDTH bestimmen Sie die Breite des Frames und mit HEIGHT die Höhe.
So sieht´s aus

Runde Ecken für ein Element mit farbigem Hintergrund

Runde Ecken 1

Runde Ecken für ein Element mit Rand

Runde Ecken 2

Runde Ecken für ein Element mit Hintergrundbild

Runde Ecken 3

Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#rcorners1 {border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners2 {border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners3 {border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
</style>
<head>

<body >
<p>Runde Ecken für ein Element mit farbigem Hintergrund</p><p id="rcorners1">Runde Ecken 1</p>
<p>Runde Ecken für ein Element mit Rand</p><p id="rcorners2">Runde Ecken 2</p>
<p>Runde Ecken für ein Element mit Hintergrundbild</p><p id="rcorners3">Runde Ecken 3</p>
</body>

</html>









Kontakt    Datenschutz   Impressum