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.