I just had a question about how to change image and text on hover and click.
They are placed side by side and now I know how to swap them at the same time.
Now my follow-up question is: How can I make several of these Image&text to swap after one another?
Is it doable with css only? Or do i need to adddd some script?
If what you are asking is if you can swap them automatically, at a given interval of time, then the answer is yes, it is possible with CSS, using keyframe animations - you can animate the opacity property.
UPDATE: image gallery using keyframe animations
You can also do this when you have some kind of thumbnails or navigation buttons and in this case it's mostly the same technique I've used in my answer for your previous question - a very basic (ahem, very basic means I did it in a couple of minutes a couple of weeks ago and then I was too lazy to come back to prettify) example of this kind of gallery using thumbnails for navigation you can see here http://dabblet.com/gist/3102051.
You can use CSS :hover pseudo-class to change a background image (or change background position is using CSS sprites) on a hover event, but there is not a CSS-only way to do the same for a click event. You would probably need to look at javascript for this
Yes it is possible using CSS only. check this blog post for details:
http://sixrevisions.com/css/css-only-tooltips/. Can you also provide some sample code that will help understand how it can be done. Nevertheless, the link I mentioned above must be able to aid you.
Related
This question already has answers here:
Chrome 83: Change colors of new form styling
(10 answers)
Closed 2 years ago.
Is there any workaround except using 3 rd css libraries to change default sharp blue styling of input elements? After such update the look of complicated interfaces happened to be completely inconsistent...
I don't think that the way a checkbox or similar inputs look can be changes with CSS, because they are part of the browser's interface. So what could you do?
CSS libraries are a solution, as you have already suggested.
If it was only the brightness of the blue colour you didn't like, an alternative could be to lay another element over each checkbox with a reduced opacity (a div with an absolute position and a white fill could be a solution).
The disadvantage of this approach is that it would require adding additional elements to your HTML, and the appearances available would still be very limited.
I would recommend creating your own checkboxes with CSS – it isn't actually that difficult, and the checkbox input elements can remain as they are now in the background.
I think that this tutorial on w3schools might be quite useful for you. Maybe a little more work, but with the extra advantage that your checkboxes etc. look exactly the way you want them to, not just in chrome but in every browser.
Sorry I couldn't provide a single, simple solution, but I hope it helped a bit!
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
Under the iPod Touch, when I click on the blue button the image will be scrolled to the right/left according to the image.
What is this technique called and is it achievable using pure HTML5?
It's just another style of carosel/image gallery design. This is usually done with jQuery. And honestly you can find pre-built templates almost all around the web for this stuff. I have added a couple links below. If you have time check them out and post back with questions.
Coin Slider
Nivo Slider
Presentation Cycle
BXSlider
I'm not sure about only HTML 5, but through CSS3's target pseudo class ( http://www.w3.org/TR/css3-selectors/#target-pseudo ) you can allow users to scroll through images.
The problem with this is, of course, that without JavaScript the functionality is lost in older browsers, and having it animate through the various images automatically (without a user selecting an image to drive the :target class) is going to be difficult at best.
Paul Hayes' CSS3 modal window ( http://www.paulrhayes.com/2011-03/css-modal/ ) explains a lot of these issues, and gives you a lot of the theory behind how one might implement a slider through CSS3.
In the end though, unless you're trying to do a proof of concept, or something that shows the world how cool CSS3 can be, you're better off with one of the JavaScript solutions that Jake has linked — they'll work in the real world.
I have a banner at the top of my website that is blue with a light radial gradient on the left side.
I want to have white text animated that scrolls up on the right side of the banner. I want it to fade in as it appears and then fade back out. I would like to do this without the use of Flash, and as little Java as possible. I can work my way through CSS and set up the layout, but I don't know how to code it so that the animation will work.
I'd also like the white text will be the titles and a very brief summary of recent blog posts for the site. (probably the RSS summary) I don't know if that's easy to code into it or if I'll need to hand code that every time I have a new blog post.
After some basic research I think what I'm looking for is HTML 5 canvas, but I'm not sure.
Update: 10/21/2015: The following answer required you to explicitly provide values such as 100em in order to achieve offsets. This is not ideal. Instead, you can translate the element.
Update
You can indeed do this today without flash or JavaScript. You can use the keyframes feature in modern browsers to move text in modern browsers. I took the liberty to work up a quick demo demonstrating the concept: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, and (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.
Essentially we set the initial starting-point of the animation to text-indent: 100% to set it out of view and to the right. Then we set the last frame to text-indent: -100%, or whatever is needed to hide the text (will vary depending on character-length).
Old Answer
You won't be able to do this without flash or Javascript. HTML is structure, while CSS is presentation. Neither of the two provide animation-capabilities. I would suggest you go a route that includes a small javascript framework like jQuery, as this can convert standard HTML into the animated effect that you desire.
I would encourage you to look into the Cycle Plugin for jQuery.
What you need is JavaScript rather than flash or java.
JQuery is ideal for this type of animation. It's a JavaScript library that simplifies writing such JavaScript functions. There are many plug-ins available for jQuery that give similar functionality to what you require - have a look at JQuery Marquee
You'll certainly need to use JavaScript, unless you want to use Flash. You cannot do it without a program.
Your best bet is to look into an animation library.
Scriptaculous can do everything you describe, but doing what you describe is not for a JavaScript beginner.