Create a beautiful abstract portrait (part 3)
5. Continue to change the blue elements Select the Lasso tool and create some arbitrary shapes on top of the blue elements. To add them to the selection, hold the…

Continue reading →

Create a roughness logo in Photoshop
Stage 1: Logo Let's start by creating a logo in Photoshop. Here is its vector version made in Illustrator. You can copy it: Create a new Photoshop document. The background…

Continue reading →

Graphic programs for leisure and professional activities (part 1)
What is a graphical editor? The “graphical editor” program is software that provides the user with three main functions: creature; editing; viewing graphic files. Digital images are divided into three…

Continue reading →

Blur up technique or blur background technique on boot (part 2)

The good thing is that the specifications for CSS and SVG are common, that is, we can use not only pre-prepared filters, but also create our own filters in SVG, and then write them in CSS:

.myThing {
filter: url (myfilter.svg # myCustomFilter);
}
The same filters are available when using backdrop-filter.

Finally, the filter () function. The idea is to bring all the specified image links in CSS through a set of filters. And we will embed our tiny header image using base64 dataURI and run it through the blur () filter:

.post-header {

background-image: filter (url (data: image / jpeg; base64, / 9j / 4AAQ … [truncated] …), blur (20px));
}
The filter property is supported in recent versions of all browsers except IE, but none of them, with the exception of WebKit, has implemented the specification of the filter () function.

When I talk about WebKit, I mean builds of WebKit browsers other than Safari. The filter () function works in iOS9, if you add the vendor prefix – webkit-filter (), but this was not officially reported anywhere.

The reason for this lies in the fact that the browser has a terrible bug with the background-size property: the original image does not change in size, but the one passing through the filter changes. This bug disrupts the functionality of background images, especially when blurring them. It was fixed after the release of Safari 9, so I assume that they did not want to declare this property.

But what can we do with the faulty filter () function? You can set a normal background while the image loads in browsers, where this function does not work. But if JS cannot load, then the background will not load.

But we can use the filter () function as an additional tool for animating the transition image (from blurry to clear) instead of applying the filter function to the original image using SVG.

Recreating a blur filter using SVG
There is an SVG equivalent to the blur () filter in the specification, so we can redo the blur effect in SVG with a few tricks:

When using Gaussian blur, the edges of the image become slightly transparent. We can adjust this by adding the feComponentTransfer filter. This will allow you to manipulate each color channel of the original image (including the alpha channel). This option uses the feFuncA element, which replaces any value between 0 and 1 in the alpha channel with 1, so that the image becomes opaque;
The color-interplator-filters attribute of the <filter> element must be set to sRGB. SVG filters use linearRGB color space by default, and CSS works in sRGB. In most browsers, color correction works correctly, but in Safari / WebKit all colors appear faded if this value is not set;
The filterUnits attribute is set to userSpaceOnUse. This means that the coordinates and parameters (such as stdDeviation for blurring) act on certain pixels of the image we want to blur.
As a result, we get the following SVG code:

<filter id = “blur” filterUnits = “userSpaceOnUse” color-interpolation-filters = “sRGB”>
<feGaussianBlur stdDeviation = “20” edgeMode = “duplicate” />
<feComponentTransfer>
<feFuncA type = “discrete” tableValues ​​= “1 1” />
</feComponentTransfer>
</filter>
The filter property uses its own url () function, in which you can specify the link or encoded address of the SVG filter. So how do you apply a filter to the contents of the background-image: url (…) property?

To begin with, SVG files can link to other images, and we can apply filters to these images in the SVG code itself. The problem is that SVG background images cannot be used by external resources. But we can use base64 to encode the image inside SVG.

This is not possible with large images, but with small ones it’s real. The SVG code will look like this:

<svg xmlns = “http://www.w3.org/2000/svg”
xmlns: xlink = “http://www.w3.org/1999/xlink”
width = “1500” height = “823”
viewBox = “0 0 1500 823”>
<filter id = “blur” filterUnits = “userSpaceOnUse” color-interpolation-filters = “sRGB”>
<feGaussianBlur stdDeviation = “20 20” edgeMode = “duplicate” />
<feComponentTransfer>
<feFuncA type = “discrete” tableValues ​​= “1 1” />
</feComponentTransfer>
</filter>
<image filter = “url (#blur)”
xlink: href = “data: image / jpeg; base64, / 9j / 4AAQSkZJ … [truncated] …”
x = “0” y = “0”
height = “100%” width = “100%” />
</svg>
Another drawback compared to using the filter () function for a bitmap is that you need to manually set the dimensions of the SVG for it to work correctly with the background image. SVG itself has viewBox options to maintain the aspect ratio of the image, and the width and height properties are set to appropriate values ​​to ensure that the image is displayed by other browsers. Finally, the image element is set to cover the entire SVG canvas.

Blur up technique or blur background technique on boot (part 3)
Now we can use this file as a background image to the site header, and it will look something like this: To avoid additional queries, we will put the SVG…

...

Create a roughness logo in Photoshop
Stage 1: Logo Let's start by creating a logo in Photoshop. Here is its vector version made in Illustrator. You can copy it: Create a new Photoshop document. The background…

...

How to create bright, colorful, juicy 3D in a summer way - text (part 2)
5. Create materials: Add a convex texture Step 1 Choose for the first letter in the tabs “Material of the front bulge”, click on the icon of the folder “Relief”…

...

Create a beautiful abstract portrait (part 3)
5. Continue to change the blue elements Select the Lasso tool and create some arbitrary shapes on top of the blue elements. To add them to the selection, hold the…

...