Rounded Corner CSS

In the new generation of advance CSS we can make rounded corner with the help of CSS. In this method we don’t need any images or javascript to make rounded corner. “border-radius” is the CSS3 syntax. CSS3 properties don’t work in Internet Explorer(IE6,IE7,IE8) but it’s works on IE9. For rounded corner we use “border-radius”. Please see the below example.

rounded corner in css

CSS [CSS3 Browser]

.rounded_corner
{
	background:#fffc00;
	border:3px solid #F00;
	padding:15px;
	color:#000;
	width:350px;
	margin:auto;
	border-radius:12px;
}

HTML

<div class="rounded_corner">&nbsp;</div>

You can use some browser hacks. E.g. For Mozilla we can use “-moz-border-radius“, for Opera we can use “-o-border-radius“, for chrome, Safari we can use “-webkit-border-radius“. -moz-border-radius will only work if you’re using Firefox or another Mozilla browsers. -o-border-radius will only work if you’re using Opera. Please see the below example to use “border-radius” separately for different edges.

Continue reading

VN:F [1.9.22_1171]
Rating: 9.3/10 (20 votes cast)
VN:F [1.9.22_1171]
Rating: +7 (from 7 votes)
Posted in Advanced HTML - CSS | Leave a comment

Simple CSS and Javascript Drop Down Menu

Here you can find a simple drop down menu with the help of CSS and Javascript. You can use ‘<ul>’ (<ul id=”ddsubmenu1″ class=”ddsubmenustyle”>) tag any where of your page. It’s mean that if you placed the sub menu <ul> in footer, it will be viewed in proper place. This menu is also search engine friendly.

javascript drop down menu

CSS:

.main_menu
{
	background:#bd3213;
	height:30px;
	line-height:30px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
.main_menu ul
{
	list-style:none;
	padding:0px;
	margin:0px;
}
.main_menu ul li
{
	float:left;
	margin:0 2px 0 0;
}
.main_menu ul li a
{
	padding:0 20px;
	text-decoration:none;
	color:#FFF;
	display:block;
}
.main_menu ul li a:hover
{
	background:#000;
}
.ddsubmenustyle, .ddsubmenustyle ul
{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}
.ddsubmenustyle li a
{
    display: block;
    width: 160px; /*width of menu (not including side paddings)*/
    color: black;
    background-color:#eb7e17;
    color:#FFFFFF;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom:0px;
}
* html .ddsubmenustyle li
{ /*IE6 CSS hack*/
    display: inline-block;
    width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover
{
    background-color:#d34712;
    color:white;
}
.downarrowpointer
{
    padding-left: 4px;
    border: 0;
}
.rightarrowpointer
{
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}
.ddiframeshim
{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}

Continue reading

VN:F [1.9.22_1171]
Rating: 9.2/10 (40 votes cast)
VN:F [1.9.22_1171]
Rating: +8 (from 16 votes)
Posted in Advanced HTML - CSS | Leave a comment

Simple CSS Drop Down Menu

Here we present another CSS drop down menu. This menu is also fully CSS based and no JavaScript. This menu is compatible with Worpress, Joomla etc. So you can use this menu in your CMS based site.

css drop down menu

CSS:

.main_menu
{
	height:30px;
	line-height:30px;
	color:#FFF;
	position:relative;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	background:#0068ac;
}
.main_menu 
{
	position:relative; 
	z-index:100;
}
.main_menu ul li a, .menu ul li a:visited 
{
	display:block; 
	text-decoration:none; 
	color:#FFF;
	width:109px;
	height:30px;
	text-align:center; 
	color:#fff; 
	line-height:30px; 
	overflow:hidden;
}
.main_menu ul 
{
	padding:0; 
	margin:0; 
	list-style: none;
}
.main_menu ul li 
{
	float:left; 
	position:relative;
}
.main_menu ul li ul 
{
	display: none;
}

/* specific to non IE browsers */
.main_menu ul li:hover a 
{
	background:#3e941f;
	color:#FFF;
}
.main_menu ul li:hover ul 
{
	display:block; 
	position:absolute; 
	top:30px; 
	left:0; 
	width:169px;
}
.main_menu ul li:hover ul li ul 
{
	display: none;
}
.main_menu ul li:hover ul
{
	background:#004376;
	font-size:13px;
}
.main_menu ul li:hover ul a
{
	background:#004376;
}
.main_menu ul li:hover ul li a 
{
	display:block; 
	color:#FFF;
	width:149px;
	text-align:left !important;
	padding:0 10px;
	height:24px;
	line-height:24px;
	margin:0 0 3px 0;
	background-image:none !important;
}
.main_menu ul li:hover ul li a:hover 
{
	color:#FFF;
	background:#429a21 !important;
}
.main_menu ul li:hover ul li:hover ul 
{
	display:block; 
	position:absolute; 
	left:105px; 
	top:0;
}

Continue reading

VN:F [1.9.22_1171]
Rating: 9.2/10 (34 votes cast)
VN:F [1.9.22_1171]
Rating: +10 (from 14 votes)
Posted in Advanced HTML - CSS | Leave a comment

CSS Drop Down Menu

We can make fully CSS based drop down menus. This menu is fully CSS based no JavaScript and there is no image so it is load very quickly, and it is also search engine friendly. It will work fine in all browsers except IE6.

css drop down menu tutorial

CSS:

.main_menu
{
	height:30px;
	line-height:30px;
	color:#FFF;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
.main_menu ul
{
	padding:0px;
	margin:0;
	list-style:none;
}
.main_menu ul li
{
	padding:0;
	margin:0;
	border-right:1px solid #000000;
	float:left;
	background:#333333;
}
.main_menu ul li a
{
	color:#FFF;
	display:block;
	text-decoration:none;
	padding:0 25px;
}
.main_menu ul li a:hover
{
	background:#3ea5ea;
	color:#000;
}
.main_menu ul li ul
{
	 display: none; 
	 width: auto;
	 position:absolute;
	 top:30px;
	 padding:0px;
	 margin:0px;
}
.main_menu ul li:hover ul
{
	 display: block;
	 position: absolute;
	 margin: 0;
	 padding: 0; 
}
.main_menu ul li:hover li
{
 	float: none;
 	list-style:none;
	margin:0px;
}
.main_menu ul li:hover li
{
	background:#333;
	border-top:1px solid #000000;
}
.main_menu ul li:hover li a
{
    color: #fff;
	padding:0 20px;
	display:block;
	width:170px;
}
.main_menu ul li li a:hover
{
 	color:#000;
}

Continue reading

VN:F [1.9.22_1171]
Rating: 9.2/10 (64 votes cast)
VN:F [1.9.22_1171]
Rating: +18 (from 22 votes)
Posted in Advanced HTML - CSS | 2 Comments

Rounded Corners CSS

You can make rounded corner with the help of CSS. We can Use “-moz-border-radius” to make rounded corner but It will not support all browsers. Now we use four images to make rouded corner. It is little bit tricky. First of all we need to create four images for four corner. You need to use same color on background and corners images color. Here you can see we use pale yellow. Please see the below code.

rounded corner css

Images:

top right round conner

top left round conner

css rounded conner

bottom left rounded corner

To download this images please right click on images then save to you computer.

CSS:

body
{
	background:#fffac2;
}
.image_holder
{
	position:relative;
	width:219px;
}
.top_left
{
	width:24px;
	height:18px;
	background:url(top_left.png) no-repeat top left;
	position:absolute;
	top:0px;
	left:0px;
	font-size:1px;
}
.top_right
{
	width:24px;
	height:18px;
	background:url(top_right.png) no-repeat top left;
	position:absolute;
	top:0px;
	right:0px;
	font-size:1px;
}
.bottom_left
{
	width:24px;
	height:18px;
	background:url(bottom_left.png) no-repeat top left;
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:1px;
}
.bottom_right
{
	width:24px;
	height:18px;
	background:url(bottom_right.png) no-repeat top left;
	position:absolute;
	bottom:0px;
	right:0px;
	font-size:1px;
}

Continue reading

VN:F [1.9.22_1171]
Rating: 8.9/10 (21 votes cast)
VN:F [1.9.22_1171]
Rating: +8 (from 10 votes)
Posted in Advanced HTML - CSS | 2 Comments