<i class="icon-code"></i> Pseudo-Watermark / Inline Text II. ✤✤✤

Hallo :)
Letztens bin ich mal wieder auf Blog-lese-Tour gewesen und dabei bin ich auch bei Fotoblogs vorbeigekommen. Da fielen mir natürlich die Wasserzeichen auf, und ich dacht mir, eigentlich könnte man das auch mit CSS machen.
Ich gebe zu, es ist eigentlich keine wirkliche Alternative, falls man seine Bilder richtig brandmarken will, aber es eröffnet neue Alternativen. Ich weiss nicht, wer sich noch an meinen Inline Text-Post erinnert, aber dort habe ich eigentlich das selbe gemacht, nur mit etwas grösserem Markup.

Hello :)
Lately I've been browsing around in the blog world, and have found some post inspiration. I noticed the watermarks on pictures on different photoblogs and thought, that you could do the same thing with CSS.
I admit, it's not a real alternative, if you really wanna brandmark your pics, but it opens up alternatives. I don't know if you know my Inline Text-Post, but it's pretty much the same idea, but with another markup.

CSS Watermark

With Image
Okay, für das Wasserzeichen, das auf einem Bild basiert, habe ich dieses Beispiel hier für euch.

Okay, that's my watermark with image example

Als Ausgangslage hab ich natürlich mein Bild, welches gewatermarkt wird, und mein Wasserzeichen.

To begin with, I have my pic that is getting marked and my watermark as an image



Als erstes zum Markup. Das Wasserzeichen wird in einem Pseudoelement platziert, also brauchen wir einen Container, denn die Pseudoelemente funktionieren bei Img-Tags nicht. Wir schreiben also unser Bild in einen Div-Container, dem wir eine Klasse "watermark" geben.

Fist for the Markup. The watermark is getting placed in a pseudoelement, so we need a container, because you can't apply the pseudo elements on images. We write our image in a div and add the class "watermark".

<div class="watermark"><img src="IMGURL"></div>

Und dann geht's schon zur CSS.
Als erstes müssen wir den Container in die selbe Grösse bringen, wie unser Bild. Bei mir ist das 800x450. Ausserdem braucht unser Container das Attribut position: relative, da wir ansonsten das Pseudoelement nicht genau platzieren können.

And then we can already start adding the CSS.
First we have to give our Container the same size as our image. For me that's 800x450. Moreover, you have to add the attribute position: relative, otherwise we can't place our pseudoelement as we please.

.watermark{
height: 450px;
width: 800px;
position: relative;
}

Und nun zum Wasserzeichen. Wir platzieren es wie gesagt in einem pseudoelement, dessen content unser Bild ist. Platzieren wollen wir das ganze in der Mitte.
Das Platzieren in der Mitte machen wir so, dass wir den Abstand von oben und von links jeweils auf 50% setzen. Dann teilen wir unsere Breite und Höhe jeweils durch zwei und nehmen das Ergebnis als Wert für unseren Rand. Auf diese Weise kann das Bild, das das Wasserzeichen bekommt, beliebig gross sein und unser Wasserzeichen wird immer in der Mitte angezeigt.

Now for the watermark. We place it, as said before, in a pseudoelement, which contant's our pic. And then we wanna place it in the center.
To place it in the center, we first place it 50% from the top and the left side. Then we divide the width and height of the pic by two and the result is gonna be our negative margin. This ensures that the basic image, which is getting the watermark, can have any size and the watermark will allways stay in the middle.

.watermark:after{
content: url(Watermark_URL);
position: absolute;
height: [IMAGEHEIGHT]px;
width: [IMAGEWIDTH]px;
top: 50%;
margin-top: -[IMAGEHEIGHT/2]px;
left: 50%;
margin-left: -[IMAGEWIDTH/2]px;
}

Und dann habt ihr's! Das Wasserzeichen steht!

And that's it!

---

With CSS only
Und hier das Beispiel, das nur CSS verwendet.

And here the CSS-only version.

Ihr kennt mich, ich muss das immer auch ohne Bild machen. Dazu brauchen wir beide pseudoelemente, also :after und :before. Das Markup, bleibt sich allerdings gleich. Das zeig ich euch nur der Vollständigkeithalber. Was ich hier mag ist, dass das ganze etwas wandelbarer ist, da man die Farbe dem Bild anpassen kann. Für helle Bilder schwarz und für dunkle weiss. :)

