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 |