in this small tutorial&tips series I will show you how to make this small transparent gradient effect using HTML and CSS.
you will see that this small effect is very easy and will make your web site looks more beautiful by adding that new effect to your text, so let's start.
I-HTML part
first, we will create the HTML structure of the effect. We will only make a small card that contains an image and a paragraph, of course, you can use the image that you like and put any text. for me I used a small image that I found on unsplash and a text from lorem ipsum.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="card">
<img src="photo-1551334787-21e6bd3ab135.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis odio sit amet neque tincidunt blandit. Sed mattis, neque id pellentesque aliquam, libero nulla luctus mi, id placerat urna sapien ut sem. Donec condimentum consectetur erat commodo vehicula. Nulla gravida quam non mollis vulputate. Curabitur est orci, viverra sed ante non, hendrerit tempor nunc. Duis ornare, arcu in tristique sagittis, leo risus varius est, in posuere odio tortor eget ipsum
</p>
</div>
</body>
</html>
now let's start with the CSS.
II-CSS part
I will not detail all the step, I will only explain how to make the transparent effect of the text.
for that we will create an ::after element of p and we will add to it a gradient background with a transparent part a visible white part. we will add this code for this:
.card p::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#fff 100%);
opacity: 1;
transition: all .3s;
}
and this is what the full code will look like.
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #fafafa;
}
.card{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 350px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(64,64,64,.3);
}
.card img{
width: 100%;
}
.card p{
position: relative;
padding: 15px 20px;
line-height: 1.3rem;
font-family: 'Roboto',sans-serif;
transition: .4s;
}
.card p::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#fff 100%);
opacity: 1;
transition: all .3s;
}
.card:hover p::after{
opacity: 0;
}
and that's it, i hope that you enjoyed this tutorial and it was helpful for you. if it's the case, i invite you to visit our youtube channel and subscribe, you will see too many amazing projects that you can use for your training, don't forget to put a small like and share it with your friends.
How to make a transparent gradient text effect using HTML and CSS
Reviewed by Medics
on
May 08, 2019
Rating:
Reviewed by Medics
on
May 08, 2019
Rating:
No comments: