10 Best CSS Tricks to Transform Your Web Layout

10 Best CSS Tricks to Transform Your Web Layout

In today’s world of ever-changing technology, learning new techniques to make your website even more interesting, not just to look at but also to create, is essential. 

We want to create something without knowing how or aren’t delighted with what we have created most of the time. Those times we turn to google, and sometimes it makes our lives even more complicated. 

If you want to create something unique and new, read this blog, as it will make your life easier. Within this article, you will find great ways to transform your website’s layout, to make it even better and more attractive. 

We will give you the ingredients needed to make your website stand out and make the journey of having or creating a website a little easier.

Furthermore, you will find handy responsive image CSS tricks for your websites in responsive image CSS, blend modes, etc. By using only a few lines of coding, you can change your website’s layout to something different and something better.

1. CSS Blend Modes

Css Tricks Blend Modes Web Design

When it comes to technology, you can many unique innovations in CSS; blend modes stand firm, which you can use to transform the website layout. Two-toned images and colourisation effects are among the top trends in web design

Using the CSS blend modes isn’t just a fantastic way to unite the look. It also allows you to produce various versions of colour for an image. There are about fifteen blend modes: screen, overlay, brighten, etc. 

There are multiple ways to do this; you can utilise both the background image and the background colour incorporated on the background mode of the container: Furthermore, you can then darken or utilise pseudo-elements to create an (i.e.: before, and: after) on the wrapper of the image you are using for a colouring effect.

Experts advised using an image high in contrast and is in black and white colour. While you can apply CSS filters to set the greyscale and a high contrasting level. If you apply blend modes, you can stay assured as you will produce a fantastic website layout.

2. Animation

Css Tricks For Animation

Using animation within your website will make it look fun and exciting. Often, people use it not just to attract the desired audience but also because it’s a trend used by many individuals. 

You can create effects such as animated underlines, reappearing text, etc. All you need to do is utilise::after and: before pseudo selectors. 

They work great for these things. Do not forget to set content property: if you fail it, the pseudo-element will not be rendered.

If you want to delay your animation, there’s a way to let it run after 2 seconds, for example. Here’s the code that will help you with that effect.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

Negative numbers are also acceptable. The animation starts as though it has already started playing for N seconds if negative numbers are used.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

You can also let the animation run for how many times you want it to; it can also run for an infinite time. For example, the following code will repeat the animation about three times.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

And if you want to continue it without stopping it infinite times, here’s the code you can follow.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

Something animation is excellent for is making your text slide across the browser; this is done through the following code.

p {
animation-duration: 3s;
animation-name: slide-in;
}
@keyframes slide in {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}

3. Typography

If you don’t want to type the whole text in all caps, don’t want to retype what you wrote due to the issue of capitalisation, well, we just found a solution for you. This CSS targets the h2 title tag.

h2 { text-transform: uppercase; } – all caps
h2 { text-transform: lowercase; } – all lowercase
h2 { text-transform: capitalize; } – capitalises the 1st letter of each word.

Also, constantly we want aesthetic chaos within our title or so on; you can always play a game of perspective and be more visually chaotic. The code that can help you achieve is transform:skew(60deg, -30deg) scaleY(.66667);

To get a newspaper look that stands out, you can incorporate a phrase’s very initial letter using a drop cap. This makes the capital letter significant, and then you can style it the way you want to.

<span class="dropcap">T</span>
Then
.dropcap {
float: left;
font-size: 400%;
color: #cf142b;
margin: -13px 7px -13px 0;
}

4. Typewriter Effect

Css Tricks Typewriter

Creating the effect on the text through CSS tricks is possible; you need to know two things first – How you must clip the text through the text and the animation parts. 

Below you’ll find the code you need to use; the ‘white space is there to be catered to maintain the text on a single container instead of wrapping it around. 

To centre align the text, we use flexbox on the body tag. There is also the animation part; there are two; The typewriter motion changed the text’s width from 0% to 100% in 3 seconds, while the other cursor animation was added to the cursor for a more realistic look. 

This changes the border colour from transparent to #FF8D8D for 1 second. 

The ‘overflow: hidden’ is so the rest of the letter sentences don’t show till the animation is done. Through ‘border-right’, we added a realistic cursor.

