Extract UI Items

Code block with header

User Interface Discussion

I like that the site used this style of block to show the code. It's neat in that it replicates a computer terminal and makes it easy to distinguish the code from the rest of the text on the page.

This element was built with CSS. They used text shadow to make the header text look like it was embossed in the top. They also used a background color to separate that header from the code box. The code box used a darker grey background to make it look like a terminal. They also used the <code> HTML element to make the text appear code like. The corners on the whole box are slightly rounded and the bottom box has a grey border to really make the box stand out.

Text with different background color & font

User Interface Discussion

I like how they used a different background color and font on this element to make the code command stand out.

To create this, they changed the background color, font color, font family (by using the <code> element). They also added a small box shadow to give the box more dimension as well as slightly rounded the corners.

Overlayed "banner"

User Interface Discussion

I love the look of this banner! I love how it seems to pop out of the page and how it wraps around the side of the main content area. It really makes the sections like this stand out.

To create this, they started with a background color that was a linear gradient. They also used a white font color to stand out on the background. They also added extra padding to make the boxes a bit larger than the text. Using the ::before option, they also added a border that created the "edge" of the banner that wraps around the side. It was a mix of using the border and aligning it just right to create that effect.

Search box

User Interface Discussion

I always love a search box on a site, but what I loved about this was how nicely it blended in with the page, yet was still easy to find. I also liked how it changed background colors when you click in it to do a search.

This was created with CSS to set the background color and font color. They also updated the font size and did a bit of a shadow on it. The corners are slightly rounded as well. I'm not 100% sure how they changed the background when you click it, but I'm assuming it's JavaScript. I just couldn't find it easily.