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
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.
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 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.
Following this, background-blend-mode has been set to soft-lightallowing us to soften the image.
3. CSS clip path
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!
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.
4. CSS 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
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
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.
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.
3. CSS width and height
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 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.
5. CSS Text Transform
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.
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.
Are you using these key CSS methods for fast workflow and beautiful web design?
About the Author