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)
Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos
CSS3 Responsive Slider / Carousel Using Radio Buttons Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.
CSS3 Loading Animation Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading! First Example CSS3 Loading Animation In this first example, the markup is very simple, where we will create an unordered list and we will create inside the div to create the effect and to control the total animation. Nothing difficult, just create the graphics for the unordered list, take special care to animation, thanks to the delay and control layers we can create this effects! Second Example CSS3 Loading Animation In this second example, we will see how to create a loading bar that fits any resolution. It looks like the style, much simpler than the previous, this is the basic setting, you can modify at your convenience. Third Example CSS3 Loading Animation As you can see the process is the same as the first example, you just know a little CSS to create wonderful effects. Conclusion
Overthrow A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. Disable Overthrow What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. But wait - many browsers actually support overflow very well! What is Overthrow? Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! A few example pages The examples directory has some sample responsive layouts that use overthrow. That's about it. Here's some extra demo content to scroll through... Example Embedded Overthrow Block Form elements
CSS3 with jQuery / Reverse Animation Hello guys, this time I wanted to bump into another interesting experiment, create a reverse animation. I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s start! The Markup The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second list social will have links to social networks always with a nice animation. As you will see the first list is composed of lines, points and special effect, the latter two are accompanied by an control layer to adjust the delay of the animation. This first part of the CSS will make you understand how all the elements are positioned in the scene, and how to apply the animations. CSS – Normal Animation jQuery Conclusion
Convert a Menu to a Dropdown for Small Screens The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda.
webdesign.tutsplus There's no better way to learn CSS3 than to get your hands dirty on an actual project and that's exactly what we're going to do. I'm going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let's get started on some CSS3 magic! Today you'll be learning how to create the candy cane teardrop out of the many different styles and color variations available. Note: Support for IE is limited at the moment. The Video Tutorial We're offering this tutorial in two different formats today: A video as well as a full written tutorial below. The Written Tutorial The step by step written tutorial is below. Step 1: The Layers The first thing we want to do is create some layers that will overlap each other and stay in place while using as little code as possible. The Code: As you can see the code is pretty straight-forward. Now we'll want to add some styling to each layer one by one. #menu-wrap:
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery
How to Build a Fully Functional CSS3-Only Content Slider Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless. Demo & Source Files View the DemoDownload the Source Files Screenshot Some simple HTML to start with Granted, that looks scary. We have a “content-slider” div, which holds all the content. Then, we have two sections: the “content” div and the “nav” ul. Now, right inside the “content” div, you’ll notice 6 nested divs: “content-inner-1” through “content-inner-6“. The Magical CSS As I said, all we did to the “content-slider” div was center it, and move it 100px from the top of the page. The “content” div styling is very important. Now, the “content-inner” div is what holds all of the pages. Now, we have some generic styling. Here’s the code:
Portfolio Zoom Slider with jQuery In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of […] View demoDownload source In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. So, let’s start with the markup! The Markup For each item we will have a div element. Let’s look at the styling. The CSS The JavaScript
CSS button, 110 best! Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. All of them great looking, with neat effects and really easy to include them in your code. Some people says there’s nothing new under the sun, however, we can always come up with new and exciting ways of apply and use things we already have, so the results will be a mind blower. btn_example{ display: inline-block; padding: 10px 20px; background:#066; border: 1px solid #f3f3f3; you’ll enhance hugely your button. There are many advantages to using CSS only buttons, as no images need to be downloaded, buttons expand to fit any amount of text and it’s easy to alter the size, colour and effects. BonBon Buttons The goal was to create CSS buttons that were sexy looking, really flexible, but with the most minimalistic markup as possible. TypeKit CSS Buttons Pure CSS 3D Button
Animated Form Switching with jQuery In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. […] View demoDownload source In this tutorial we will create a simple animated form switch with three very common forms. We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page. So, let’s begin by creating and styling the three forms. The Markup We will create three different forms, a login form, a registration form and a password reminder form with just one input field. First, we will create a wrapper for all three forms. Then we will add each form element to the wrapper and insert the necessary input fields. Now we will add the login form. And finally, we will add the password reminder form: The CSS And that’s all the style!