I know how to use background images and their position on an anchor element (using :hover). It's my understanding that ie6 doesn't support button:hover. How can I achieve this effect using only css?
IE6 only supports the :hover pseudo class on anchor elements. That means, just like everything else, you have to get a bit creative if you want to achieve this effect.
You'd possibly achieve a hack of this by starting with using conditional comments to include an IE6-specific style sheet for your page / site.
You could then either use a background image that looks the same as your button's background and set an anchor tag to use that background image with the image's correct fixed width, or (untested so not sure about this one) try wrapping the button in an anchor tag.
Related
I am attempting to work out how Invision's blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.
I would have thought this would be a CSS animation, but it doesn't appear in Chrome DevTools 'Animations' tab.
How does this animation work, and why doesn't it appear in the 'Animations' tab?
I had a quick look and here is what I came up with:
Let's start at the element .post-hero: this acts as a wrapper and has position: fixed to make the image more or less stay in place as we scroll.
Inside this there is the .hero-bg element which contains the background image itself. Note that this element has inline styles setting its background to none, but it has a data-bg attribute pointing to the background image itself. My guess is that on page load, some JavaScript is used to take this attribute and add the actual image.
The actual image is set as an <img> element, inside the .backstretch element inside .hero-bg. Now, the .backstretch element is where the animation itself happens: the opacity on this element changes as we scroll (to change the amount of shading), and there's a transform with 3D translation and scaling on the element changing as well. I guess this is done using JavaScript and a scroll event listener on the page.
Following .hero-bg, there is .hero-overlay which has a background color of #252b33 and an opacity of 0.35 to provide the shading effect on the image, together with the opacity of the actual image changing as the page is scrolled.
Edit: if you right click the .backstretch element and select "break on attribute modifications", then scroll, you'll find that the attributes of the element are modified in a file called CSSPlugin.min.js. Googling this seems to point to CSSPlugin being a plugin for the GSAP animation library... I don't have experience with it myself but I know it's popular, others can probably confirm whether or not this is what's used to do the animation. My guess is that the animation is done using GSAP CSSPlugin.
There may be 2 ways to do tooltips or pop-ups -- one is using JavaScript, and the other is using CSS.
The CSS method has some elegance to it, but what about the case of, if the tooltip will show below a link or button, and the tooltip will not be visible inside of the window? (because the user scrolled to such position). If using JavaScript, the tooltip can actually be shown above instead of below in such case. Can CSS achieve the same effect?
Regarding CSS depending of the layout for you popup/tool-tip.
You could consider positioning your element with position: fixed;.
You element will be positioned relative to the view-port, this means it always stays in the same place even if the window is scrolled.
Regarding the stack order of an element you could use CSS z-index Property.
I've got a div where the user has dropped different image elements. They have also rotated, resized and changed opacity. All is done with CSS and the styles are placed inline on each element inside the div. I now need a way to save the "artwork" as a picture. I'm using CSS3 so the rendering-engine that converts HTML to image has to support this.
Any suggestions?
Since you're using CSS3 anyway, it's probably safe to also use the new Canvas API: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas
You can use getImageData() to save to bitmap.
I have a few radio buttons that I'm styling with PNG background images, using :hover to swap out the background image for one with a surrounding halo. The halo areas from adjacent radio buttons overlap, so they should not be part of the clickable area. Yet they are still part of the same image.
Ideally, I'd like to show the halo behind the padding area, so I need the content area of each radio button to be clickable, but not the padding. I can't find any CSS attribute that controls this. The pointer-events attribute is almost, but not quite what I need, and most of its values apply only to SVG anyway.
All that Google searches turn up are pointers on how to use the padding to make the clickable area bigger, not smaller. I can use CSS3-only attributes if necessary, but would prefer not to add any extra markup to my HTML.
Any bright ideas?
I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).
You need to add a wrapper div that handles the background image:
http://jsfiddle.net/sQGV9/
Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.
If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.
You should change it to margin. Than should be not clickable.
if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'
I want my logo be aligned to center and that be clickable outside the margins without html img tag - with css background-image or something that remove right click > view image.
http://jsfiddle.net/qhU5u/
Thanks.
Solved
You should really use an img tag. However if you don't want to for some reason:
http://jsfiddle.net/qhU5u/1/
I've completely removed the div and just used tha a tag to display the logo.
Just use an img element. This is far better for accessibility purposes.
For example, if someone is viewing your page without the CSS enabled, they will be able to see your logo if it is an img, but not if it is a background-image.
However, if you wish to use a background-image, I would recommend using a div with a fixed height and width which matches your image.
Then, place an a element inside the div giving this the same dimensions as the div.
Your way of nesting div inside an a is invalid HTML.
See Demo: http://jsfiddle.net/qhU5u/2/
try this example and see if it's what you're looking for:
http://jsfiddle.net/qhU5u/8/