background preloader

CSS3 Responsive Slider / Carousel Using Radio Buttons

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.

http://csscience.com/responsiveslidercss3/

Related:  CSS InspirationenFront-end Development

A Baseline for Front-End Developers 12 Apr 2012 edit I wrote a README the other day for a project that I'm hoping other developers will look at and learn from, and as I was writing it, I realized that it was the sort of thing that might have intimidated the hell out of me a couple of years ago, what with its casual mentions of Node, npm, Homebrew, git, tests, and development and production builds. Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. We measured our mettle based on our ability to wrangle IE6 into submission or achieve pixel perfection across browsers. Many members of the community -- myself included -- lacked traditional programming experience. HTML, CSS, and JavaScript -- usually in the form of jQuery -- were self-taught skills.

Super Sweet CSS 3D Text Effects With Sass and LESS I was recently discussing the merits and various features of CSS preprocessors with a colleague. We covered all of the basics: how it’s great to have variables and how mixins can save you an incredible amount of coding time. When the conversation turned to some of the more obscure features though things got interesting. When I brought up the various color operations, my colleague boldly proclaimed that no “real designer” could ever find a legitimate excuse for using this feature and not picking his own colors manually.

The No-Pressure Introduction to CSS3 It's difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior.

3D FishBirds « jonahgoldstein.com You aren’t seeing the magic above because your browser doesn’t yet support 3D transforms. Try using Chrome or Safari. Katrina recently was part of a panel on mixed-race identity at the Brooklyn Historical Society where she spoke about her project, FishBird . While discussing ways to remount the piece and additionally create a rich, digital component to accompany it, I began tossing around visuals. I couldn’t really get the idea of the wooden blocks out of my head.

6 Pure CSS Content Slider Alternatives to JavaScript jQuery content slider is perfect for any kind of website to display their featured works, articles or product, its really easy to use and creates beautiful slider effects without getting your hands dirty with code. There’re so many great tutorials out there teaching how to create a content sliders with jQuery. But before you decide to use jQuery content sliders, you also need to consider how many of your users are browsing your site with JavaScript disabled through analytics tools. Usually, 1%-3% of your site visitors have javascript disabled, It seems like some low numbers?, keep in mind that small percentages of big numbers are also big numbers.

Retina graphics for your website How it works There are now 4 ways to use retina.js: Automatically swapping out "src" paths on "img" tags. Automatically swapping out background image URLs in inline styles. Manually specifying the location of a high-res image variant. 3D Gallery with CSS3 and jQuery Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. View demo Download source With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.

CSS Refreshers: Borders Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about! Not only can CSS3 be used to create rounded corners, but plain-ole' CSS can also be wrestled into displaying custom shapes. That’s right; in the past, before these techniques were discovered, we might have resorted to using absolutely positioned background images to display circles or arrows. Pure CSS3 accordion – Red Team Design A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve cool results. Today you'll learn how to create a pretty simple animated CSS3 accordion with its help. View demo What is an accordion If you're designing with usability in mind, then an accordion can be very useful when willing to organize content. The main advantage is packing a lot of content in a reduced space.

A Pure CSS3 Cycling Slideshow Advertisement Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. Sections of This Article Web Design 2014: What to Watch Out For This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.

CSS transitions & media queries Posted on 31 May 2011 • 14 comments While coding up the site for our Insites Tour, I happened across an accidental feature: a smooth transition on growing / shrinking type and image sizes when I resized the browser window. This isn’t particularly groundbreaking and has probably been put into use by others, but as I personally haven’t seen it used elsewhere on the web, I thought it’d be good to make a note of this happy accident. The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize? A note about relative sizing

10 Pure CSS3 Image Galleries and Sliders There are hundreds upon hundreds of Javscript based image gallery/slider plugins and techniques you could choose from, all offering something different, all of them offer a whole lot of interactivity and most are relatively easy to use and install. So, the question is, why would you even consider a pure CSS alternative? Because CSS3 is AWESOME. Its moving at an amazing rate of knots, with new techniques and fresh ideas being published almost every day, pushing its own boundaries ever further, lessening our reliance on Javascript.

Related:  Slide Responsiveslideshow