Tab Styling

OliverE

Power member.
Joined
Mar 19, 2011
Posts
3,687
Reacts
0
Reputation
0
Credits
5
Just changed the tab styling slightly
100 bytes to who ever can guess what the change or addition was.
500 bytes to who can tell me the exact code I added to make the change
 
im currently on a IE browser so i dont have a clue lol
 
Arr that is a shame xD
Typical IE not supporting CSS3 xD
 
Is it the blue border? I have no idea. I didn't pay that much attention before.
 
No ... saying that, I did change the border about a week ago, but thats not what im looking for xD
 
they look a bit shorter and a lighter shade of blue also i think there are less than before
 
Nope, still not got it xD
Ill try make it more obious.
 
Even after ive just changed it even more you cant tell ? xD
Oh well
 
Deadly,

border + outline = same thing when referring to styling.
 
well i dont even know what im suposed to be looking at anymore :/
 
I know!

Gradient for the mouseover, new inactive color, new font color

Oh, and here's the dead on exact code.

Code: 
.shadetabs {
	padding: 1px 0;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 2px;
	font: bold 12px Verdana;
	list-style-type: none;
	text-align: center;
}

.shadetabs li {
	display: inline;
	margin: 0;
}

.shadetabs li a {
	background: #ADC5D8;
	color: #fff;
	position: relative;
	z-index: 1;
	padding: 3px 17px;
	margin-right: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top: 1px solid #0F5C8E;
	border-right: 1px solid #0F5C8E;
	border-left: 1px solid #0F5C8E;
	text-decoration: none;
text-shadow:0px 0px 5px #5989b0;
}

.shadetabs li a:hover {
box-shadow:0 1px 0 0 #e1ebf4 inset !important;
	background: rgb(160,190,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(160,190,214,1) 0%, rgba(89,137,176,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,190,214,1)), color-stop(100%,rgba(89,137,176,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0bed6', endColorstr='#5989b0',GradientType=0 ); /* IE6-9 */

	color: #ffffff;
	padding: 5px 17px;
	border-top: 1px solid #0F5C8E;
	border-right: 1px solid #0F5C8E;
	border-left: 1px solid #0F5C8E;
text-shadow:1px 1px #222;
}

.shadetabs li a.selected {
	position: relative;
	top: 0px;
}

.shadetabs li a.selected {
	background: rgb(160,190,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(160,190,214,1) 0%, rgba(89,137,176,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,190,214,1)), color-stop(100%,rgba(89,137,176,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(160,190,214,1) 0%,rgba(89,137,176,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0bed6', endColorstr='#5989b0',GradientType=0 ); /* IE6-9 */

	color: #ffffff;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 5px 17px;
	margin-bottom: 5px;
	border-top: 1px solid #0F5C8E;
	border-right: 1px solid #0F5C8E;
	border-left: 1px solid #0F5C8E;
box-shadow:0 1px 0 0 #e1ebf4 inset !important;
text-shadow:1px 1px #222;
}

.shadetabs li a.selected:hover {
 /*selected main tab style */
text-decoration: none;
}

.tabcontent {
display:none;
}

@
media print {
.tabcontent {
display:block !important;
}


}

:3
 
You managed to find the a few new things ive added, but not the first thing this thread was based on ;)

Ill give you some hints;
Its generally 1 pixel in height
Its a fixed color
Effect is used on HF (as much as I hate to say it)

Also you said its gradient on mouse over, but also gradient when selected. Its been solid colors everwhere upto today.
 
Is it a CSS3 gradient button thingy? And yeah you know what I meant by mouseover gradienty though. I meant to include the selected XD
 
nothing to do with gradients.

Look at the CSS you pasted, spot the thing that you havent mentioned yet! xD
 
You must log in or register to reply here.

Featured

• General Discussion
• Inactive FK Username Requests

Share this page

Back
Top