HTML and CSS Reference
In-Depth Information
In Figure 2-25, you can see the full image on the left. On the right, the image is clipped.
Only the section of the source image as specified in the
rect
function assigned to the clip
property is visible. The following is the full code:
<html>
<head>
<style>
.clipper{
position: fixed;
left: 325px;
clip: rect(25px, 100px, 100px, 25px);
}
</style>
</head>
<body>
<img src="flowers.jpg" style="height: 200px;width: 300px;"/>
<img class="clipper" src="flowers.jpg" style="height: 200px;width:300px;"/>
</body>
</html>
NOTE
UNDERSTANDING THE
CLIP
PROPERTY
The
clip
property works only on elements whose position is set as fixed or absolute.
The browser provides a coordinate system for how to lay out elements on a page. The default
behavior is essentially a layout where the elements, without any other position attributes
specified, will simply lay out on the page in a default flow. In this context, the base coordinate
is the top left corner of the window which can be understood as (x,y) coordinate (0,0). This is
called static layout. CSS provides some mechanisms where you can override the default layout
of the page. This is achieved by specifying the desired position behavior with the
position
property. Once the
position
property is set, other CSS properties such as
top
,
left
,
bottom
, or
right
are set. In a static layout, the elements will not respond to the
top
,
left
,
bottom
, or
right
properties. The positioning type must be specified.
EXAM TIP
For the exam, be sure you understand that each HTML element is a box and each box be-
gins its own new coordinate system. If you place a
div
element on the page at (50px,50px),
any elements placed inside it are not placed at a coordinate starting at (50px, 50px) just
because that is where the
div
element is. The child elements inside the
div
start at coor-
dinate (0,0), which is the top left corner of the
div
itself. All child elements are positioned
relative to the container in which they are placed.
The position property allows you to specify one of three different options:
fixed
,
relative
,
or
absolute
. With fixed positioning, elements are placed relative to the browser window. With
Search WWH ::
Custom Search