Klou. The Good Man.
6 Cool Image Captions with CSS3. CSS3 is really powerful.
It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly. The following are browsers that already support transform and transition: Internet Explorer 10+ (not released yet)Firefox 6+Chrome 13+Safari 3.2+Opera 11+ Now, let’s start the tutorial. HTML Structure We have 6 images; each image with a different caption style. Basic CSS Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6).
Image Box Style Caption 1. PrefixMyCSS - Prefix your CSS3 code. Instantly! HTML5 & jQuery Progress bar plugin : Percentage Loader. A showcase and tools for neat things to do with CSS - CSS3d.net. CSS Filters.
Générateurs. Menus. CSS3 Solutions for Internet Explorer - Smashing Coding. Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind.
This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use). Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property.
The Syntax You really only need the second line, which works in all versions of Internet Explorer. The Demonstration This is the same element without the opacity settings. The Drawbacks Box Shadow. Bartaz/impress.js - GitHub.
CSS3 Image Styles – Part 2. Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius.
The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. Fortunately, I found a workaround to resolve this. So today I'm going to revisit this topic again. View Demo Image Styles Problem Most browsers don't render the border-radius and inset box-shadow perfectly on the image element. Previous Solution (see previous demo) As I posted before, you can work around by applying the actual image as background-image. Problem With Background-Image Now the problem with using the background-image trick is that the image can not be resized dynamically.
New Solution!! Then later I found another workaround using a similar trick. Dynamic jQuery Output. CSS3 : 15 Ressources utiles pour vos prochaines réalisations - ressources-css3.
Article-blog.