Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
heya, i'm trying to add a gradient to my tab borders here using the sample code but it seems i can't get rid of the black at the sides. is there a way to fix this or is this just a quirk with the tabs?
(also note that the colors are temporary until i actually finish the rest of the template-)
relevant code snippet
.tabbed_interface
{
box-shadow: black;
margin: 0;
position: relative;
top: 80px;
& > ul
{
& > li
{
display: inline-block;
border-radius: 0;
left: 30px;
margin: 3px;
padding: 5px;
text-align: center;
width: 90px;
height: auto;
border-top: 2px solid @gradient1;
border-bottom: 2px solid @gradient2;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 2px 100%;
background-color: @bg;
color: @text;
background-image: linear-gradient(to bottom, @gradient1 0%, @gradient2 100%), linear-gradient(to bottom, @gradient1 0%, @gradient2 100%);
&.tab-active
blah blah blah
/* colors */
@bg: rgba(255, 255, 255, 0.5);
@gradient1: white;
@gradient2: #6B6D5B;
@text: black;