CSS Technique Explained- MoreSleep

MoreSleep, a creative agency from Berlin, offered a stylish but user-friendly portfolio site.


Large font-size values, neat scrolling effects and a red-heavy, contrasted colour scheme make this site stand out.  CSS transitions make it smoother to navigate through pages and content. Background-size properties are used to control the scaling of images at different sizes. Even the newsletter signup form is styled to match the clean look and feel.

One major CSS technique I found it worth to mention is the so-called Pesudo-elements. A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

The most widely used pseudo-element is the ::first-line pseudo-element, which is  used to add a special style to the first line of a text. However, in the case of MoreSleep, it inserted a lot ::before and ::after pseudo codes. The ::before (::after) pseudo-element can be used to insert some content before (after) the content of an element.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s