Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2

CSS Differences in Internet Explorer 6, 7 and 8 - Smashing Magazine Advertisement One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This article does not discuss: Any item that is not supported by any of the three browser versionsProprietary or vendor-specific CSS Example

Bring Your Forms Up to Date With CSS3 and HTML5 Validation Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message We want to make sure the user is entering the information correctly. Let's get an idea of what we want our form to look like by creating a rough mockup. As you can see, the following elements make up our form: Form Title Required fields notification Form labels Form inputs Placeholder text Form field hints Submit Button Now that we've specified which elements make up our form, we can create the HTML markup. Let's create our basic HTML markup from the form concept we created. Up to this point, our HTML file will still appear blank in the browser. Let's add some typographic styles to our form elements:

How To Support Internet Explorer and Still Be Cutting Edge - Smashing Magazine Advertisement Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers. But how do we actually do that? How do we create websites that are up to date with the latest coding techniques but that are also usable for people experiencing the Web on Internet Explorer? In this article, we’ll see what measures we can take to provide a good experience for IE users but keep moving on. Also consider our previous articles: The Content Is What Matters Jeffrey Zeldman once said, “content precedes design. Using CSS3 doesn’t mean we should forget about older browsers and lock visitors out of our websites. This doesn’t mean we should quit the fight to eradicate IE6 either. YouTube and Twitter warning messages for IE6 users And remember: each profession has the duty to educate those who are not familiar with their trade. When we create a new website, we do it in steps. Resets

CSS Reset CSS3 Solutions for Internet Explorer - Smashing Magazine 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

25 CSS3 Transitions and Animations Effects Tutorials Advertisement With the current and updated CSS3 transitions and animations, web developers have better options during the web development process. In fact, there were superseded techniques since the aim is to make the building of sites, easier, efficient, and faster. There are handfuls of advantages with the aid that CSS3 transition tutorials provide, especially to novice webmasters. This allows better experience not just to the person who is in charge in designing, and developing of website, but this is also a learning process. The primary benefits can be seen on the site itself where it can interactive, and interesting since the browsing experience that the users or visitors of the site will be remarkable, compared to the typical look of most of the websites online. Pseudo-Elements Animation and transitions It is easy and simple to customize your animations. Simple Icon Hover Effects It comes with CSS for animation and transitions for your website. Caption Hover Effects CSS3 Bounce Effect

CSS3 PIE: CSS3 decorations for IE Smooth scrolling back-to-top link • Dreamdealer With jQuery it's very easy to create a smooth scrolling back-to-top button on your website. Add a button on your page, somewhere near the bottom of your page. My back-to-top button is visible when you scroll down more than 800 pixels and it stays in the viewport due to a stay-in-view-script I wrote. Anyway, add a button: Select code < a href = "#top" class = "toTopLink" >< span > Jump back to top < / span >< / a > And style this button. But all the magic happens in a simple and clean jQuery function: The magic happens in the formula that sets the animation speed. But with this formula, it takes the current scroll position and devides it with three to ensure a smooth and steady scroll speed, no mather where you are on the page. Play with the subdevision to get faster or slower scrolling speeds. There's one extra part to this script and that's the show-when-scrolled-further-than-x-pixels script. The function also has a fallback, because of the #top anchor in the link. What goes where?