This is one of the commonly used concept to highlighted text like contact number, Email ids, feedback etc.. This types of vertical fixed sidebar always increase the visibility of the particular text. When you promote the page for business those peoples really using this types of sidebars.
This concept is purely done by using simple css. It also responsive and you can set this vertical fixed sidebar left or right sides to modifying simple css code here. You can able to set the margin and padding, colors, background colors according to your choice. I provided the simple css code here i hope this example will helpful you. Here have the demo page to display the result of this code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical fixed sidebar using simple css</title>
<style type="text/css" media="screen">
#vertical-fixed-bar {
height: 0px;
width: 65px;
position: fixed;
left: 1px;
top: 50%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-left: -38px;
}
#vertical-fixed-bar a {
display: block;
background: #f7a00c;
height: 23px;
width: 195px;
padding: 11px 9px;
color: #fff;
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="vertical-fixed-bar">
<a style="font-size:15px;" href="">www.sanwebcorner.com</a>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical fixed sidebar using simple css</title>
<style type="text/css" media="screen">
#vertical-fixed-bar {
height: 0px;
width: 65px;
position: fixed;
left: 1px;
top: 50%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-left: -38px;
}
#vertical-fixed-bar a {
display: block;
background: #f7a00c;
height: 23px;
width: 195px;
padding: 11px 9px;
color: #fff;
font-family: Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="vertical-fixed-bar">
<a style="font-size:15px;" href="">www.sanwebcorner.com</a>
</div>
</body>
</html>
0 Comments