Consider a translucid background-image blocking the pointer-events of css links underneath it. I would like to make the links work even beneath this image.
Is it possible?
If one element overlaps another you can't click it, simple.
You can put the links on top of the overlay, but you will lose the effect on those links. It's not classy, but I guess it would work.
a {
position: relative; /* set them relative, keeping their position */
z-index: 1000; /* set z-index to move it in front */
}
Don't think so!
generally one of the oldest image theft methods was putting image behind a transparent image.
but if it is very important to you you can make hot spots on that image with some usual methods such as html image map or using some of the svg capabilities.
and if there is effects like shadow or something like this you can use css3 to make them with code
Related
How can I set visibility:hidden for only one of my multiple background images in CSS?
.app1 {
background-image: url(../img/photo1.png),
url(../img/photo2.png);
background-size: 17em, 27em;
As Toni has said visibility: hidden wouldn't work. However if you want to make it so that the image does not show up, you could use the background-size, and just make it 0em.
You cant do visible:hidden that on multiple backgrounds you can hide the whole div. One hack I did was to use the background size to get to it
/*CSS */
.app1 {
background-image: url(../img/photo1.png),
url(../img/photo2.png);
}
//JS
$('.app1').css({'background-size':'0 0, 27em'});//to hide photo1.png
$('.app1').css({'background-size':'17em, 0 0'});//to hide photo2.png
This is the way to do it till we have some more background specs coming up ;)
You can't.
CSS properties apply fully to the selector that they are written in, so both background images will be affected by visibility: hidden; (just as they are both affected by the background-size declaration.
You could however nest two HTML elements within each other, then apply a background image to each and add visibility hidden to either of them as necessary.
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.
I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.