I'm trying to have a button that changes to a gradient background when active. The buttons have an image + text. The image is offset 5px from the left margin. The problem is that when the active state is invoked the 5px padding is excluded from the gradient.
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Testing</title>
<style>
.controls {
display: inline;
margin-left: 10px;
}
.button {
padding: 5px 5px 5px 25px;
border: 2px solid #666666;
color: #000000;
text-decoration: none;
/* background: #dcdcdc url(static/16x16/arrow-black.gif) no-repeat scroll 5px center; */
background: rgba(230, 230, 230, 0.75) url(static/16x16/arrow-black.gif) no-repeat scroll 5px center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button:hover, .button:focus {
background: rgba(200, 200, 200, 1.0) url(static/16x16/arrow-color.png) no-repeat scroll 5px center;
border: 2px solid #3013ED;
}
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
</style>
</head>
<body>
<button id="scale-button" class="controls button">Scale it</button>
</body>
</html>
The button looks like this in normal state:
When I hover it is fine and looks like this:
But when it's active I end up with the padding excluded from the gradient background.
Is there some way to adjust the padding so that the gradient background doesn't exclude the leftmost pixels? If I have to adjust the image so that no padding is required I can do that, but I'm hoping there is a better way.
Here are the two images I for the arrows: , . They're both 16x16 images.
If you alter your code in the following fashion it will remove that offset. Change:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
to this:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 0px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
Where the only change I made was on the background declaration from 5px to 0px
I ended up finding my answer on stackoverflow. Mine is a duplicate. The key answer is that there can be multiple background-position specifications that correspond to the multiple background images. Not to duplicate the entire post, but:
background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;
Here's exactly what I was looking for:
How to position a background-image using an offset but not the linear gradient
Related
I'm trying to make an image-less icon for a drop down menu using CSS triangles that point up and down. Code looks like this: http://jsfiddle.net/FGrR2/6/
.d, .u {
float: left;
clear: left;
width: 0px;
height: 0px;
border-style: solid;
margin-bottom: 5px;
}
.d {
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
}
.u {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #007bff transparent;
}
However, if I load the page in Firefox 17.0.1, the edges of the triangles don't line up. Here's a zoomed version of how that looks: http://imgur.com/7W8Owmk It's like the 2nd triangle is "aligned" to the right or something.
Has anyone else encountered this?
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.
what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?
I'm been playing with this CSS-only method:
http://maxvoltar.com/archive/rounded-corners-on-images-css-only
The key features of this method are:
wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
setting the actual image opacity to 0
floating the wrapper left so the image and wrapper line up.
here's the HTML:
<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>
here's the CSS:
img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}
p {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:
image NOT manually sized:
http://jsfiddle.net/trpeters1/wxXAn/1/
image set to 50px wide/50px height:
http://jsfiddle.net/trpeters1/wxXAn/2/
Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?
UPDATE
thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/
Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.
I managed to get it to work by using the following code
p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}
I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.
Hope this is what you are after.
Thanks