CSS, CSS, and more CSS. I liked the project carried out during the CSS training so much that I decided to use it to create a page with information and my photos from erroneous rocks. This is an idea for now because the training project is not over yet, but as soon as the project is finished, I will be happy to replace the content on the ready template.
Returning to the training, did you know that the dev tools goggle allows you to check what values in px have been converted from the relative units stored in the CSS code?
For example, in your CSS code, you used the 1.5rem unit and you wonder how many pixels, for a given screen resolution, the browser converted 1.5rem.
To do this, you need to run the developer tools in Google Chrome Ctrl + Shift + I, and in the Elements tab on the right, a window with additional tabs will appear, including the Computed tab with parameter values converted into pixels. When can it be used?
For example, to check how the page behaves at a given screen resolution and whether the gaps are as planned or as specified in the page design.
CSS gradient used on text. Why not?
Another interesting effect that can be achieved with CSS is the ability to create a color gradient over the text. It looks amazing and looks great on modern websites. This effect can be achieved with four lines of CSS code:
display: inline-block;
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
-webkit-background-clip: text;
background-clip: text;
background-image – defines the direction in which the gradient should be directed and the color of the beginning of the end. In the above case, $ color-primary-light and $ color-primary-dark are the colors defined as variables in SASS.
background-clip – “crops” the gradient background only to the letters of the text, thanks to which we obtain a color gradient on the text.
The last element of WOW this week is a set of icons that are treated as text by the browser, so it is possible to edit them widely, including obtaining a color gradient on the icon that I wrote about above. All icons are available in the Github repository:
https://github.com/linea-io/Linea-Iconset
This week I spent 11 hours programming, a bit more than planned. It makes me happy, but I’m even happier with all the magic tricks that I learn in the CSS course I am overhauling. I hope to start working on the “Błędne Skały” project next week.
