Skip to content

Development site is the ID card of your business. His appearance and user experience which it provides can be crucial to its success, and therefore to the success of your business. Below you will find tips on how to further decorate the content on your site.

 

How to further decorate the content

In addition to plain letter / font color, a color gradient / color transition can also be used (color gradient), shadow (textshadow), contour (contour), transparency (transparency), this also applies to other elements of the page.

Why use CSS instead of plain images? There are several reasons why it is much more rational to use CSS than plain images.

icon when loading content

Image size (File size)

Image size is generally the biggest problem with websites sites, and usually one or two images take up more space on a page than the whole html / css / js code pages together so that it negatively affects download and display times.

Maintenance (Maintenance)

Most developers do not use or do not know how to use Photoshop or another image editing program. On the other hand, designers do other things and do not have time to help with changes. It also takes much longer to change the image than to replace several lines html / css file.

Performance (Performance

The biggest advantage of CSS compared to images is performance. Every time someone sends a request / inquiry (HTTP Request) tj. open one websites page, click on the sublink, refresh the page, etc., each request starts several processes (files must be compared, header information needs to be checked, dates changed, etc.), which further slows down the display of the site. You will also probably need to create additional images for small devices, as they are of different proportions and the text will probably not be visible. All this would be avoided by using it html / css-and.

 

 

Advantages of images

The problem with CSS is that you have to pay attention to the layout of all browsers and devices (brower-a).

There are situations when it is easier to use an image and solve such problems.

 

Text decoration

In addition to the usual color of the letters, with a little effort you can make the letters more beautiful and prominent.
Of course we have to be careful not to be too kitschy.


Providence (opacity):

If you want to use transparent text use “opacity”Property:

 

p {

  opacity: 0.5; 

}

 

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

0.0 = completely transparent

1.0 = maximum visible, the color will be the strongest

Opacity it can be used on other elements as well, not just the text.

Color using RGB or RGBA values

The value of RGBA color represents Red, Green, Blue and Alpha (Red, Green, Blue and Alpha) light sources.

 

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

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

Like the code Opacity-a, Alpha (Alpha - transparency) the range is between 0.0 to 1.0. Percentage value between 0% (completely transparent) and 100% (full 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, move the shadow by three pixels horizontally to the left relative to the text.
  2. parameter -2px moves the shadow by two pixels horizontally upwards relative to the text.
  3. the parameter is the opacity of the shadow, when 0px the shadow is clear and more like a contour without opacity,

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

  1. the parameter is the color of the shadow shown 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's also radial gradient (circular color transition from center to outside)

First gradient-and 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. Parameters are the color + the beginning of the color on the line, say 50% means that the color starts from the middle of the line (more than three colors can be used)

Rehearsal site: https://cssgradient.io

Then we use the background-clip: text parameter;

Which means the background color will be gradient be cut along the contours of our text.

You can find more about cropping the background color 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 the "vendor" prefixes we'll talk about next time

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

 

Online generator for background color, transitions and the like you can find here.

 

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

Made by Aleksandar Đurđević - Senior Web Developer @Digitizer

Sign Up Now.

Follow.

Chat.

Contact Form.

    Name and surname*
    E-mail*
    Do you want to leave a mobile phone number?*
    Mobile phone number
    Company/Organization*
    Website
    What does your company/organization need?
    Do you know what results you want to achieve?*
    What results do you want to achieve?


      Name and surname*
      E-mail*
      Do you want to leave a mobile phone number?*
      Mobile phone number
      Company/Organization*
      Website
      What date would you like to make an appointment?
      What time?


        Name and surname*
        E-mail*
        Do you want to leave a mobile phone number?*
        Mobile phone number
        Company/Organization*
        Website
        Do you know what results you want to achieve?*
        What results do you want to achieve?


        Mobile & Email.

        Links.