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.
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?
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
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;
}
is it possible to color a grayscale background image using css3?
It is for an icon. I want it to be blue.
input[name=email] { background-image: url(/static/images/icons/glyphicons_010_envelope.png); background-size: 16px auto; background-position: 8px 7px; }
One posibility is to overlay a blue + alpha color on the image.
And one posibility to do this would be:
.base {
width: 200px;
height: 200px;
background: linear-gradient(45deg, black, white, black);
}
#shadow {
box-shadow: 0px 0px 3000px 0 rgba(0,0,255,0.5) inset;
}
To avoid looking for a black & white image, I have set a gradient in base.
Then, in shadow, I create an inset shadow of a huge size, and blue with alpha 0.5
demo
In the demo, you can see the base image, and the same image tinted in blue.
Explanation
The box shadow is set as inset, so that it is inside the box, around the border. If the size would be too small, you would see the center of the box without shadow.
And, since the color is blue with an alpha, it is somewhat transparent and you can see the background thru it.
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.