This post is also available in: العربية (Arabic)
CSS is Cascading Style Sheets and is used to describe how HTML elements should display. It’s one of the first technology learned by soon-to-be front-end and web developers, and it’s an absolute have-to-know basic.
Although it seems CSS can’t do a lot besides giving our HTML colours, positions, etc., it can also let us create animations and bring some life to our apps and websites. Probably now many of us take care of mastering CSS and learning it so deeply, but it’s totally worth knowing some useful tips and tricks which may help you to create stunning websites!
CSS Tricks For Webpage Layouts
Here are 10 tips and tricks for stunning webpage layouts:
1. CSS Blend Modes
Duotone imagery and colourizer effects are some of the hottest web design trends. They are widely popular across the web. Now you can finally stop creating multiple different coloured versions of your assets and apply the effects directly in the browser.
Using CSS blend modes is not only a great way to unify the look of the content across websites, but it also enables you to set different colour versions of an image, changing only one value in CSS: the colour. There are 15 possible blend mode values, including screen, overlay, lighten and darken.
There are a couple of implementation methods, depending on the type of element you would like to apply the effect to. For example, you can use background-image and background-colour set on the container background-blend-mode: darken, or create an overlay with pseudo-elements (i.e. :before and :after) on the image wrapper to get a colourizing effect.
To achieve a satisfying duotone effect, it’s recommended that you use a high-contrast black and white image. You can do this by applying CSS filters to set greyscale and a high contrast level.
Another cool property is a mix-blend-mode, which lets you blend the content of the element with the content or background of its direct parent. This works especially well on overlapped lettering. You may ask why in this case we don’t just adjust opacity – the answer is simple: we can easily lose the colour vividness using transparency only.
The era of images that can be edited directly in your web browser is coming, but we can’t forget about browser compatibility – support is limited for blend modes at the moment. And for keeping those images safe, make sure you explore your cloud storage options.
Let’s see how mix-blend-mode is implemented.
<div class="blend1">
<img src="monkey.jpg" width="400" height="400">
<img src="sky.jpg" width="400" height="400">
</div>
And applying these modes is very simple.
.blend1 img:first-child {
position: absolute;
mix-blend-mode: soft-light;
}
2. Adding a Mask
Masking tells your browser which asset elements should be visible and is very useful for building creative shapes and layouts. Masking can be done in three ways: using a raster image (eg PNG format with transparency parts), CSS gradients, or SVG elements.
Note that, unlike a typical raster image, SVG can be scaled or transformed without a significant loss of quality.
img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ }It’s important to mention that Firefox supports only the latest one, so we need to use an inline SVG mask element. What if we use a raster image with transparency levels? The transparent parts of the image won’t be seen – so in other words, the opaque fragments will be displayed, hiding other pieces.
Masking is particularly powerful because it enables you to apply the same properties to background images, defining their position, size, and repetition.
One great use case for CSS masking is in articles that combine text and images. Irregular containers and images are very popular in print, but tedious and time-consuming to implement on the web. But thanks to masking, not anymore!
You can also have fun using transparency levels to cut out parts of animated images (eg. GIF files). However, when using these properties, don’t forget about cross-browser support, and add vendor prefixes.
3. Clipping
Another great feature is CSS clipping. A shape’s boundary is called the clip-path (not to be confused with the deprecated clip property), and clipping defines which image area should be visible. Clipping is similar to cutting out a piece of paper – anything outside the path will be hidden, while anything inside the path will be visible.
<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb"
class="myimg" />
.myimg{
width:300px;
height:300px;
object-fit:cover;
border-radius:50%;
}
For example, if a circle function sets a clipping mask over the top of an image, you will only see the part of the image within this circle.
The cool thing is that we can use shape functions and SVG as clip paths, which gives us a lot of opportunities – for instance, we could animate them into morphing shapes.
If you are wondering what the difference between clipping and masking is, then remember that masks are images and clips are only vector paths. It’s worth mentioning that masking will consume more memory, as you’re working with a full image so everything has to be done pixel by pixel.
This is why it’s recommended that you use masks when you want a partial transparency effect; if you want crisp edges, it’s best to use the clip paths.
4. Shape Outside and Shape Inside
Shape-outside and shape-inside to the rescue! Who said that text containers always need to be rectangular? Let’s step out of the box, literally, and discover new forms making our page layouts richer and less boxy. shape-outside and shape-inside properties allow you to wrap your content around custom paths in CSS.
So how does it work? Simply apply the following code to the given floating image or container:
shape-outside: circle(50%); /* content will flow around the circle*/
It is important to note that the float property and the dimensions of the element – height and width – have to be defined, otherwise this won’t work. For the shape you can go with circle(), polygon(), inset() or ellipse().
Another possible value is the url() function. In this case, this enables the shape-outside property to define an element shape based on the image. You might choose to use the url() function instead of the polygon() when you have a particularly sophisticated graphic with many curves and points, and you want the content to wrap around it smoothly.
If you’d like to create more room between your element and the content, use the shape-margin property, which will act just like a margin. Shape functions can be animated, but only for defined polygons – the url() function unfortunately is not able to be animated.
Browser support for shape-outside is limited at the moment, but keep your fingers crossed for its fast implementation in other browsers.
5. Skewing Elements
Nowadays the aesthetics of chaos, noise, and jamming – is becoming a popular design trend. The celebration of glitches, failures, and errors can be seen on the web as well. If you’d like to play with perspective and be more visually chaotic, you can do so easily by transforming and skewing your site’s elements.
One line of code does the magic:
transform:skew(60deg, -30deg) scaleY(.66667);
To understand better, let’s consider the following code:
<html>
<head>
<style>
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Equal to skewX(10deg) */
background-color: pink;
}
</style>
</head>
<body>
<div>Normal</div>
<div class="skewed">Skewed</div>
</body>
</html>
6. Animated Lines
Often you want to create interesting effects like animated underlines, appearing and disappearing background, etc.
Don’t create a new element, just utilize ::after and ::before pseudoselectors. They work great for these things. Do not forget to set content property: if you forget it, the pseudo-element will not be rendered.
.item::after {
content: "";
position: absolute;
top: xyz;
left: xyz;
... properties you want;
}
7. The Overflowing Text Effect
Modern website animation often utilizes this kind of overflowing text, appearing from the bottom.
Let’s see the minimal code needed.
.parent {
height: /*something similar to child's font size*/;
overflow-y: hidden;
display: block;
}
.parent .child {
animation-name: appear;
animation-duration: ...s;
}
@keyframes appear {
from { transform: translateY(/* parent's height*/) }
to { transform: translateY(0)}
}
8. Drop Caps
Everyone loves drop caps. It reminds us of the traditional printed book and is a great way to start a page of content. That 1st, a large letter really grabs your attention. There’s an easy way to create a drop cap in CSS, and it’s by using the pseudo element: :first letter. Here’s an example :
p:first-letter{
display:block;
float:left;
margin:3px;
color:#f00;
font-size:300%;
}
What this does is set the letter to 3x the size of the other letters. It sets 3px of space around the letter to prevent overlapping and sets the colour of the letter to red.
9. Parallax Scrolling
Parallax is a very common trend in modern web design. It’s about scrolling background content at a different speed than foreground content when we scroll the page. Let’s see how this magic can be done using CSS:
.wrapper {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background-color: #f6f6f6;
}
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20vh 0;
}
img {
width: 100%;
}
h3 {
font-size: 60px;
color: white;
}
.box.box-back {
transform: translateZ(0);
z-index: 99;
text-align: center;
}
.box.box-front {
width: 1500px;
transform: translateZ(-1px) scale(2);
}
In the example, you can see how our text and background image are moving differently. We used transformZ, to fasten one element and slow another one.
10. Image Filters
Playing with images may bring lots of amazing effects for the layout and help to create stunning results. CSS allows using lots of filters on the images to help developers play with the graphic without changing it in Photoshop. Let’s take a look at the filters we may use:
.image img {
max-width: 300px;
}
.blur {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}
.brightness {
filter: brightness(150%);
}
.saturate {
filter: saturate(200%);
}
.invert {
filter: invert(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
In the example above, you can see seven different filters used in the same image.
