Web Interface Design

Learn How to Build Responsive Websites with HTML, CSS, and Media Queries

Back to classes

Choose a class
  • 2.2Filters

    One of the awesome new features in CSS3 are the filters that we were also previously familiar with only from image-processing programs. Their use is by no means restricted to handling <img> images, but they can also be applied to any HTML elements. However, they are currently (July 2016) not supported yet by Internet Explorer,2 and only supported by Chrome with a -webkit Prefix.


    2 Internet Explorer versions 4 to 9 implemented a proprietary, non-standard filter filter property with a totally different syntax.

    The following syntax is used (with the vendor prefix for Chrome and older versions of Safari):

    For instance, the code for a 5px blur is:

    The following filters are available:

    filters Description Parament/unit of measure
    blur(radius) Blur Measures of length (px, em, etc.),
    0 = no blur
    brightness(amount) Applies a linear multiplier to input image, making it appear more or less bright. Decimal amounts (1 means 100% = no change; amounts < 1 reduce the brightness, higher amounts increase it)
    contrast(value) Adjusts the contrast of the input. Decimal amount (1 means 100% = no change; amounts < 1 reduce the contrast, higher amounts increase it)
    drop-shadow(x, y, softness, color) Drop-shadow same parameters as box-shadow, but displayed differently (cf. section 2.2.1)
    grayscale(amount) Converts the input image to grayscale. Decimal values (1 means 100% = full grayscale reduction; 0 = no change)
    hue-rotate(angle) Hue rotation Degree in the color circle;
    0deg = no change
    invert(amount) Inverts the samples in the input image. Decimal amounts (1 means 100% = full inversion; 0 = no change)
    opacity(amount) Applies transparency to the samples in the input image. Decimal amounts (1 means 100% = completely opaque; 0 = completely transparent)
    saturate(amount) Saturates the input image. Decimal amounts (1 means 100% = no change; amounts < 1 reduce the saturation, higher amounts increase it)
    sepia(amount) Converts the input image to sepia. Decimal amounts (1 means 100% = full conversion to sepia; 0 = no change)

    Table 2.3 CSS filter functions

    2.2.1Differences with other properties

    The filters opacity( ) and drop-shadow( ) appear, at first glance, to be identical to the familiar properties opacity and box-shadow. However, the difference between them is that some browsers use hardware acceleration for the filters, which gives a huge boost to their performance.

    But the drop-shadow( ) filter differs in another way from the box-shadow property: it is applied to all transparent areas of an element, including the text.

    The exercise files can be found in the support material under
    css3_advanced/filters.html and
    css3_advanced/styles/filters.css.

    Walkthrough: 

    1. Open the files filters.css and filters.html.

      The HTML file contains an article element with the class cite, along with some text. In CSS this element has a box-shadow added to it. As you can see, this only affects the borders of the element, which looks particularly unattractive with the dashed outline.

    2. Now replace the box-shadow instruction with the following specification:

      Now all the non-transparent parts of the element cast a shadow:

    Trying other filters

    Exercise 4: Playing with Filters

    In the files filters.css and filters.html you can now try out the various filters from Table 2.3 on the image featuring the .image class.

    2.2.2Variation: backdrop-filter

    A variation on filters, but which are supported at the moment (July 2016) only by Safari, are backdrop-filters. They do not affect the element itself, but all the elements that are within the borders of the element behind it. This allows effects to be achieved that are familiar, for instance, from iOS and macOS:

    Fig. 11 ‘Backdrop blur’ in iOS 10: The background image shows strongly blurred through the white boxes (photo: Apple)

    The following syntax is used (with the vendor prefix for Safari):

    e. g.

    The backdrop-filters have the same filter functions available as listed in Table 2.3.

    The exercise files can be found in the support material under
    css3_advanced/backdrop_filters.html and
    css3_advanced/styles/backdrop_filters.css.

    Walkthrough: Frosted Glass Effect

    1. Open the files backdrop_filters.css and backdrop_filters.html.

      The HTML file contains a div with the image_with_text class. In CSS, a background image was assigned to this. This div contains a second div with the class pane, which was positioned absolutely. This contains some text. We now want to give this pane a frosted glass effect.

      Fig. 12 The finished frosted glass effect with a backdrop-filter
    2. We first of all require the semi-transparent background. (This works in all browsers.) Enter the following input in the selector .pane for instance,

    3. This is now followed by the backdrop-filter:

      You are now done.

    As already mentioned, backdrop-filters operate only in Safari at the moment. If you are not keen to wait for other browsers to be supported, you can already now simulate the effect across browsers using the “normal” filters.

    Simulating a backdrop blur with normal CSS filters

    This is definitely a rather tricky operation: We need to use the pseudo-elements ::before and ::afterto do this. Let us remind ourselves that you can use these pseudo-elements to “attach” any text and graphics you want to HTML elements. You can style these “attachments” using CSS just as if they were real HTML elements.

    Walkthrough: 

    1. Begin by removing the background-color and backdrop-filter properties again from the selector .pane, or comment them out.

    2. Then add the following properties:

      This places the background image of the wrapping div also in the div.pane, and even in the same position and at the same size. Since the div.pane was indented by 2rem, the background image must be shifted outward accordingly by -2rem in this case. No change should now be seen in the browser.

    3. We will now attach the required elements. First of all, they both receive the same properties:

      Inserting content:"" means that an empty string is added, i.e. an element without any content. By inserting position:absolute and a negative z-index, both pseudo-elements will be placed behind the div.pane.3 The values for top, left, right and bottom ensure that the pseudo-elements are always the same size as the div. The border-radius should also adjust automatically.


      3 It is a requirement for the div.pane itself also to have a (positive) z-index.

      No change should now be seen either in the browser.

    4. The next step involves again inserting the semi-transparent background, but this time not directly in the selector .panebut in the ::after element attached. Otherwise, the background color would not be visible later on. Insert another selector, this time only for ::after:

    5. Lastly, the filter is added. This is inserted in the selector ::before:

      This element also contains a “copy” of the background image, but it is blurred along with the element.

    ×

    Responsive Web Design

0

Demo mode: Learning progress will not be saved.

Register to save your learning progress