While these CSS3 effects are "responsive" in nature, they contain properties that are best rendered and viewed on non-mobile devices.
Frosted Glass Effect
The goal here is to create a more elegant, transparent image overlay that allows for readable text to be placed inside.
To achieve this goal, we use HSLA (Hue, Saturation, Luminosity, Alpha) to create a background for the overlay. We give the container and the overlay's pseudo, before element the background image we want to use. Next, we blur the overlay's before element and give the overlay's before element a negative margin to ensure that the blur stays within the bounding div.
"Digital design is like painting, except the paint never dries."
<p>"Digital design is like painting, except the paint never dries."</p>
<span class="cite">-Neville Brody</span>
Desaturated images with a tint can be a really unique and creative way to style a group of images and create a unique feel within a website. The goal here is to use CSS filters to do what usually is done in Photoshop or another raster image editing application, which is adding a tint overlay and setting the blend mode to "luminosity".
To achieve this effect, we use an HSL background over the image and set the image's background-blend-mode to luminosity. We also added a hover transition on the background color, which gives the image an overall unique effect.
Until recently, creating a diamond "cutout" effect with CSS was nearly impossible. In order to accomplish this, the image had to be edited in Photoshop, which creates problems for restyling the image down the road. The goal with this effect was to create a diamond cutout image that, when hovered over, reverts back to its standard orientation.
To achieve this goal, we used CSS clip-path to create the diamond shape. On hover, we once again used clip-path to change the clipping path back to its standard orientation.