Quick Tip - Watermarking Your Layouts

Skem9 .^. Website Tutorials | Submited Jun 13, 2012

Written by:

This is a shiny new CSS3 thing, but any browser newer than IE7 should be able to support it sufficiently.

The idea is that you insert text into an element. Ideally, if you replace the text, rather than appending it, this should be a useless element, like that thing in #Umenu that says "300 Layouts." Inserting text into someones actual profile content is sleazy. I didn't like it when layout sites did it in 2006, and I don't like it now.

Here's a sexy code example:

#head:after{content:"Layout By Mr. Evil"; display:block;}

That would do this:

I know that looks stupid, I'm just showing the effect of the code.


There's a bunch of areas that can feasibly have a background image, and also don't hold any content. You can make use of that space by putting a watermark image. For example, the padding between #contents2 and the actual profile:
#contents{background:#131313;}
#contents2{background:url('http://i.imgur.com/z92LHl.png') left 100px scroll no-repeat;}
That would produce this:






ul#Umenu li:nth-child(6){font-size:0; letter-spacing:-1px}
ul#Umenu li:nth-child(6):after{font-size:12px; letter-spacing:0; content:"Layout by Mr. Evil"}



(Click for full)#search form{display:none;}
#search-results{border:0}
#search{position:absolute; position:fixed; top:92%; left:0;}
#search:after{content:"Layout by Mr. Evil"}



.goodies:after{content:"Layout by Mr. Evil"}



.commentForm{font-size:0}
.commentForm:before{font-size:14px; content:"Layout by Mr. Evil"}



#foot:after{content:"Layout by Mr. Evil"; display:block}

Are you seeing a pattern on how to do this? Use your creativity.

0 Like Add to Favorites