MoreLesson 248Free preview

Browser Window

This lesson is part of How To · All levels

Summary

A browser window mockup is a CSS composition that mimics a browser window to beautify a screenshot or portfolio. It usually consists of a top bar containing three dots, an address column, and a content area. It's just a visual element, so don't use it to fool users or mimic the security interface.

Key points

The mockup structure consists of a container, a title bar, a dot sequence, an address bar, and a content area.
Border-radius on the container and overflow: hidden makes the angle of the mockup neat.
Three dots can be created with repeating span elements or pseudo-elements.
Use the fine box shadows to give the impression of a floating window.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.