3. Reflection Effects
Reflection or mirror effects are among the most-used effects in Web 2.0
designs. They can be used on any content, including images. Remember,
though, that we are designing for mobile screens and we don’t want to
waste too much space.
Warning:
The reflection image doesn’t change the layout or the size of
the element’s original content box. It is only part of the container’s
overflow.
To create a reflection effect in Safari on iOS, use the -webkit-box-reflect attribute with the
following syntax:
-webkit-box-reflect: direction offset <mask-box-image>;
The direction can be above, below, left, or right; the offset
is the distance (in px or %) from the
original element at which the reflection should appear; and the optional
mask-box-image is generally a gradient
function that will work as a mask for the reflection image. If no mask
image is defined, a normal mirror will be used.
The type of reflection effect typically seen on Web 2.0 websites
has the following attribute values:
-webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
4. Masked ImagesAs of iOS 3.0, we have access to a typical graphic design
feature that has been missing for years in web development: masked
images. We can use a masked image to apply any regular or irregular crop
to the original image or, if using an alpha mask (or even a gradient
function), to create a really nice visual effect over any image, like a
fuzzy border. The mask properties are analogous to the background
properties. For applying a mask, we have a shortcut property, -webkit-mask, and specific properties for the
position.
The syntax of the shortcut version with all the optional
parameters is:
-webkit-mask: attachment, clip, origin, image, repeat, composite, box-image;
Of course, we also have access to all the properties separately,
like -webkit-mask-attachment,
-webkit-mask-clip, and so on. There
are a lot of possibilities, but typically an image (alpha or not, PNG or
SVG) or a gradient function is used as the image value. For
example:<img src="london.png" style="-webkit-mask-image:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),
to(rgba(0,0,0,0))); " />
<img src="london.png" style="-webkit-mask-image: url(old_picture_mask.png)" />
