Development Journal

Student at Flatiron School NYC

Svbtleness

Recently, I wrote a “FeedBurner” type application to allow admins to aggregate blogs and publish and tweet selected posts. You can see the Flatiron Magazine here.

While putting some polish on the CSS and information architecture, I took a style hint from a favorite publication of mine, “Svbtle”. That hint was the inclusion of “watermarks”

WaterMarks

The point of a water mark is to provide a static background element that provides a a texture and depth to a document. Although subtle, it is an elegant way to make your work standout.

Magazine

3 Parts

Producing the watermark effect that is currently on trend takes four lines of code at it’s most basic form. The rest are personal touches you can affect, as you want.

Z-index: -1;

The Z-index property of CSS refers to where a DOM element is stacked on the document in a 3-D representation of the DOM. It tells us how far or near the element is to the user. This is a great full explanation of the z-index but for now, just remember that the element that you want to watermark needs to have the lowest z-index of any element on your page. That way all the other elements are stacked above them and the watermark won’t interfere with the rest of your layout.

Position: fixed;

The point of a watermark is to provide a static background element that provides texture and depth to a document. By fixing the element’s position, it will become most visible when the user scrolls the document and provide a nice surprise as the user’s eye focuses on it. You can toy with relative or fixed but I suggest fixed for any type of text consumption site.

Color: #fafafa;

A watermark should be subtle and not obvious to every user when they first get to the site. If 15% of your users don’t even notice it, you have done a good job. Always pick a shade for the font that visible from an angle but may be overlooked when a user peers straight on. For light color backgrounds use shades just slightly darker like the grey white combo I used. Use light colors against darker backgrounds.

Experiment and you will find the right fit.Here is my favorite site to pick colors from.

The code for the vertical “Flatiron”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1#large_side {
  position: fixed;
  top: 7%;
  left: 95%; 
  font-size: 200px;
  line-height: 200px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fafafa;
  z-index: -1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;

Enjoy, and remember to polish the front-end when you work. Even just good HTML text hierarchy can do wonders to attract attention from a user.

Links