By default, the bootstrap nav tabs have a solid background over the active tab so that the bottom border does not appear.
Unfortunately, we're displaying the tabs over a subtle gradient background, so we need a transparent background for active and inactive tabs (we just want a white border: http://cl.ly/image/0x2u132k2F3k).
If we remove the background color from the active tab, we see the bottom border: http://cl.ly/image/0x2H1V1W2t3a.
If we remove the bottom-border from the .nav-tabs class and simply include the bottom border and inactive tabs the border doesn't extend to the full width of the space: http://cl.ly/image/0d361q2A1F3S
Is there any way that we can achieve the line extending all the way to the right, underneath the inactive tabs and not under the active tab without using a background color on the active tab?
Update: Here is a fiddle demonstrating the issue: http://jsfiddle.net/E7ehj/
.container {
background: -webkit-radial-gradient(center, ellipse cover, #276a75 0, #00455b 100%);
padding: 30px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: white;
background-color: transparent;
}
a {
color: white;
}
Related
I am trying recreate the shadowy effect around the text from this Dribbble. here is Image reference
I tried using radial gradient background on circular button with box shadow, but unable to achieve same effect.
Following is my css code:
button {
background: radial-gradient(#ccdaf4, #dbe5f4,#f9fbff);
box-shadow: 7px 7px 40px #f9fbff;
width: 3rem;
height:3rem;
border:none;
border-radius: 50%;
}
The problem is there is either sharp boundary between box shadow and border of button or box shadow is not vissible, What I am doing wrong?
So I want the background to be completely transparent on my icon so I have the code:
<a data-transition="slideup" href="#menu" data-icon="bars" data-role="button" data-iconpos="notext" data-iconshadow="false" class="ui-nodisc-icon">Menu</a>
But when I added the ui-nodisc-icon class, a strange grey circle appears around my icon:
Any ideas what's causing this and how it can be fixed?
For a transparent, borderless button, try this:
No text
.transparentButton {
background-color: transparent !important;
border: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
}
Here is a DEMO
The CSS removes the background color, the border, and the box-shadow assigned by the jQM framework.
This is my layouts menu:
http://gyazo.com/da1f1954a34694facaaab8ce6c92b267
Can you see the Black and white low opacity lines between each menu item?
How do I make them exactly in that size? also you can see theres a space amount of space in each menu item, how do I do so?
Thanks
1) For borders use rgba:
your_li_element_selector {
border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}
Hide left border for the first menu item:
your_li_element_selector:first-child {
border-left: 0;
}
Hide right border for the last menu item:
your_li_element_selector:last-child {
border-right: 0;
}
2) For space use margin and padding properties of li element and a inside it.
You can do border left and border right using RGBA and change the opacity down. First-child and last-child to remove the extra borders. Downside is the above things will not work in some older browers. As #dev said the best fit might be using images.
Example using RGBA, first-child and last-child: http://jsfiddle.net/Ra9NT/
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.
I have a table, in the Table header (TH) I have a background with CSS:
.gridView th
{
padding-top: 1px;
background-image: url('/Images/Design/New/mitte-tb_02.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
color: #FFFFFF;
border: 1px solid Gray;
text-align: center;
}
Now I will right an left from the border 1px space between border and background.
I try all, but it seems useless.
any ideas?
You can achieve this by setting border-collapse on the table to separate and the background colour of the table to Gray. Then set the border of the cells to the colour that you want between the gray border and the background image. See this example: http://jsfiddle.net/NMx5M/
You can put inner div in th element and set background for it with with margin: 0 1px;. An example (I replaced image with color for simplicity).
If I understand you correctly:
By the nature of "background", the image will fill as much of the space as the image size permits (especially if it repeats).
You could force a border using cellspacing or a white border for a visual impression.
Alternatively you will want to make the background image exactly 1px too small around the edges, and position the background absolutely to give the ~impression~ of the gap.
edit
you can perhaps do something like this
.foo {
background: url(bg.jpg) repeat-x;
display:block;
width:99%;
height:99%;
}
<th style="padding:1px;" scope="col"><span class="foo">Foo Bar</span></th>
b