Beispiel:CSS3 shape-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>CSS - shape 1</title>
  <style>
.erde {
  shape-outside: circle(50% at 50% 50%) border-box;
  shape-margin: 1.5em;
  margin: 1.5em;
  width: 300px;
  height: 300px;
  float: left;
}

.mond{
  shape-outside: circle(40% at 50% 50%) border-box;
  shape-margin: 1em;
  margin: 0.5em;
  width: 200px;
  height: 200px;
  float: right;
}

body {
  background: black;
  border-color: #8a9da8;	
  color: white;
}

h1 {
  background-color:transparent;}
  </style>
</head>

<body id="go">
  <h1>CSS - shape-outside: circle()</h1>

    <h2>Erde und Mond</h2>
    <img class="erde" src="http://wiki.selfhtml.org/images/e/e1/Erde.png" alt="Erde">
    <p>Die Erde ist der dichteste, fünftgrößte und der Sonne drittnächste Planet des Sonnensystems. Ihr Durchmesser beträgt über 12.700 Kilometer und ihr Alter etwa 4,6 Milliarden Jahre. 
       Sie ist Heimat aller bekannten Lebewesen. Nach der vorherrschenden chemischen Beschaffenheit der Erde wird der Begriff der erdartigen (terrestrischen) oder auch erdähnlichen 
       Planeten definiert.
     </p>
     <h2>Der Mond</h2>
     <img class="mond" src="https://wiki.selfhtml.org/images/f/f4/Mond.png" alt="Mond" >
     <p>Der Mond ist der einzige natürliche Satellit der Erde. Seit den Entdeckungen von Trabanten bei anderen Planeten des Sonnensystems, im übertragenen Sinn zumeist als Monde 
        bezeichnet, wird er zur Vermeidung von Verwechslungen auch Erdmond genannt. Er ist mit einem Durchmesser von 3476 km der fünftgrößte Mond des Sonnensystems.</p>
     <p>Aufgrund seiner verhältnismäßigen Nähe ist er der einzige fremde Himmelskörper, der bisher von Menschen betreten wurde, und auch der am weitesten erforschte. 
        Trotzdem gibt es noch viele Unklarheiten, etwa in Bezug auf seine Entstehung und manche Geländeformen. Die jüngere Entwicklung des Mondes ist jedoch weitgehend geklärt.</p>
     <p>Sein astronomisches Symbol ☾ ist die abnehmende Mondsichel, wie sie (nach rechts offen) von der Nordhalbkugel der Erde aus erscheint.</p>
     <p>Quelle: <a href="https://de.wikipedia.org/wiki/Erde">Wikipedia</a></p>

</body>
</html>