Responsive images using CSS3 Future CSS implementations should allow for some form of responsive images via CSS alone. This is an early idea for how that might be done. However, a significant drawback is that it would not prevent both “mobile optimised” and larger size images from being requested at larger screen resolutions. Note that the CSS presented here is not supported in any browsers at the time of writing. This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function. The principles are basically the same as those underpinning Filament Group’s work on Responsive Images. Using CSS @media queries you can target devices above certain widths. CSS3 generated content allows you to replace the content of any element using the content property. By combining the content property with the CSS3 extension to attr(), you will be able to specify that an attribute’s value is interpreted as the URL part of a url() expression. Fork the Gist
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? CSS3 drop shadow Until a while ago, web developers were forced to learn Photoshop or count with a trustful graphic designer to help them with things like shadows, gradients and stuff, this because there was no method to create these elements directly on CSS. Then the world saw the release of CSS3 with its fantastic features, which included of course making shadows. On this post we have gathered a big list with some of the best resources to let you know a little bit more about CSS3 shadows, you will find useful tutorials, great plugins and code examples, shadow generators and a few extra links. Our best of the best Without wanting to sound pretentious, we’ve just released a fantastic (and FREE) CSS3 shadow generator in ThemeShock, the tool incorporates tons of features and great accessibility to help you make the most astounding shadows with CSS only. Open CSS3 Shadow Generator Open CSS Text Effects Generator Tutorials Advanced pure CSS3 boxes without using images Box-shadow: shadow effect on elements in CSS3
Creating a Volume Controller with jQuery UI Slider If you are a freebies hunter, chances are you have downloaded lots of PSD user interfaces (UI). Some of them are truly amazing and could save our time by prototyping the design we were working on. In this post we will code a PSD UI and turn it into something more functional. However, please take note that this tutorial is intended for intermediate levels of experience. All right, now let’s get started. Step 1: the jQuery UI We obviously need the jQuery and the jQuery UI Library, and we have two option to utilize them. But since we will only be working on it offline, we will be using the second way instead. We will download and customize the jQuery UI library from the official download page. Step 2: HTML markup The markup for the slider is very simple, we wrapped all necessary markup – the tooltip, the slider, and the volume – inside an HTML5 section tag. Step 3: Install the Slider UI The snippet below will install the Slider on the page, but it applies only the default configuration. Slider
How to create slick effects with CSS3 box-shadow – Red Team Design Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips
Progress Bars Design Inspiration - 46 Lovely Examples Progress bars have once been very popular on the internet and you used to see them on a lot of sites at that moment exclusively for loading a site. Since then, designers avoided them a lot, until, once again they became popular. Nowadays, they are not used only for loading a site, but rather an inner page, a video, a song or various other purposes. The new rise in popularity is also caused by the use of jQuery and CSS3 which are making these really cool design elements easy to code and implement within a site without using Flash and causing the site or page to load incredibly slow. Enjoy these 46 lovely progress bars and subscribe to the site via the social media accounts if you want to see more design inspiration like the article presented here.
JavaScript Tutorial: Adding Rotating Images to Your Web Site Sometimes a single image just isn't enough to showcase all that you want to promote on your site. If you've ever wondered how some sites get several images to rotate and you'd like to do that yourself, well, wonder no more. I'm here to show you how it's done. Also, as an added benefit, I will show you how you can update your images in one location and have those updates appear globally on your site. Let's say you have a cooking site, and you want pictures of the five most recent meals that you've featured to rotate in the banner. Or, let's say you have a real estate site and you want pictures of your 10 most recent listings to rotate in a specific spot on all of your pages. First, you need to get organized. Second, collect all of the links that you want associated with the images and save them somewhere convenient so you can copy and paste them later. Third, you need to paste the following into the header for each page you want the image rotator to appear: That's all there is to it.
Sexy CSS3 menu – Red Team Design One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way. In today's article, you'll learn how to create a good looking menu using some CSS3 magic. View demo The idea If you are a web developer you may have heard of tools called CSS pre-processors. While visiting LESS's site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only. LESS download button - at this time The HTML <nav><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Categories</span></a></li><li><a href="#"><span>About</span></a></li><li><a href="#"><span>Portfolio</span></a></li><li><a href="#"><span>Contact</span></a></li></ul></nav> Pretty clean, except for the span element. The CSS Removing the default list styles Style the proper links Multiple CSS3 properties were used to create the above.
Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.
Designing for WordPress: Complete Series & Downloads Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme. Part One: Download, Install, "Reset" Theme Video PageDirect Video Download (.mov) Part Two: Structure Video PageDirect Video Download (.mov) Part 3: Finishing Touches, Extra Stuff Video PageDirect Video Download (.mov) Download - "Personal Homepage Theme" I figured I might as well call it what it is! I literally designed this for use on my personal site, so you can see it live on chriscoyier.net. Download Theme Note: The orginal Photoshop file is included in the download in a folder called "orig" in the theme folder. In case you don't already know. Share On