The shadows in question are created through properties box-shadow And text-shadow. The following is an example of creating a basic block shadow:

Aside ( box-shadow: 8px 8px 10px gray; )

The first two values ​​of the box-shadow property set the horizontal and vertical offsets of the shadow from original object. Positive values ​​move the shadow down and to the right, negative values ​​move the shadow up and left. The next value determines the size of the blur (blur, in in this example 10 pixels), which increases the blurriness of the shadow. Last value determines the color of the shadow. If there is any content underneath the block, consider using the rgba() function to make the shadow semi-transparent.

For more fine tuning You can add two values ​​to the box-shadow property. To set the width (spread) of a shadow - a subproperty that expands the shadow, thickening its solid part between blurred edges, adding a value between the blur and color values:

Aside ( box-shadow: 8px 8px 10px 5px gray; )

And to create a shadow that reflects not outward, but into the element, the value is added at the end of the list of values inset. Best effect achieved when the shadow is placed directly on top of the element, without horizontal or vertical offset:

Aside ( box-shadow: 0px 0px 20px lime inset; )

The text-shadow property requires a similar set of values, but in a different order. The color is specified first, followed by the horizontal and vertical offsets, and then the blur:

H1 ( text-shadow: gray 10px 10px 7px; )

Gradients

Gradients are transitions of colors that can create wide range effects, from subtle shadows under the menu bar to psychedelically colored buttons.

Many web pages simulate gradients background images. But CSS3 technology allows the web developer to define the required gradient that will be rendered by the browser. The advantage of this approach is that it reduces the number of image files that need to be processed and provides the ability to create gradients that resize seamlessly to fill any space.

There are no special properties in CSS for creating gradients. Instead, the gradient function is used to set the background property. But be sure to set this property to a solid color first to create a fallback fill for browsers that don't support gradients (including Internet Explorer, which supports gradients only starting from IE 10).

There are four gradient functions, all of which require browser developer prefixes. In this section we will look at examples of gradients for Chrome browser(for which the prefix -webkit- is used). For support Firefox browsers and Opera needs to add exactly the same gradient values, but with the prefixes -moz- and -o-.

Let's look at the function first linear-gradient(). The following is one of its simplest forms, coloring the block white at the top, which fades to blue at the bottom:

Aside ( background: -webkit-linear-gradient(top, white, blue); )

Replacing the top value with left gives a linear horizontal gradient. And by specifying the corner of the block to start the gradient, we get a diagonal transition:

Aside ( background: -webkit-linear-gradient(top left, white, blue); )

You can create a multicolor gradient by providing a list of colors. For example, the following rule creates a three-color horizontal gradient:

Aside ( background: -webkit-linear-gradient(left, red, orange, yellow); )

Finally, instead of distributing the gradient colors evenly, you can specify the start position of each color by gradient stops, stretching or compressing the stripes or shifting them in one direction or another.

Gradient Transparency in Adobe Photoshop a special technique used when soft agreement between two or more different images. In this video tutorial we will look at just one of the applications of this technology. Quite often we need "stitch" two images between themselves, but in such a way that the “seam” is not visible and that the resulting image is perceived as a single logical whole. Often it's not even different pictures, and copies of the same image, processed different ways. In particular, we'll look at a situation where we need to make part of an image black and white.

In fact, we need nothing more than setting up selective transparency: imagine this picture. We take two completely identical images, only one is color and the other is black and white. Overlay the black and white image on top of the color image and make the left and right edges of the top image transparent.

IN real life we could take scissors and cut some of it off black and white image left and right, but we could do it sharp border and the smooth flow effect would not be achieved. IN Adobe program Photoshop has the ability to use gradient transparency, which allows you to make a gradual smooth change in the transparency of the image layer. This is exactly what we need.

Download the source image to practice the exercise:

Video Tutorial: Gradient Transparency in Adobe Photoshop