You know me, I always have the things without images as well. For that we do need both pseudoelements, so :after and :before. The markup stays the same. I only show you this to complete this whole thing. What I like about this version is the fact that it can vary. For lighter images it can be black, for darker ones white.

.watermark:after{
content: "\00a9";
position: absolute;
height: 183px;
width: 183px;
top: 50%;
margin-top: -92px;
left: 50%;
margin-left: -92px;
border-radius: 50em;
font-size: 205px;
line-height: 185px;
padding-left: 5px;
font-family: Comfortaa;
color: rgba(255,255,255,.5);
}

.watermark:before{
content:"KreaTief";
position: absolute;
top: 50%;
left: 50%;
width: 183px;
height: 183px;
color: rgba(255,255,255,.9);
font-family: Dosis;
font-size: 35px;
margin-top: -20px;
margin-left: -38px;
font-weight: 200;
}

---

Less HTML
Und natürlich geht das auch mit weniger HTML und mehr CSS. Man kann das Image-Tag weglassen und dafür über CSS als Hintergrund definieren. Das würde dann so aussehen.

And of course you can do this with less HTML, and more CSS. Leave out the image tag and add it as a background instead

HTML

<div class="watermark_cssonly" />

CSS

.watermark_cssonly{
height: 450px;
width: 800px;
position: relative;
background: url(IMAGE_URL);
}

Inline Text II.

Okay, ihr könnt euch jetzt sicher vorstellen, was man damit alles machen kann. Man kann damit ganz locker auf allen Möglichen Hintergründen schreiben. Ich sehe es oft, z.Bsp. auf Rezeptblogs, das die Zutaten auf einem "Papier" stehen. Aber jedes Mal so ein Bild zu machen, wenn man's mit ein bisschen CSS machen kann?
Als Beispiel verwende ich Ressources von deviantart Link

Okay, you surely can imagine how much possibilities you have now. You can easily write on any kind of backgrounds now. I often see that people for example have extra images for ingredients of recipes. This would save you a lot of time, because you can just write the text once and then you add the class whenever you need it.
For the example I'm using some dA ressource. Link

Markup ist wieder ein einzelner div-container, mit einer Klasse.

markup is a simple div-container again.

<div class="peacock_box" />

Nun für die CSS. Das Bild ist sehr gross, ich habe es einfach etwas kleiner gemacht. Damit das Bild in den Container reinpasst, brauchen wir bloss "background-size" anzupassen. :)

Now for the CSS. The pic is pretty big, I just shrunk it to the desired size, using "background-size" and some simple math. :)

.peacock_box{
height: 450px;
width: 500px;
position: relative;
background: url(http://fc00.deviantart.net/fs70/i/2011/150/c/e/scrapbook_patterns_5_by_subtleknees-d3hmgy1.jpg);
background-size: 500px 620px;
}

Für den "Titel" hab ich mich für eine Schleife entschieden, die um 90 Grad rotiert wird. Hellblau und Kapitälchen.

I made the heading into a ribbon, rotated by 90 degrees, light blue and in small-caps.

.peacock_box:after{
content: "My Title";
height: 0px;
width: 90px;
border-color: #B0C7D6 transparent #B0C7D6 #B0C7D6;
border-style:solid;
border-width:30px;
position: absolute;
top: 43px;
left: 10px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-family: Comfortaa;
font-size: 20px;
line-height: 0px;
font-variant: small-caps;
}

Der Hauptcontainer bekommt einen transparenten Hintergrund und die Buchstaben Text-schatten, damit sie sich etwas vom HG abheben.

The main container gets a transparent background and the letters get a text-shadow so they don't merge with the image.

.peacock_box:before{
content:"Lorem ipsum \A dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tem- \A por invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\A At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd\A gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\A";
height: 210px;
width: 460px;
background: rgba(255, 255, 255, .5);
position: absolute;
top: 160px;
left: 0;
padding: 20px;
overflow: auto;
font-family: Dosis;
color: black;
text-shadow: 1px 1px white;
font-size: 17px;
white-space: pre;
}

Und das ist auch schon alles. Einmal geschrieben und dann nur noch jeweils ein paar Zeilen CSS, um das anzupassen.
Als Basis würde ich content:""; speichern und dann bei jeder Anwendung unten im Post Style-Klammern öffnen und die Contents anpassen.

And that's it again. Once written and then you only have to add a few lines for the content. I'd save it with an empty content (content:"";) and then just add it in each post individually into some style-tags.