I wonder how to (CSS-wise) realize a Button with a counter element like the Tweet-Button. The call-out seems to grow with the number of digits; the backgrund sprite used http://platform0.twitter.com/widgets/images/tweet.png has a significantly wider call-out than visible in the basic (i.e. one digit) button rendered.
Any help is greatly appreciated!
The key is to use a correct background position.
They use two elements:
<span><a href=#" >1</a></span>
Apply a background to the span, position it (according to the position of the image in the sprite), and specify the padding for positioning the number:
span {
background-img: url("sprite.png");
background-position: 0 -50px;
padding: 0 0 0 5px;
}
This is the left side of the call-out. The '0 -50px' means the portion of the sprite 50px from the top, 0px from the left is used.
Next style the anchor and the trick is to apply the background to the right side of the element this time:
a {
background-img: url("sprite.png");
background-position: right -50px;
padding: 0 5px 0 0;
}
This background is aligned to the right side of the (growing) anchor and the left side is chopped of.
This way there are actually two images on top of each other, the right-side is on top of the left side (but they are really the same portion of the sprite). The number can grow only as much as the width of the original sprite, otherwise the left side of the anchor background (on top) will be visible.
Related
I've met a small problem that I cannot seem to solve.
This is my CSS code that should work:
div.menu-menu_hun-container li {
padding: 5px;
font-size: 18px;
-moz-border-image:url("images/menu-border.png") 0 0 1 0;
-webkit-border-image:url("images/menu-border.png") 0 0 1 0;
border-image:url("images/menu-border.png") 0 0 1 0;
border-width: 1px;
border-image-repeat: space;
}
As you can see, I'm trying to add a border image only to the bottom of each menu element (except the last one as it's already solved). The problem is that the space property doesn't work at all. Menu elements are 187px width and the image is 125px. I want to position the border element to the left to cover 2/3 of the bottom line. Perhaps, I do not understand how this property works, but I think it should position a single image element to the center of the bottom border because there's no more space left for another image element to make the border complete. I hope you guys could clear the mess in my head.
If you can provide fiddle or image, it will be nice, anyway, Try to re-size the image and use border-image-repeat: space; or you can use round property.
I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
I have an image with the dimensions 36px (height) and 32px (width). I'm accessing the first and last 5 pixels with
background-position: 0 0;
background-position: -26px 0px;
These are put into two different divs with a width of 5px. Altogether I have three divs (left, middle, right)
I now want to use the middle part of the image to repeat itself with a width of 280px. However, I only want to access the image region in between 6px - 26px.
IMAGE:
5px 22px 5px
=== =========== ===
What I want css to do:
DIV
5px 280px 5px
=== ============================================ ===
Note: The 280px are only the region of 22px repeated along x in the image above!
You'll have to change the layout of your sprite to something like the following:
-----------------------
-Left Part Right Part-
- Middle Part -
-----------------------
This way, you would change the y co-ordinate for the middle part of the background-image and it should repeat succesfully.
This is because you cannot repeat a specific part of a background-image. The width/height would have to be fixed in this case, as once you repeat a part, you would see the other parts of the sprite.
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.