Css style

10 Amazing CSS Tricks to Transform Your Web Layouts

Anyone with experience designing websites, whether you’ve used DIY website builders or created a site from scratch, has probably heard of CSS. This incredibly powerful tool can be used to transform your web layouts, giving you the power to take control of your website and realize your creative vision. But how can you use Cascading Style Sheets to unlock the potential of your next website?

This guide will only detail a range of CSS properties which were all used to create the header which you can see in the image above. You can find this project here on CodePengiving you the chance to try it out for yourself.


CSS Image Manipulation

The first step we need to take to create our header section is to add images to the page. You can use a range of methods to achieve this goal, so we’ve covered the most popular ones, along with some tips to help you manipulate your images.

1. CSS Background Image


css background image site

We want to have a fullscreen background image for our header, and the background-image CSS property is ideal. First, we need to create a container for our image (and the rest of the elements in the header).

We started by adding a div tag with “header” as the class, then we defined its height at 100vh and his width at 100vw; this gives us a box that is exactly the same size as the window. We also added a CSS rule for the body of the page, with its overflow set to hidden and his margins set to 0px.

USE VIDEO OF THE DAY

With the container in place, we can add a background image, and there are three different CSS rules we need to achieve this. The first, background-image, needs a URL to act as the source of the background image, and we used the handy Unsplash catalog for that. We also need to define the bottom size to cover and the background position downbut you may want to experiment with them to get the best results.

2. CSS Background-Blend-Mode


css blend mode image site

CSS blend modes let you mix images and text, much like the blending feature in software like Adobe Photoshop. To make the blending modes work with our background image, we set the background color to semi-transparent white before adding the blending mode we wanted to use.


mix css image

Following this, background-blend-mode has been set to soft-lightallowing us to soften the image.

3. CSS clip path


flexbox image site

For our next trick, we’ll use a rule called clip-path. When using HTML img tags, you can define a path that will hide parts of the images you are working with. You can choose to use general shapes for this, but you can also use an SVG generator app to create a more complex design.

We added a div tag with “flex_image_box” to act as a container for three images, using the CSS display property to turn it into a flexbox (more on that later). Three img tags have been added inside the div tag, with ids defined as “img1”, “img2” and “img3”. Adjusting the width of each image at 600pxwe can leave the height property blank without changing the aspect ratio of the images; now it’s time to add our clip-path!


flexbox triangles website

To create our three triangles, we used the same polygon clip path for img1 and img3, with a reversed version in place for img2. We also had to play around with the positioning of our flex-box container to ensure the images were in the correct position on the screen. Our clip path rules can be seen below.


flexbox triangles css

4. CSS Opacity


css image opacity

Opacity defines the level of transparency of any HTML element. We fix the opacity of our images at 90%making them slightly opaque so that they blend well with the background.

CSS responsive text and images

We’ve explored the art of creating great-looking responsive websites using HTML, CSS, and JavaScript in the past, but we can build on the principles you already understand to better understand the skills you need to master the layout of your website.

1. Reactive/relative CSS units

CSS units such as px, pt, and cm are absolute units, which means that a web browser will display them at the same size regardless of the width and height of the window they occupy. The relative units are different, producing heights and lengths relative to other measurements, such as the browser window or a parent element. The relative units below are commonly used and essential for responsive web design.

  • em: This unit is generally used with text. It is relative to the font size of the current element, so 4em is four times larger than the defined font size.
  • Rem: Like em, rem is relative to the font size of an element; the root element in a hierarchy is used to set the output size.
  • vw/vh: Determine width and height based on viewport size, 2vw equals 2% of browser width while 2vh equals 2% of browser height.
  • %: The % unit calculates dimensions based on the size of an element’s parent.
  • vmin/vmax: These units produce dimensions relative to the smallest or largest 1% of the viewport dimensions, providing elements with the means to respond directly to the size of a browser window.

2. CSS font size


css font size site

This property can be set using default values ​​predefined either by the website’s main style sheet or by the user’s web browser. These values ​​include medium, xx-small, x-small, small, large, x-large, and xx-large, with medium being set as the default for any text that does not have a font size CSS tag. Alternatively, relative values ​​can be used when using the CSS font-size property, and this is the method we used to ensure that the text in our header section is sized appropriately. for any viewport.


font size css html

We added two header tags to our HTML code, which allow us to add text to the project. One is a large main header, while the other is a subheader, and they both use relative units.


css font size css

Related: How to Change HTML Font Size in CSS

3. CSS width and height


css width height css

All HTML elements come with height and width dimensions, whether it is div, img, a or any other type of tag. These dimensions can be automatically set to default values, but they can also be dictated by web designers using the appropriate rules; we used both of these methods for this header.

Reactive units were used for the background image, with height set to 100vh and width set to 100vw, but we also used absolute units for our three images. It’s worth exploring and experimenting with CSS width and height units, with options like “inherit” providing the means to adopt the dimensions of a parent element, and there are plenty of other tricks like this you can use.


4. CSS Mix-Blend Mode


css blend mode overlay site

CSS mix-blend-mode is very similar to background-blend mode, except that it can be applied to any element, rather than being exclusively for backgrounds. We used this property on our H1 topic to add texture and make the project more interesting. We started by defining our text color to blackfollowed by setting the mix-blend mode for layering.

It’s worth exploring the different blending options you have when dealing with text, as backgrounds with unique color profiles will respond differently to the settings you use.


css blending mode css overlay

5. CSS Text Transform


css text transformation site

CSS text-transform is a smart property that allows designers to change the case of text on their websites without affecting how search engines read it. For example, we have set text-transform to uppercase on our H1 header, making every letter capitalized no matter how we enter it in our HTML code.


text transformation css

CSS overflow properties

HTML can often look like a rigid framework that defines strict boundaries for the content of your websites, but this is not the case when overflow properties are used.

CSS overflow and text overflow

Overflow and text-overflow are very similar CSS properties. Overflow can be applied to any element, giving you control over what content can escape its bounds. Text-overflow is similar, although it only applies to text and gives you the ability to add additional parameters to your rules. We only used overflow for this project (we used it to restrict the body size of our page), but you can read more about text overflow on the W3Schools website.

Using CSS for Your Web Layouts

CSS is an incredibly powerful tool, allowing web designers and developers to create stunning websites using code. We encourage you to take a look at the CodePen we provided at the start of the article, as it will give you an even deeper insight into how all of these tools work. Plus, you can play around with the header we created to add your own finishing touches.


css tips and tricks
8 Essential CSS Tips and Tricks Every Developer Should Know

Are you using these key CSS methods for fast workflow and beautiful web design?

Read more


About the Author