Website​ is the identity card of your business. His appearance and user experience that it provides can be crucial to its success, and therefore to the success of your business. See below for tips on how to further decorate the content on your site.

How to further decorate the content

In addition to the usual color of the letters/font, color gradient/color transition ( color gradient ), shadow ( text shadow ), contour ( contour ), transparency ( transparency ) can also be used, this also applies to other elements of the page.

Why use CSS and not regular images? There are several reasons why it is much more rational to use CSS than plain images.

Image size ( File size )

Image size is usually the biggest problem with websites , and usually one or two images take up more space on the page than the entire html/css/js code of the page combined, so this negatively affects download and rendering times.

Maintenance​​

Most developers don’t use or don’t know how to use Photoshop or another image editing program. On the other hand, designers are doing other things and don’t have time to help with changes. It also takes much longer to change an image than to replace a few lines html/css file.

Performance​​

The biggest advantage of CSS compared to images is performance. Every time someone sends a request/query ( HTTP Request) i.e. open one web page, clicks on a sublink, refreshes the page, etc., each request starts multiple processes (files need to be compared, header information needs to be checked, dates changed, etc.), which further slows down the rendering of the site. You will also likely need to create additional images for small devices, as they are of different proportions and the text will likely not be visible. All that would be avoided by using it html/css .

Advantages of images

The problem with CSS is that you have to pay attention to the appearance of all browsers and devices .

There are situations when it is easier to use a picture and solve such problems.

Text decoration

In addition to the plain color of the letters, with a little effort, the letters can be made to be more beautiful and stand out.
Of course, we have to make sure that they are not too kitsch.

Transparency ( opacity ):

If you want to use transparent text use the “ opacity ” property:

p {

opacity: 0.5;

}

the range is between 0.0 and 1.0, as a percentage value between 0% and 100%

0.0 = completely transparent

1.0 = maximum visible, the color will be strongest

Opacity can also be used on other elements, not only on text.

Color using RGB or RGBA values

The RGBA color value represents the Red, Green, Blue and Alpha light sources.

Red, Green, Blue and Alpha (Red, Green, Blue and Alpha)

Defines the intensity of the red, green, and blue colors as an integer between 0 and 255.

As with Opacity , Alpha ( Alpha – transparency) the range is between 0.0 and 1.0. A percentage value between 0% (fully transparent) and 100% (solid color).

p {

color: rgba(127, 255, 127, 0.3);

}

p {
/*red color*/

color: rgb(255, 0, 0);

}

Shadow and Contour:

p {

text-shadow: 3px -2px 2px #CE5937;

}

1. parameter 3px, moving the shadow three pixels horizontally to the left of the text.
2. parameter -2px moves the shadow two pixels horizontally up relative to the text.
3. parameter is the opacity of the shadow, when it is 0px the shadow is pure and more like an outline without blur,

the higher the number, the more opaque and transparent the shadow will be.

4. parameter is the shadow color displayed as hex color

You can see more about the topic at the following link : https://www.w3schools.com/colors/colors_hexadecimal.asp

Text gradient:

p {

background: linear-gradient(#eee, #333);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

background: linear-gradient(#eee, #333);

First we set the background color in this case “linear gradient”.

there is also a radial gradient (circular color transition from the center to the outside)

An example of a gradient with three colors

Linear-gradient (45deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
1. The parameter is the color angle, when the angle is 0°, the gradient line is horizontal, when the angle is 90°, the line is vertical.
2,3 and 4. The parameter is color + start of color on the line, say 50% means that the color starts from the middle of the line (more than three colors can be used)

Trial site: https://cssgradient.io

Then we use the parameter background-clip: text;

Which means that the background color which is a gradient will be cut along the contour of our text.

More about background color clipping can be found here.

And the third thing we set is that the color of the text is transparent, so that only the background color is visible.

-webkit-text-fill-color: transparent;

or

-webkit-text-fill-color: rgba(0, 0, 0, 0);

-webkit-, -moz-, -khtml-, -ms-, -o-

these are “vendor” prefixes, which we will talk about another time

more about them at https://css-tricks.com/how-to-deal-with-vendor-prefixes/

You can find an online generator for background color, transitions and the like here .

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.