I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).
Related
I am a novice as best please pardon me, but I'm learning.
I can illustrate what I need with an image.
Vertical Navigation 'White Curved Tab as Selector':
This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..
I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.
Here is my CSS thus far:
`.body{}
`.mobile-menu-nav.moved {
max-width: 75px;
width: 75px`
}
#head{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
#main-wrapper{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
.menu {
width: 60px;
height: 100%;
position: left;
border-radius: 15px;
border: 1px solid #00F;
}
.mobile-menu-nav li a {
font-family: Arial, sans-serif;
font-size: 12px;
color: #FFF;
background-color: transparent;
width: 100px;
height: 22%;
border: 1px solid transparent;
margin: auto;
margin-top: 50%;
margin-bottom: 50%;
margin-left: -15px;
position: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
-o-transform: rotate(-90deg);
`
https://sproutsa.co.za
Thanks much.
I think it would be the best to use ::after or ::before
.mobile-menu-nav li a:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent url('../images/your_image.svg') no-repeat;
background-size: contain;
background-position: center;
}
I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.
Second similar solution is:
.mobile-menu-nav li a {
display: flex;
}
.mobile-menu-nav li a::after{
content: url('../images/your_image.svg');
width: 20px;
padding-left: 8px;
}
SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.
Use ::after or ::before depending on position you want icons to be, right or left.
I need to create a tick in a checkbox using CSS and not an image.
I can see the green '✔' showing up correctly. but the top and left in css is just not working the tick sign is always stuck at the upper left corner at the checkbox and I want it at the middle. Why is the content and color property working but left and top not working?
Top and left doesn't work with static element, you need to specify a relative, fixed or absolute position in order to use these property. You can try this :
input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 15px;
left: 250px;
color: green;
position: relative;
}
A full code :
input[type=checkbox]:focus+.icon {
background-position: 0 -822px;
}
input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
background-position: 0 -856px;
background-color: #2196F3;
display: block;
}
input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
background-position: 0 -800px;
content: '✔';
font-size: 25px;
margin: auto;
top: 5px;
left: 50%;
margin-left:-12px;
color: green;
position:relative;
}
input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
background-position: 0 -890px;
}
,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
background-position: 0 15.3%;
}
&.hasError .icon {
background-position: 0 -890px;
}
<input type="checkbox" required="required" name="terms" id="termsAgree" auto-required="true">
<span class="icon"></span>
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png
When loading the thumbs
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
}
The only way I can get the thumbs to show up is if I do this:
Was this review helpful? |
If I remove all the then the thumbs disappear. If I leave only one then it shows a partial view of the sprite.
How can I display the sprite without the need of ?
by using float:left:
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
float: left; /* OR float:right, depending on what you need */
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
float: left;
}
As the links are inline elements, you can't specify the width and height for them. They get their size only from their contents, that's why the spaces gives them size.
I think that the best option for your use is to make the links inline-block elements. That way they are block elements so that they can have a specific width and height, but they are still inline elements in the text flow so that you don't have to change your markup.
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
display: inline-block;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
display: inline-block;
width: 15px;
height: 16px;
}
The image is a background. But for the background to be visible, the element must have some height and width. In your case an empty tag has no height and width. You should make it display:block
Just use display: inline-block; in both of your CSS classes.