To create gradients in Photoshop, use the Gradient Tool. In Photoshop you have the opportunity to create different types of gradients: “Linear gradient”, “Radial gradient”, “Angle gradient”, “Reflected gradient”, “Diamond gradient” (to select the gradient you need, use the corresponding buttons in the options bar, icons with a sample gradient view). Most often, it is “Linear gradient” that is used; the fill area is uniformly painted with the colors included in the gradient, linearly in the direction you choose.

The gradient can include all the possible colors you use, including using a transparent gradient area instead of a color. To create a gradient from your chosen color to transparent, select the Gradient Tool. In the Options Bar, click on the gradient that is currently selected.

In the “Gradient Editor” dialog box that opens, create a new gradient in the “Name” field

Enter a name for your gradient and click on the “New” button. In the “Gradient Type” field, select “Solid”, and in “Smoothness” set it to 100%. Below “Smoothness” you will see the future gradient with color selection sliders at the top and bottom.

The upper sliders are responsible for the percentage of transparency of a particular color, the lower ones for the color of the gradient. Having selected colors in the lower sliders, you can adjust the percentage of their opacity by changing the “Opacity” and “Location” parameters in the corresponding upper sliders.

Click on the upper left slider and in its parameters in the “Stops” field, set 0% for “Opacity” and 0% for “Location”.

Go to the bottom left slider (also just by clicking on it). In these “Stops” parameters, you also adjust “Location”, setting it to 0%, and select a color in the “Color” item; the transparent color should correspond to white.

Now move to the right side of the sliders. In the parameters of the lower right slider, select the color you need, in the “Location” item set it to 100%.

In the parameters of the top right slider, set “Opacity” and “Location” to 100%.

The gradient is ready and you can apply it. Click with the Gradient Tool on the part of the image where you want to start your gradient and drag the mouse cursor to the point where you want to continue it. If you are not working on a selected area, the gradient will be applied to the entire area of ​​the image.

The Gradient tool allows you to draw several types of gradients. Also, using gradients in transparency mode, it is possible to achieve the effect of “fading” or “merging” two images into one.

All gradient types can be selected in the gradient section at:

Below are examples of how each type of gradient affects an image. On the left are the images after processing the gradient in Color mode with two opaque colors (and an alpha value of 255). On the right are images after processing with a gradient in Transparency mode:

Circular gradient in color and transparent modes

Creating a Gradient
To draw a gradient, simply click and hold the mouse button and move the cursor across the canvas, just as if you were drawing a line. The gradient will expand according to how you move the mouse.

After you release the mouse button, the gradient can be adjusted using it control points or “knots” in the form of small circles. Right-clicking on such a “node” will change the primary and secondary colors of the gradient. If you move one of the "nodes" while holding down both mouse buttons, you can move the entire gradient area.

Color mode
The default Color mode affects everything color channels and alpha channel. When using a gradient in this mode, the primary color will gradually fade into the secondary color. If you use the right mouse button instead of the left mouse button, the primary and secondary colors change places. In the examples above, the gradient used the default primary and secondary colors (primary - black, secondary - white).

Transparency mode
The transparent gradient mode can be used to gradually fade out part of an image. This mode can also be useful for “blending” two images. To enable this mode, move the corresponding control element to the desired position:

This type of gradient only affects the alpha channel of the current layer. The gradient will smoothly change the alpha value of the primary color before inverting the alpha value of the secondary color. Using right button mouse, the gradient will smoothly change the alpha value from the inversion of the alpha value of the secondary color to the alpha value of the primary color. Simply put, you can consider transparent gradient, as a smooth transition from full opacity (with an alpha value of 255) to full transparency (with an alpha value of 0).

To create a "fade" or "blend" between two images, place them on different layers, and then apply a gradient to the top layer using Transparency mode.

As an example, we use two images that were given in the description. Smooth transition You can easily create one image into another by “stretching” a transparent gradient from the left to the right edge of the image: