Category Archives: CSS3

Smooth Scrolling in CSS3

Hello friends.
I have noticed that many people are using Smooth Scroll behavior these days on the websites, which is a good thing. And it looks good too. But many people use JavaScript or jQuery to do this. This is right. But it can also be done in an easier way.

Now you must be thinking which is the easiest way I am talking about. I am talking about CSS3, you can also find behavior like Smooth Scrolling through CSS3.

You just need to apply the below rule on your web page.


html {
  scroll-behavior: smooth;
}

Up and Down animation – CSS3

As you people would know that it is now possible to make animation from CSS3 as well. And we can make some easy and simple animations with the help of CSS3.

Let us see some similar example in which you can animate any object or div below.

It is very easy. You just need to apply some properties of CSS3.
This code is also for those who are not technical. Just apply & enjoy 🙂


img.up-down{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.up-down{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

Example:

Can we make a SVG clickable?

Many people doubt whether we can make an image clickable or not. So the answer is yes. And that too in a very easy way. Please check the codes below carefully.

First of all, write the markup given below.


<object data="/images/yourlogo.svg" type="image/svg+xml" width="100" height="70" class="mylogo" ></object>

Now you need to write this CSS code and done.


a.mysvg:after{
   content: ""; 
   position: absolute; 
   top: 0; 
   right: 0; 
   bottom: 0; 
   left: 0;
}

Example:

This is a very easy way to add hyperlink link on a SVG. I hope you liked this method. 🙂

How to add Gradient in text – CSS3

If you guys are thinking how to apply a gradient in the text, do not think much because it is possible and very simple. You just have to apply the following CSS3 rules.


  h6{
  background: -webkit-linear-gradient(#01fe9c, #fb04c5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

In this way, you can apply gradients in any text with the help of CSS3.

These days, gradients are being used a lot in modern websites and gradient makes websites look pretty good too.
However, some old Browsers do not accept the properties of CSS3. There are some CSS hacks are available which you can use easily. But many latest browsers are supporting CSS3 properties. Which is good.

Example:

This is a gradient text