CSS3 Curved Border; Text Effects; Box Effect

Preview:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<style type=”text/css”>
div {
/*Curve Border*/
border:1px solid #a1a1a1; border-radius:7px;
/*Box Effect*/
width:400px; /*100% will not work if you use (display : table-cell) */
height:35px; background-color: #efefef ; /* CSS3 styling for latest browsers */
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
vertical-align : middle; display : table-cell; /*Display text vertically middle in div*/
/*Test Effect*/
text-shadow: 1px 1px 1px #888888; }
</style>
</head>
<body>
<div><b>Share This Video</b></div>
</body>
</html>

 

http://www.w3.org/Style/Examples/007/roundshadow

Advertisements
By simplemsexchange Posted in AOT

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s