CSS Code Tipps – div Container erstellen und anpassen

div Container anpassen – eigenen Hintergrund mit Verlauf ohne Grafik, runde Ecken, eigene Breite und vieles mehr

Um auf bestimmte Textabsätze in meinen Artikeln mehr Aufmerksamkeit zu erhalten erstelle ich regelmäßig eine Grafik mit Photoshop. Meistens nochmal 30 Minuten oder sogar 3 Stunden zusätzlich. Also zusätzlich zu dem schreiben des eigentlichen Artikels. Es geht auch einfacher hab ich mir gedacht. Mit CSS! Durch den passenden CSS Code können Sie in Artikeln, auf einer Seite oder in der Sidebar einen eigenen div Container anzeigen lassen und den Inhalt und das Aussehen selber festlegen. Auf dieser Seite finden Sie eine Anleitung dafür. Eine Anleitung um einen div Container nach Ihren Wünschen anzupassen. Nun erst einmal zur Inhaltsübersicht.

  1. div Container erstellen.
  2. Umrahmung erstellen.
  3. Hintergrund anpassen.
  4. Runde Ecken und Schlagschatten.
  5. Größe anpassen und Feineinstellungen.
  1. div Container erstellen.

Als erstes erstellen Sie sich einen einfachen div Container. <div>Ihr Inhalt!</div> Noch etwas genauer? Hier ein Beispiel dazu.

HTML Codebeispiel:

<div>Ihr Inhalt!</div>

Die Darstellung dieses Codes in auf dieser Seite lohnt sich noch nicht. Sie würden keinen Unterschied sehen. Dazu kommen wir jetzt.

  1. Umrahmung erstellen

Um Ihrem div Container einzurahmen müssen Sie die style.css Ihres WordPress Child Themes anpassen. Als erstes müssen Sie dort Ihrer Box einen Namen geben. Es darf kein Name sein der vom Child Theme oder Parent Theme genutzt wird sonst überschreiben Sie das Original. Da meine Box eine spezielle ist nenne ich Sie einfach spezial-box-1.

CSS Codebeispiel:

.spezial-box-1 {
position: relative;

/* Rahmen */
border: 2px solid #000000;
}

Mit dem Punkt vor dem Name legen Sie fest das dies ein Name für einen bestimmten Style ist. Diesen Style müssen Sie nun Ihrem div Container zuweisen. Das funktioniert über den HTML Tag class. In meinem Beispiel also class=“spezial-box-1″. Den Punkt müssen Sie im HTML Code weglassen!

HTML Codebeispiel:

<div class="spezial-box-1">Ihr Inhalt!</div>

Und hier wie das ganze dann eingebunden aussieht.

div Container Beispiel 01

Dies ist ein div Container mit schwarzem 2 Pixel breitem Rahmen!

Sie sehen bereits einen Unterschied. Einen simplen schwarzen Rahmen um die Box der 2 Pixel breit ist. Sie können auch nur an einer Seite oder nur oben einen Rahmen anzeigen lassen. Einfach statt border, border-left, border-right, border-top oder border-bottom einfügen. Sie können auch ganz individuell an jeder Seite der Box einen eine andere Rahmenstärke benutzen. Wenn Sie lieber einen gestrichelten rahmen haben möchten müssen Sie solid mit dashed austauschen oder dotted (gepunktet). Einfach mal ein wenig testen welcher Ihnen am besten gefällt. Den Farbcode #000000, also schwarz, können Sie selbstverständlich auch nach Ihren Wünschen anpassen. Nun kommen wir zu dem Hintergrund.

  1. Hintergrund anpassen.

Durch den Rahmen ist ja bereits der separate Bereich erkennbar. Durch das anpassen der Hintergrundfarbe können Sie Ihre Box noch mehr hervorheben. Sie können dafür eine Grafik nehmen (background-image), eine gewünschte Farbe (background oder color) oder einen Farbverlauf (background-image) nutzen. Ich werde nur auf die Farbverläufe eingehen. Am Ende der Seite finden Sie einen Link zum einem Gradient Generator. Dort können Sie sich eigene Farbverläufe erstellen und Ihnen wird direkt der benötigte CCS Code angezeigt. Zu dem CSS Code fügen Sie nun folgende Zeilen hinzu.

CSS Codebeispiel:

