3D Drop Shadow for text using pure css | Sanwebcorner

3D Drop Shadow for text using pure css

This is one of the simple concept using css3 code. It is just drop the shadow to the text for 3D Effect. 3D text always looking good and attractive to everyone. So you can use this for your headings to attractive your contents to the clients. This is very easy to drop the shadow with the help of css3. You can drop the shadow to the text using the following simple code.

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);

You can change the color of the codes and shadow colors according to your choice. Here is the demo page of this example you can visit the demo page for this 3d text, and also download the code from here. I hope this simple  concept is very useful to you.



To Drop Shadow to Text for 3D Effect:

<html>
<head>
<title>Drop shadow for 3d text</title>
<style>
body { font: 900 120px/1 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding-top: 10%; }

h1 {
position: absolute;
top: 35%;
width: 100%;
font-size:75px;

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h2>3D Drop Shadow for text using pure css </h2>
<h1>SAN WEB CORNER</h1>
</body>
</html>

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form mysql News ticker on hover change text to image our team page password strength checker Photoshop PHP Popup image on click the link pure css Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube