Einführung
Sitely nutzen
Elemente
Anleitung
Frosted glass and translucent effects have become quite popular since the advent of animation in web design. These effects, when combined with animation and parallax-type features add depth to pages, giving them an almost 3D quality. Below we highlight some of the effects that can be achieved by using a combination of colour, opacity and background filters. We’ve shown the effects by overlaying boxes styled with different degrees of opacity, colour and filter effects onto to ‘fixed-in-window’ images. They would work equally well if the boxes were animated elements gliding over other page content as the page is scrolled.
White Fill - 40% Opacity
10x Background Blur
No Fill
20x Background Blur
White Fill - 40% Opacity
10x Background Blur
No Fill
20x Background Blur
White Fill - 40% Opacity
10x Background Blur
No Fill
20x Background Blur
Black Fill - 20%
Opacity
20x Background Blur
Black Fill - 40%
Opacity
20x Background Blur
Black Fill - 20%
Opacity
20x Background Blur
Black Fill - 40%
Opacity
20x Background Blur
Black Fill - 20%
Opacity
20x Background Blur
Black Fill - 40%
Opacity
20x Background Blur
Multiple Fixed-in-Window images
In the example below, several elements were combined into a layout block, each one using the SAME image, and all being fixed in window. The layout block itself has a background image, fixed in window and with a background blur filter applied at 4x. Next, a box was added with an image fill, corner rounding and a white border applied. Again, the image was fixed in window, but this time with no background filter applied. We next added the translucent box to cover about 50% of the outline box. This box has no fill, but has a background blur filter applied at 8x. Finally, the text ‘Frosted’ was added over the translucent box. The text has the ‘Clip to text’ effect applied, using the same image as all the other elements. Again, the image was set to be fixed in window. The white text is just a normal text box added over the top of the whole layout block. The end result has the effect of one image with different degrees of blurriness applied, whilst the word ‘Frosted’ has the appearance of being etched out of a frosted glass panel, allowing the underlying image to viewed in full sharpness.
Frosted
glass
effect
So, by using a little imagination and a splash of experimentation, you can create some nice effects to help add some interest to your page.
Bitte melden Sie uns Mängel, die Ihnen in dieser Dokumentation auffallen, damit wir sie schnellstmöglich beheben können!
Aktualisiert für Sitely 5.6
This website makes use of cookies.
Please see our privacy policy for details.
It’s Okay
Deny