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. Related:  CSS InspirationenFront-end Development

Pures CSS3: Ein schicker Content-Slider ganz ohne JavaScript Vieles, was bisher nur mit Flash oder JavaScript möglich war, lässt sich mittlerweile mit purem CSS3 realisieren. Heute zeige ich einen schicken Contentslider, der ausschließlich mit HTML und CSS3 umgesetzt ist. Möglich machen dies CSS3-Animationen und -Transitions. „The Pure CSS3 Content Slider“ The Pure CSS3 Content Slider ist ein experimentelles Projekt, mit dem sich jeder sehr schnell einen schicken Content-Slider zusammenstellen kann – ganz ohne JavaScript. Herunterladen und loslegen The Pure CSS3 Content Slider steht in einer Zip-Datei verpackt zum Download bereit. Der HTML-Aufbau des Sliders ist sehr simpel. Zusätzliche Funktionalität Neben der Liste mit den Inhalten gibt es noch drei zusätzliche DIV-Elemente, die den Content-Slider um einen Fortschrittsbalken, ein Overlay und eine Pause-Grafik erweitern. Content Slider mit Überschrift und Pause-Grafik (beim Darüberfahren mit der Maus) Wenn man mit der Maus über den Slider fährt, bleibt der dargestellte Inhalte stehen. (dpe)

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. Something has changed in the last couple of years. Whatever it is, I think we're seeing the emphasis shift from valuing trivia to valuing tools. JavaScript This might go without saying, but simply knowing a JavaScript library isn't sufficient any more.

TouchTouch – A Touch Optimized Gallery Plugin Martin Angelov I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. Highlights Smooth CSS3 animations and transitions;A responsive CSS interface that fills the screen and responds to changes in device orientation;Preloads photos only when they are needed;Supports swiping through photos;Displays onscreen arrows and listens for arrow key presses on desktop browsers; TouchTouch relies entirely on CSS3 for animations, which means that transitions are extra smooth on mobile devices (naturally, this also means that you won’t see any on older browsers). On the desktop, you get that same responsive interface and smooth animations. jQuery touch-optimized gallery How to use Using it is simple. After you do all of this, simply call the gallery as a regular jQuery plugin: $(function(){ $('#thumbs a').touchTouch(); }); Presenting Bootstrap Studio Learn more by Martin Angelov

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? Alternatively, you can create a content slider using pure CSS, it means this will work with any web browser that has JavaScript disabled. The Pure CSS3 Content Slider How to Build a Fully Functional CSS3-Only Content Slider A CSS3 image slider that works in Internet Explorer Pure CSS3 Content Slider Simple content slider Create a jQuery Content Slider Using Pure CSS

Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute

Slideshow with jmpress.js Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: The background color classes will be applied to the previous wrapper. The steps will have the following style: Inactive steps will have 0 opacity. The inner parts of the slides will have the following style:

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 To get a solid sense of the process from beginning to end, below is an outline of the article. Screenshot of the pure CSS3 cycling slideshow. 1. To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. Basic Concepts of CSS3 Transitions Normally when you change a CSS value, the change is instant. We can use four transition properties: At the moment, CSS3 transitions are supported in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ and IE 10. The W3C has a list of all “Animatable Properties.”

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. Solutions to the Slicing Problem Anyone who has been doing web design for longer than a few years has undoubtedly faced the problem of the gap between design and front-end development. Designers live in tools similar to Photoshop or Sketch, and developers live in their text editors. This common workflow has seen many attempts at a solution, including things like SiteGrinder, Dreamweaver, and more recently Adobe Muse. These tools will greatly benefit from the fact that web design trends have adopted flat colors with very little texture and predictably repeated elements. What you won't see yet: automatic JavaScript You won't see a good "WYSIWYG"-ish JavaScript implementation for anything beyond basic configurable widgets. Significantly Fewer Graphic PNGs

touchSlider jQuery Plugin | MobilizeToday touchSlider — is a free CSS accelerated jQuery plugin optimized for desktop and mobile browsers. It can be used for sliding images and content. Features are listed below: Cross-browser support, desktop and mobile CSS accelerated Multipurpose options Responsive layout Ready for images and content Callback functions support Compatible with: Apple iPad, iPhone and iPod Touch Android Phones and Tablets BlackBerry 6+ Windows Phone 7 Google Chrome Firefox Safari Internet Explorer Opera The plugin detects if browser supports CSS transitions, resulting with 3 possible options for animation: Automatic (3D CSS transition is used if detected) JavaScript (jQuery methods will be used for animation) No Animation (slider will work with no animation, useful for browsers with poor support of JavaScript like BlackBerry OS 5) touchSlider has three available modes for sliding: Fixed value scrolling. Parameters Usage Examples

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. Turn Your Images Into Polaroids with CSS3 This technique uses a combination of browser-specific CSS (2 and 3) integration and some basic styling to turn regular old images into cool looking Polaroid style images—with no additional markup to show the text. Sliding CSS3 Transition Image Gallery This tutorial will show you how to create a "slide" effect image gallery using CSS3 transitions. CSS Transitions – Throwing Polaroids at a Table CSS Polaroid Photo Gallery CSS Polaroid Photo Gallery » View the Demo » Tabbed Image Gallery with CSS3 Transitions In this tutorial you are are going to create a tabbed animated image gallery using some CSS transitions.

Improve the payment experience with animations Animations add context This transition shows how an animation can be useful for the user. It becomes clear that we ask for their phone number as part of the Remember me step, that the phone input shows up because of the action you took (checking Remember me). Shake shake shake When building a form, it’s easy to overlook how errors are experienced by the user. Sleight of hand Animations can be a good tool for making users perceive things as faster than they really are. Button transitions Subtle animations are my favorite. When the user clicks “Pay”, a spinner briefly appears before we show the success state. Bonus round This animation is a bit superfluous, in that it could be removed without breaking the flow — which contradicts the general premise of this article. I tend, like most others, to not trust websites that feel like they were made 10 years ago.

Rhinoslider: The most flexible jQuery slider/slideshow 30 Pure CSS Alternatives to Javascript With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all. The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used. Having said all that, we are in no way saying that these techniques are in anyway better than there Javascript equivalent, just an optional alternative and as a proof of concept. In this article we have concentrated on showing as many varied CSS techniques that cover the full spectrum of web site interactivity, thus we have intentionally minimized the number of pure CSS navigation methods, of which there are literally hundreds. CSS Image Map CSS Image MapDemo Pure CSS Timeline