C

CSS Tutorial – Schatten unter dem Inhaltsbox

In diesem Tutorial erlernst du, wie einen schönen Schatten hinter dein Inhaltsbox zu schaffen ist.

Zuerst erstelle die Attributen des Boxes. Ich habe meinem Box einen weissen Background gegeben und ein hellgraues Kontur. Dazu kommt noch den font-size und die Ränder des Boxes, entwerfe diese nach deiner Belieben. Bei mir es sieht so aus:

.box {
background: #fff;
padding: 20px;
color: #555;
margin-top: 30px;
font-size:11px;

Natßrlich benutze ich in meinem Box mehrere font-size (H2, H3, H4, usw) Diese kannst du nach deinem Belieben gestalten.

Das Bild in dem Box bekommt Margin von 10px Recht und Unten.

.box img {
float: left;
clear:left;
margin-right: 10px;
margin-bottom:10px;
}

Jetzt kommen wir auf die Einstellungen des Schattens:

.shadow{
position:relative;
}
.shadow{
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}.shadow:before, .shadow1:after{
position:absolute;
content:““;
bottom:12px;left:15px;top:80%;
width:45%;
background:#adadad;
z-index:-1;
-webkit-box-shadow: 0 20px 15px #adadad;
-moz-box-shadow: 0 20px 15px #adadad;
box-shadow: 0 20px 15px #adadad;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.shadow:after{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
right: 15px;left: auto;
}

Dann ordnen wir den „shadow“ zu unserem Div class in HTML:

  <div class="box shadow">

       <a href="subpage.php"><img src="images/mainimage.jpg" ></a>
       <h2><a href="subpage.php">Titel</a></h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat...<h4><a href="subpage.php">Read more</a></h4></p>

   </div>

CategoriesTutorial - Text

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.