24 Hours

Again, css text-shadow property allows you to create interesting effects with the text.
To make a neon-like effect there a is a lot of blur added (third value of the text-shadow property). Have a look-see at the code!

CSS&HTML Code

<!Doctype HTML>
<html>
<head>
<title>Neon Sign With CSS</title>

<style>

#box
{position:relative;
background-color:black;
width:300px;
height:400px;
}

#text
{position:relative;
top:20px;
}

#Twentyfour
{
font-size:300%;
color:white;
text-shadow:
-1px -1px 10px lime,
1px -1px 10px lime,
1px 1px 10px lime,
-1px 1px 10px lime,
-10px 10px 30px lime,
10px -10px 30px lime,
10px 10px 30px lime,
-10px 10px 30px lime;
}

</style>

</head>

<body>

<div id="box">

<h1>
<span id="Twentyfour">24 Hours</span></h1>
</div>
<div id="text">
</div>
</body>
</html>

Tiger Bird Webdesign

Thursday, 13 November 2014

Neon Signs With CSS

24 Hours

CSS&HTML Code

No comments:

Post a Comment