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
10 of the coolest CSS3 and CSS effects
We all know it and we all love it, and of course by now you probably already know I am talking about CSS and CSS3. Actually, we should probably take a moment to thank CSS3 before going any further for speeding up the load times for all of your favorite sites. They, if they know what they are doing, are more than likely using CSS3 in place of a ton of images to enhance user load times, which is pretty awesome. It is a pretty accepted fact by now that we simply do not need images to do all the things we used to need them for. With CSS3 gradients, transitions, and all the effects, it has really seemed to have taken a lot of the weight off the shoulders of our websites, because let’s be honest — images were surely weighing them down. Don’t be mistaken though, CSS3 and CSS can’t do everything but, ironically enough, I doubt most of us are aware of its limitations or what pushes the very edges of its possibilities. Text-based effects Anaglyphs <h1>Anaglyph</h1> We will then do: Text gradients or
Makisu ~ CSS 3D Dropdown Concept
Nigiri Maguro Sake Unagi Buri Suzuki Saba Iwashi Kohada Hirame Tobiwo Maki Ana-kyu Chutoro Kaiware Kampyo Kappa Natto Negitoro Oshinko Otoro Tekka Sashimi Toro Ebi Ika Tako Tomago Kani Katsuo Toggle CSS 3D Not Detected :( I couldn't detect your browser's CSS 3D capabilities.
Mastering CSS Gradients in Less Than 1 Hour
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects? Well, it’s time to kill those 1px wide images, my friend. If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples. Remember, learning about CSS gradients is really important since browsers are getting better and better every day. So, let’s rock! Basic syntax The first thing you must be aware of is browser support. We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here). This is the basic syntax: This CSS will get this result: So, here are the items explained: Here is an example making use of color positions: Multiple gradients Cool Effects
CSS3 Solutions for Internet Explorer
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. 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 opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). The Demonstration This is the same element without the opacity settings. The Drawbacks Rounded Corners (border-radius)
An Introduction To CSS3 Keyframe Animations
Advertisement By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. A Simple Animated Landscape Scene For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. I’ll describe the CSS related to only one of the elements: the animated sun. The @keyframes At-Rule Here’s the @ rule we’ll be using: @keyframes sunrise { }
