Masking
From FHTML
Contents |
1 What's the same as html?
- FluidHtml supports lots of different options for the
clipproperty. But as a baseline, we do what html does:-
auto: No clipping will be applied. This is the default value. -
rect (top, right, bottom, left): Clips an element to the size of the box described. FluidHtml will also acceptrect(with no dimensions), implying that the box will be clipped to its actual size. Conceptually, this implementation overlaps with html'soverflowproperty, which is also supported.
-
1.1 clip
<style type="text/css">
.clipped {
x:center;
y:center|-100;
width:100px;
height:100px;
background:#F4F4F4;
clip:rect;
}
.unclipped {
x:center;
y:center|100;
width:100px;
height:100px;
background:#F4F4F4;
clip:auto;
}
.childIsWider {
y:center;
width:200px;
height:40px;
background:#FF0000;
}
</style>
<div style="box-orient:none" >
<div class="clipped">
<div class="childIsWider" />
</div>
<div class="unclipped">
<div class="childIsWider" />
</div>
</div>
.clipped {
x:center;
y:center|-100;
width:100px;
height:100px;
background:#F4F4F4;
clip:rect;
}
.unclipped {
x:center;
y:center|100;
width:100px;
height:100px;
background:#F4F4F4;
clip:auto;
}
.childIsWider {
y:center;
width:200px;
height:40px;
background:#FF0000;
}
</style>
<div style="box-orient:none" >
<div class="clipped">
<div class="childIsWider" />
</div>
<div class="unclipped">
<div class="childIsWider" />
</div>
</div>
1.2 clip:rect(top, right, bottom, left)
<style type="text/css">
.clipped {
x:center;
y:center|-100;
width:100px;
height:100px;
background:#F4F4F4;
clip:rect(10px, 80px, 80px, 10px);
}
.childIsWider {
y:center;
width:200px;
height:40px;
background:#FF0000;
}
</style>
<div style="box-orient:none" >
<div class="clipped">
</div>
</div>
.clipped {
x:center;
y:center|-100;
width:100px;
height:100px;
background:#F4F4F4;
clip:rect(10px, 80px, 80px, 10px);
}
.childIsWider {
y:center;
width:200px;
height:40px;
background:#FF0000;
}
</style>
<div style="box-orient:none" >
<div class="clipped">
</div>
</div>
2 What's extra?
2.1 clip
--MORE TO COME!