CSS deep dive

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.

Screen Shot to show css calculations in browser

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:


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.

Share the Post:
Cover of book AI in Project Management

What's inside

Explore the transformative power of AI in project management with Krzysztof Nyrek’s “AI in Project Management.” This essential guide offers in-depth knowledge on automating routine tasks, optimizing resource management, and utilizing AI for risk estimation and decision-making. Learn how to implement AI tools for improved project efficiency, cost reduction, and enhanced quality management. Ideal for project managers and IT professionals, this book provides actionable insights and practical examples to harness AI technology effectively. Enhance your project outcomes and stay ahead in the digital era with this indispensable resource.

Embrace the future of project management with AI-driven solutions that save time, reduce costs, and boost project success.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.