Assignment 01
Extract UI Items

A code block.
Code Block

Code Block

UI Item 01 - Summary

I find it interesting that this code block has its CSS margin property set up with negative vertical margins so that it protrudes from the containing element.

UI Item 01 - Techniques

This code block has its CSS margin property set up with negative vertical margins so that it protrudes from the containing element.

An information banner.
Information Banner

Code Block

UI Item 02 - Summary

I find it interesting that this information banner overhangs the edge of the containing element.

UI Item 02 - Techniques

This information banner has its CSS margin-left property set to a negative value so that it overhangs the edge of the containing element.

A graphic of an octupus-cat.
Octopus-Cat Graphic

Octopus-Cat Graphic

UI Item 03 - Summary

I find it interesting that this graphic is displayed partially beneath the neighboring text element.

UI Item 03 - Techniques

This graphic has its CSS margin property set up with negative margins so that it protrudes from the containing element vertically and horizontally and appears partially beneath the neighboring text element.

A graphic of an arrow.
Arrow Graphic

Arrow Graphic

UI Item 04 - Summary

I find it interesting that this graphic partially overlaps with the neightboring text element and overhangs the edge of the containing element.

UI Item 04 - Techniques

This graphic has its CSS position property set to absolute and its CSS right and bottom properties set up so that the graphic partially overlaps with the neightboring text element and overhangs the edge of the containing element.