.spezial-box-1 {
position: relative;

/* Rahmen */
border: 2px solid #000000;

/* Hintergrund */
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* IE10+ */ 
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Mozilla Firefox */ 
background-image: -o-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Opera */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #fceabb), color-stop(51, #F8B500), color-stop(100, #fbdf93)); /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Webkit (Chrome 11+) */ 
background-image: radial-gradient(ellipse farthest-corner at center, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* W3C Markup */ 
}

Da viele Browser unterschiedlich arbeiten sollten Sie zur Sicherheit den gesamten Code nutzen! So gehen Sie auf Nummer sicher das es in den jeweiligen Browsern auch richtig dargestellt wird. Den HTML Code brauchen Sie nicht verändern. Die Änderungen werden ja durch die style.css zugewiesen.

Und hier wie das ganze dann eingebunden aussieht.

div Container Beispiel 02

Und dies ist ein div Container mit schwarzem 2 Pixel breitem Rahmen und einem Verlauf als Hintergrund!

Nun sieht man einen klaren Unterschied.

  1. Runde Ecken und Schlagschatten.

Um die Box noch weiter aufzupeppen lassen wir die Ecken abrunden. Also nur zwei der Ecken so wirkt es am besten. Desweiteren werden wir der Box einen Schlagschatten verpassen. Der CSS Code für die Box muss dann folgendermaßen aussehen.

.spezial-box-1 {
position: relative;

/* Rahmen */
border: 2px solid #000000;

/* Hintergrund */
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* IE10+ */ 
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Mozilla Firefox */ 
background-image: -o-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Opera */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #fceabb), color-stop(51, #F8B500), color-stop(100, #fbdf93)); /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Webkit (Chrome 11+) */ 
background-image: radial-gradient(ellipse farthest-corner at center, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* W3C Markup */ 

/* Schlagschatten */
box-shadow:0px 8px 10px #000000;

/* abgerundete Ecken */
border-radius: 20px 0px 20px 0px; 
-moz-border-radius: 20px 0px 20px 0px; 
-webkit-border-radius: 20px 0px 20px 0px;
}

Es kommt nun darauf an wie Sie den Inhalt gestalten. Durch den Verlauf, den Schlagschatten, den Rahmen und die abgerundeten Ecken haben Sie einen kleinen Eyecatcher. Die Box wird mehr Aufmerksamkeit bekommen. Im letzten Punkt passen wir noch die Größe an und nehmen noch ein paar Feineinstellungen vor. Doch vorher noch einmal das bisherige Beispiel.

div Container Beispiel 03

Und dies ist ein div Container mit schwarzem 2 Pixel breitem Rahmen, einem Verlauf als Hintergrund, abgerundeten Ecken und Schlagschatten!

  1. Größe anpassen und Feineinstellungen.

Die Größe Ihrer Box können Sie frei anpassen. Entweder geben sie ihr eine feste breite und Höhe. Als Beispiel wide=“300px“; height=“250px“; mit diesem Beispiel ist die Box 300 Pixel breit und 250 Pixel hoch. Wenn Sie keine breite angeben wird Sie auf 100% gesetzt. Ich möchte Sie für meine Box auf 90% festlegen. So bleibt Sie immer etwas schmaler als der Eigentliche Content. Ein kleines Problem ist das Inhalt komplett am Rand der Box ausgerichtet wird. Mit einem Abstand wirkt es besser. Und auch den Abstand zu den angrenzenden Elementen können Sie einstellen.

.spezial-box-1 {
position: relative;
/* Rahmen */
border: 2px solid #000000;

/* Hintergrund */
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* IE10+ */ 
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Mozilla Firefox */ 
background-image: -o-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Opera */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #fceabb), color-stop(51, #F8B500), color-stop(100, #fbdf93)); /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* Webkit (Chrome 11+) */ 
background-image: radial-gradient(ellipse farthest-corner at center, #fceabb 0%, #F8B500 51%, #fbdf93 100%); /* W3C Markup */ 

/* Schlagschatten */
box-shadow:0px 8px 10px #000000;

/* abgerundete Ecken */
border-radius: 20px 0px 20px 0px; 
-moz-border-radius: 20px 0px 20px 0px; 
-webkit-border-radius: 20px 0px 20px 0px;

/* Boxreite */
width: 90%;

/* Abstand innerhalb der Box */
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;

/* Abstand zu weiteren Elememten */
margin-top: 50px;
margin-bottom: 50px;
margin-left:auto;
margin-right:auto;
}

div Container Beispiel 04

Und dies ist ein div Container mit schwarzem 2 Pixel breitem Rahmen, einem Verlauf als Hintergrund, abgerundeten Ecken und Schlagschatten! Die Boxbreite ist auf 90% gestellt und der Abstand innerhalb der Box ist links, rechts und oben auf 20 Pixel gestellt. Der Abstand des div Containers zum nächsten Element / Absatz ist oben und unten auf 50 Pixel gestellt! Nach links und rechts wird der Abstand automatisch erzeugt.

Wie Sie sehen hat dieser Absatz mehr Abstand nach oben zu dem div Container! Mit margin-left und margin-right können Sie auch nach links und rechts den genauen Abstand zuweisen. Ich habe dort auf auto gestellt so das der div Container zentriert wird.

Zusammenfassung

Wie Sie sehen können Sie schnell und einfach eigene div Container erstellen. Und diese nach Ihren wünschen Anpassen. Ich habe auf cssportal.com einige CSS Generatoren gefunden welche ich Ihnen empfehlen kann. Sollten Sie noch Fragen oder Anregungen haben dürfen Sie gerne einen Kommentar hinterlassen.

  1. Link zum CSS Gradient Generator auf cssportal.com. Einer von vielen CSS Generatoren die dort zu finden sind.

Kommentarregeln → Kein Spam! Keine Links im Kommentar! Keine Urls als Name benutzen! Vorname oder Nickname reichen aus und sind Pflicht damit Ihr Kommentar freigeschaltet wird. Eine Email Adresse müssen Sie nicht eintragen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.