CSS3

Facebook Twitter

Klou. The Good Man.

Boutons

6 Cool Image Captions with CSS3. CSS3 is really powerful.

6 Cool Image Captions with CSS3

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. <div id="mainwrapper"><! <div id="mainwrapper"><! Basic CSS The styles will be separated in style.css file, so our HTML file will look neat. OK, let’s begin styling the element, starting from the html tag and the main wrapper id: Image Box Style. 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.

Patterns - éléments

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.

CSS3 Solutions for Internet Explorer - Smashing Coding

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.

Media-queries

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.

CSS3 Image Styles – Part 2

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.

Animations-transitions

Article-blog.