← back to WGD home

Extract UI Items

Jekyll Home

User Interface Discussion

I like this arrow because it floats nicely on the page. It also adds an informal, personal touch to the page.

To create this item, the developer used an after pseudo element using the background property in CSS to get the image. The position is aboslute so it doesn't move on the page, and it only appears when the width of the viewport is at least 768px.

Jekyll Home

User Interface Discussion

I like the way the inside shadow appears when I hover on a link in the navigation bar. It is very easy to tell which link I have selected and the style pairs nicely with the website's aesthetic

This style was created using an inset box shadow and text-shadow using the hover selector in CSS.

Jekyll Home

User Interface Discussion

I like this quick start guide because they styled it to look like a Mac app. I thought it was a screenshot at first, but it was actually created entirely with HTML and CSS. It also floats nicely on the page and overlaps some elements to signify its importance.

To create the heading, the developer used a linear gradient and centered the text. For the overall block of code, the developer changed the font to a monospace font, used a right float, and set the width to have it float on the page.

Jekyll Home

User Interface Discussion

I like the way the three column layout is responsive. It offers three suggestions for links to navigate the website and when the page is resized, the columns stack up into three rows.

To create this item, the developers changed the width of each column to 33% and applied a float left as well as 10px padding to separate the columns. They also set up a media breakpoint to stack the columns for a mobile device.