<div class="demo-typewriter">
<span>typewriter effect!</span>
</div>
.demo-typewriter span {
color: #262626;
overflow: hidden; 
border-right: .10em solid #FF8D8D;
white-space: nowrap; 
margin: 0 auto; 
letter-spacing: .4rem; 
animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
}
@keyframes demo-typewriter {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes demo-cursor {
from, to {
border-color: transparent;
}
50% {
border-color: #FF8D8D;
}
}

5. Link State

The: link pseudo-class controls all links that haven’t been clicked on yet. The: visited pseudo-class handles the styling of all of the links you’ve already visited. This informs the audience where they’ve already been on the site and the parts website they haven’t seen.

a:link { color: blue; }

a:visited { color: purple; }

6. Scrolling

The smooth scrolling feature on CSS has two options; auto and soft. When it’s on auto, the scrolling box will scroll instantly; meanwhile, on the smooth, it scrolls within a timing function that the user decides.

7. The Hover Effect

If the colours are required to change when an individual’s mouse has hovered over a text, icons, buttons, and so on, you need to add: hover to the CSS to change the style. For example:

.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}

.entry h2:hover{
color:#f00;
}

This will convert the colour of the Hz tag to black from red when an individual hovers over it. It only switches to what you want, so the font size or anything else won’t change. 

If you desire a more manageable transition into the colour and not so sudden, you can use the below code; it gives it 0.3 seconds to transition.

.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}

To zoom and equip colour in on an image through hover, you’d need to surround the image you are using in a container; let’s name the container ‘image-of’. 

The container’s overflow attribute must be set to ‘hidden’. so it works. By default, the image is grayscale, but the filter is removed when the mouse hovers over it. Zoom can be changed using transform: scale(your_ratio);.

.image {
width: 100%;
overflow: hidden;
}
.image-colorize img {
transition: transform .5s, filter 0.5s ease-in-out;
filter: grayscale(100%);
}
.image-of:hover img {
filter: grayscale(0);
transform: scale(1.1);
}

8. Using width and max-width property

If the width property is set to a percentage and the height property is set to “auto”, the image will be responsive and scale up and down:

img {
width: 100%;
height: auto;
}

The image can be scaled up to be larger than its original size. However, a better solution would be to use the max-width property instead.

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

img {
max-width: 100%;
height: auto;
}

9. Clippings

Most often, designers desire to do something unique. To produce something unique and attractive, designers try to fit the image in a particular shape like a triangle or any other shape. 

In this scenario, it is recommended to use the clipping path. The CSS clipping feature is great; a shape’s boundary is the clip-path, and clippings define which parts of the image should be visible. Anything around or inside the path will be visible and hidden outside the path.

clip-path: circle(radius at x, y);

clip-path: URL(#clipping); /*referencing to SVG element*/

If the circle function has a clipping mask incorporated on the top of the image, only the image within this circle will be seen. 

Shape functions and SVG may be used as clip paths, giving you various options, such as animating them into morphing shapes. The background of an image can be removed using a clipping path.

10. Shape In and Out

Css Tricks For Shapes

Text containers don’t always have to be rectangular; this is a way to make your website’s layout richer and better. 

The inside and out allow the content to be wrapped around a custom path within CSS tricks. Apply the code to the image or container;

shape-outside: circle(50%); /* the content will flow 360 degree around the circle*/

You need to define the dimension of the float property; the elements need to be determined, width and height accordingly. Then, you can choose; a circle, polygon, inset, or ellipse for the shapes.

Another option is the URL() function; this allows you to shape outside the feature for defining the geometry of an element based on a picture. 

When you have numerous curves and points and want the content to wrap around them neatly, you might use this function instead of the polygon().

You can use the shape margin property if you want more space between the content and elements you are using — it’ll act like a margin Shape functions can be animated, but only for polygons that have been defined. 

For example, the URL() function cannot be animated.

Before implementing all the tricks mentioned above, here are some bonus tips to make your experience successful. 

Image-based gradients are faster to load than CSS-based gradients because it’s a big part of computation and happens after the rest of the CSS has been done. 

This is useful when using an image where the gradient is a standard linear. Therefore, you can make it with a 1PX wide JPG. However, if it is a radial or some other gradient, it’s best to use a CSS command as it will be a significantly smaller total file size.

Another handy tip is to combine all CSS into one file and make sure it’s GZIP’ed and has an extended expiry date. Also, do this on your production system and not your DEV.

To conclude

If you are looking forward to changing your website’s layout completely, it is advised to implement the tricks mentioned above. These tricks are specially tested and handpicked to help you innovate your website’s layout.

Hopefully, this article helped you and gave you insight into making your website even better. The tips and tricks are there because sometimes we need them; they’re always needed whether we’re new to these CSS tricks or not. 

Hopefully, the article gave you some fantastic CSS tricks to improve your website and the codes to use for your thoughts. Furthermore, we will be coming up with more tips and CSS tricks that will help you do innovations in the future.

Need help Building your Brand?

Let’s talk about your logo, branding or web development project today! Get in touch for a free quote.

Leave a Comment

Looking for a Design Agency that Produces Results?

Let’s talk about your logo, branding or web development project today! Get in touch for a free quote.

Share via
Copy link
Powered by Social Snap