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; 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.
Table of Contents
1. CSS Blend Modes
Regarding technology, you can have 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 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 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
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 many individuals use.
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 the content property: the pseudo-element will not be rendered if you fail it.
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 played 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 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;
}Animation is excellent for 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);
You can incorporate a phrase’s very initial letter using a drop cap to get a newspaper look that stands out. This makes the capital letter significant, and then you can style it how you want.
<span class="dropcap">T</span>
Then
.dropcap {
float: left;
font-size: 400%;
color: #cf142b;
margin: -13px 7px -13px 0;
}4. Typewriter Effect
Creating the effect on the text through CSS tricks is possible; first, you need to know 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 a 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 yet. The: visited pseudo-class handles the styling of all 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 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 clipping 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
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 to define the geometry of an element based on a picture.
You might use this function instead of the polygon when you have numerous curves and points and want the content to wrap around them neatly ().
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 abovementioned tricks, 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 with a standard linear gradient. 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 ensure 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 improving your website. The tips and tricks are there because sometimes we need them; they’re always needed whether or not we’re new to these CSS tricks.
Hopefully, the article gave you some fantastic CSS tricks to improve your website and the codes for your thoughts. Furthermore, we will be coming up with more tips and CSS tricks that will help you do innovations in the future.
