Web Development and Design Blog
Massively is an HTML5 template that uses css3 technology to generate responsive web design on all mobile devices. This template is created by @ajlkn and you can use it for free.
Massively has a complete component, you just use it. There are forms, buttons, typography, photo galleries ready for use for design purposes.
CSS3 allows effects on text and other elements. However, CSS3 is also to be supported by modern browsers that have CSS3 support 100%. Some of the effects that can be used in the text one of which was: gradient. This time we will present a tutorial how to create a gradient effect on a text.
This effect is suitable for a website headline or title of an article. The impression of this effect is more cheerful, not monotonous and relax. The combination of gradient colors will create a feeling softer.
<html>
<head>
<style type="text/css">
div#header{
position: absolute;
top: 20px;
left: 128px;
width: 640px;
height: 45px;
font-family: "Times New Roman", Times, serif;
font-weight:700;
font-size: 35px;
display: block;
background-image: -webkit-linear-gradient(#314A23, #828C68);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
text-shadow: 3px 3px 5px #A7B485;
border:solid 1px color:#FFFFFF;
}
}
</style>
</head>
<body>
<div id="header">Text will show in gradient effect</div>
</body>
</html>
That’s all it takes to create a text with a gradient effect. It’s easy right? Good luck