[CSS] Inline Text ✤✤

(fast) nur Code

Mithilfe eines einzigen Patterns, zeig ich euch heute, wie ihr diesen Text-Container machen könnt, dank eines kleines Bisschens CSS.
Text über Bild könnte man den Post auch übertiteln, denn genau so funktioniert es, wenn ihr Text über einem Bild anzeigen wollt.
Das thematisieren wir allerdings etwas später im Post.


Okay, als erstes brauchen wir ein Pattern. Wir können irgendeines nehmen, es muss bloss dazu in der Lage sein eine beliebig grosse Fläche zu füllen.

<--- Das ist das Pattern, das ich verwendet habe.

Der Code ist extrem einfach und doch so effektiv.
Der Grundaufbau besteht aus zwei einfachen Zeilen HTML, die man eigentlich sofort geschrieben hat.
Zwei <div>-Container, die inneinander sind.
Ausserdem habe ich beschlossen die Grösse des Containers auch hier festzulegen. Den Rest erledigen wir dann in CSS.

HTML:
<div id="bg" style="height: 200px; width: 500px;">
<div id="text">
(fast) nur Code </div>
</div>

So einfach geht's ^^
Als nächstes unser "Workspace" für CSS:
<style type="text/ccs">
/*hier kommt der ganze Code rein*/
</style>

Beginnen wir mit dem Hintergrund. Das Pattern soll sich im ganzen Container wiederholen und das Bild soll runde Ecken mit einem Radius von 20px haben.
Die runden Ecken werden ganz einfach folgendermassen definiert:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;

Für die gefüllte Fläche benuten wir den background-Code und fügen den Link Link des Patterns ein. Ausserdem kommt noch ein repeat hin.
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9u8cPT4zEgsqVAL3tI8-cUN2EzBtgjOnUiu4OYnCAKfh-Dqc0_-EnGkJVFMDbQuNEdxuVOddzq2cEhMwQapVAAqHuRx6Zr9Mr04JqsZvPgxUX7hH3bkDlRwXJgf5YxitwqY1-kvoRwC9/s1600/Pattern-Small.gif) repeat;
position: relative;

Der Code für den Hintergrund und somit das, was wir in die Style-Tags einfügen ist also:
#bg {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9u8cPT4zEgsqVAL3tI8-cUN2EzBtgjOnUiu4OYnCAKfh-Dqc0_-EnGkJVFMDbQuNEdxuVOddzq2cEhMwQapVAAqHuRx6Zr9Mr04JqsZvPgxUX7hH3bkDlRwXJgf5YxitwqY1-kvoRwC9/s1600/Pattern-Small.gif) repeat;
position: relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}

Momentan schaut unser Container also folgendermassen aus:

(fast) nur Code

Der Text hängt momentan einfach noch klein und ungestaltet in der oberen, linken Ecke.

Machen wir uns also ans Definieren des Textes.
Als erstes bestimmen wir die Breite des Containers. Ich setz ihn einfach mal auf die gleiche Breite wie derjenige, in dem er drinsteckt, also dem bg. Ausserdem bestimmen wir den Abstand vom unteren Rand her, in meinem Fall 95px, das der Text dann schlussendlich ungefähr in der Mitte angezeigt werden soll. Ausserdem soll er auch mittig ausgerichtet sein, also fügen wir noch ein text-align hinzu.
width: 500px;
position: absolute; 
bottom: 95px;
text-align: center; 

Okay, das hat jetzt aber noch nicht wirklich was im Text verändert. Momentan schaut's nämlich einfach nur so aus:

(fast) nur Code

Kommen wir nun zur Textformatierung. Als erstes bestimmen wir die Schriftfarbe, die ich in diesem Fall der Hintergrundfareb des Pattern angepasst habe. Dann soll die Schrift fett dargestellt werden und wir bestimmen die Schriftart, sowie Schriftgrösse.
color: #9babaf;
font-weight: bold;
font-family: 'Sofia', cursive;
font-size: 70px;

So schaut's jetzt aus:

(fast) nur Code

Fast perfekt, doch der Text verschmilzt mir noch etwas zu sehr im Nichts.
Um das zu ändern definieren wir noch einen Text-Schatten. Der Code setzt sich folgendermassen zusammen. Farbe, Versetzung von oben, Versetzung von unten und den Grad ver Verschommenheit.
text-shadow: #2f0a37 0px 0px 3px;

Der vollständige Text-Code schaut also so aus:
#text{
width: 500px;
position: absolute; 
bottom: 95px;
text-align: center; 
color: #9babaf;
font-weight: bold;
font-family: 'Sofia', cursive;
font-size: 70px;
text-shadow: #2f0a37 0px 0px 3px;
}


Und das wär's, hier noch einmal das Endergebnis:

(fast) nur Code

So, das ist jetzt der ausführliche Weg, doch mit dem "doppelten" <div>-Container lassen sich nun auch ganz einfach kleinere Texte in Bildern platzieren.
Beispiele solcher einfacher Platzierungen sind meine QuickTips, bei denen immer das Thema per
<div>-Container eingefügt wird.
Bei solch kleinen Inline-Texten ist es nicht nötig das CSS in die Style-Tags zu schreiben, man kann sie einfach direkt im <div>-Container definieren.
Unten zwei Beispiele.

Und das wär jetzt so ein Textbeispiel

<div style="position: relative; background: url(http://th02.deviantart.net/fs71/PRE/f/2012/154/6/1/6189853704de0337494fc45b88ed9064-d525bhu.png); width: 500px; height: 333px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;"> Und das wär jetzt so ein Textbeispiel</div></div>

Auch noch ne Variante ^^

<div style="position: relative; background: url(http://th02.deviantart.net/fs71/PRE/f/2012/116/b/d/bd70a64699ab75703942b5cfb537f1a9-d4xn8ar.png); width: 500px; height: 333px;">
<p style="position: absolute; top: 1em; left: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;"> Auch noch ne Variante ^^ </p> </div>