CSS Code Tipps – Textschatten und Grafiken spiegeln

Ich nutze bereits seit einiger Zeit Textschatten. Speziell für Überschriften ein nettes Features. So können Sie bestimmte Textstellen hervorheben. Vor kurzen hatte ich die Idee Texte und Bilder zu Spiegeln um sie betonen. Nach kurzem Googeln fand ich auf der Seite von Oliver Gast den passenden CSS Code dafür. Link am Ende des Beitrags. Ich werde Ihnen auf dieser Seite auch ein paar kurze Beispiele auflisten. Und ich erkläre Ihnen wie Sie diese Funktionen in Ihren WordPress Blog einbinden. So können Sie diese jederzeit bei Bedarf in Beiträgen, auf Seiten oder wo Sie möchten nutzen.

Textschatten, gespiegelte Texte und gespiegelte Grafiken Beispiele.

Als erstes werde Ich Ihnen ein paar Beispiele auflisten. Damit Sie einen kleinen Überblick bekommen was möglich ist. Unter jedem Beispiel finden Sie den verwendeten CSS Code. Wo Sie diesen einfügen erkläre Ich Ihnen weiter unten.

  1. Beispiel – Schwarze Schrift und hellblauer Schatten.

Text mit Schatten Beispiel 01.

.text-shadow-1 {
text-shadow: #3dbbeb  0.1em 0.1em 0.2em; font-size:10px;
}
  1. Beispiel – Weiße Schrift mit einem schwarzen Schatten.

Text mit Schatten Beispiel 02.

.text-shadow-2  {
text-shadow:  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; #333333  0.1em 0.1em 0.2em;
}
  1. Beispiel – Graue Schrift mit einem schwarzen Schatten.

Text mit Schatten Beispiel 03.

.text-shadow-3  {
text-shadow: 1px 1px 0px #eee, 3px 3px 0px #333333;
}

Es ist noch einiges mehr möglich doch 3 Beispiele mit Textschatten reichen zur Veranschaulichung denke ich. Als nächstes ein Beispiel wenn Sie einen Text spiegeln möchten.

  1. Beispiel – Schwarze Schrift gespiegelt.

Gespiegelter Text Beispiel 04.

.text-reflect-1  {
-webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(255,255,255,1) 100%);
}

Sie können Ihre Texte und Grafiken auch nach links (left), rechts (right) oder nach oben (above) spiegeln lassen. Bei mir ist der aktuelle Wert unten (below). Sie können die Spiegelung auch ausblenden lassen. Das ist besonders Interessant bei Grafiken finde ich. Hier ein Beispiel.

  1. Beispiel – Gespiegelte Grafik 75% ausgeblendet.

CSS Code Beispiel 05 - Gespiegelte Grafik 75% ausgeblendet.

 

.img-reflect-1 {
background: url(http://www.cash-im-web.com/wp-content/uploads/anbieteruebersicht-2016.png) no-repeat;
-webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(255,255,255,1) 100%);
}

Selbstverständlich können Sie die CSS Befehle auch kombinieren. Um einen Text mit Schatten und gespiegelt anzeigen zu lassen. Hier auch dafür noch das sechste und letzte Beispiel danach geht es um die Einbindung in Ihren WordPress Blog.

  1. Beispiel – Graue Schrift mit Schatten und gespiegelt.

Text mit Schatten und gespiegelt Beispiel 06.

.text-mix-1  {
-webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(255,255,255,1) 100%);
text-shadow:  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; #333333  0.1em 0.1em 0.2em;
}

Noch mehr Beispiele finden Sie auf der Seite von Oliver Gast. Den Link zur Seite finden Sie am Ende dieser Seite.

CSS Code in WordPress Blog einbinden.

Um die CSS Codes aus den Beispielen in Ihrem WordPress Blog einzufügen gibt es viele Möglichkeiten. Zum einem können Sie den Code direkt in Ihre WordPress style.css einfügen. Ich empfehle Ihnen dafür ein Child Theme anzulegen. Ist in 5 Minuten erledigt und Sie brauchen es nicht jedesmal neu einzutragen wenn Sie das Theme updaten. Wie Sie ein Child Theme erstellen für das neue Twenty Sixteen Theme erkläre ich Ihnen hier! Einige WordPress Themes bieten Ihnen die Möglichkeit Custom CSS zu integrieren. Es gibt aber auch zahlreiche Custom CSS Plugins. Sie können die CSS Codes aber auch direkt in die Artikel oder Seiten mit einbinden. Meiner Meinung nach aber zu viel Code für einen Artikel dann ich bevorzuge die Einbettung ins Theme. Ich werde nochmal kurz Anhand von Beispiel 1 und Anhand von Beispiel 5, der gespiegelten Grafik, Ihnen erklären wie Sie die Codes in Ihr Theme einfügen.

  1. Beispiel – Schwarze Schrift und hellblauer Schatten.

Text mit Schatten Beispiel 01.

CSS Code zum einfügen in die style.css / Custom CSS.

.text-shadow-1 {
text-shadow: #3dbbeb  0.1em 0.1em 0.2em; font-size:10px;
}

HTML Code zum einfügen in einen Artikel, eine Seite oder Widget.

<h3 class="text-shadow-1" style="text-align: justify;">Text mit Schatten Beispiel 01.</h3>

Mit dem tag class können Sie Ihre CSS Befehle aufrufen lassen um Sie in Artikeln beispielsweise zu nutzen. Der Name des CSS Befehls ist text-shadow-1 mit text-shadow-2 wird, wenn in der style.css ein solcher Befehl vorhanden ist, ein anderer Textschatten angezeigt. Die Namen können Sie frei festlegen je kürzer desto leichter zu merken und einzufügen. Wenn ein Browser diese CSS Befehle nicht verarbeiten kann ignoriert er diese einfach. Sie bekommen keine Fehlermeldung angezeigt.

  1. Beispiel – Gespiegelte Grafik 75% ausgeblendet.

CSS Code Beispiel 05 - Gespiegelte Grafik 75% ausgeblendet.

 

CSS Code zum einfügen in die style.css / Custom CSS.

.img-reflect-1 {
background: url(http://www.cash-im-web.com/wp-content/uploads/anbieteruebersicht-2016.png) no-repeat;
-webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(255,255,255,1) 100%);
}

HTML Code zum einfügen in einen Artikel, eine Seite oder Widget.

<img class="img-reflect-1 aligncenter" src="http://www.cash-im-web.com/wp-content/uploads/anbieteruebersicht-2016.png" alt="anbieteruebersicht-2016" width="700" height="250" />

Bei Grafiken müssen Sie die Grafik URL in die style.css / Custom CSS mit einfügen. So wird die selbe Grafik gespiegelt. Sie können dort auch eine andere Grafik zum Spiegeln verwenden zum Beispiel einen Farbverlauf. Der Kreativität sind keine Grenzen gesetzt!

Ich hoffe ich kann Ihnen mit dieser Seite etwas weiter helfen. Wenn Sie noch Fragen zu diesem Thema haben dürfen Sie gerne einen Kommentar hinterlassen. Zum Schluss noch der Link zu der am Anfang erwähnten Seite von Oliver Gast. Dort finden Sie eine Übersicht der CSS3 Artikel.

  1. Link zur CSS3 Artikel Übersicht von Oliver Gast →

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.