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.

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. Although they are correct in saying CSS3 can be used now, the decision must still fall to the individual, even if their opinions are based on inaccurate assumptions. In this article I'll try to cover some of the more widely adopted CSS3 advancements, showing you not only how to use them but also the support you will likely expect from the major browsers. Why We Can Use CSS3 Now The arguments as to why we cannot use CSS3 include such things as the specification not being finalised or that some elements of CSS3 are either poorly supported or not supported at all. Vendor Prefixes Vendor prefixes that are in use today are : Examples

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)

SelectNav.js - responsive drop-down menu - pure JavaScript About SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. Inspired by TinyNav.js, it was rewritten from scratch to become jQuery independent and customizable. To see it in action just resize this page and observe the topbar. Features Independent - no external library or other dependecies Ligthweight - only 1.5KB minified and 0.8KB minified+gziped Customizable - to make it suit your needs Compatible - tested with IE 6+, Firefox 3.6+, Chrome 4+, Safari 3+, Mobile Safari iOS 3.2+, Android 2.3+ Browser, Opera Mobile, Opera Mini. Usage 1. <ul id="nav"><li><a href="homepage.html">Homepage</a></li><li><a href="about.html" class="active">About us</a></li><li><a href="contact.html">Contact</a></li></ul> Selectnav.js works with every navigation in form of ul or ol lists that follow the example above. 3. 4. Examples Result

PHPMailer 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

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. The Basics You’re likely familiar with the most basic use of borders. The above code will apply a 1px border to an element. In addition to passing a specific value to border-width, three keywords may alternatively be used: thin, medium, and thick. While it might initially seem unnecessary to ever make use of the long-hand form, there are a handful of cases when it’s advantageous, such as when you need to update some aspect of a border when a designated event occurs. Perhaps you need to change the color of a border when the user hovers over a specific element. A more elegant and DRY approach would be to specifically update the border-color property. Border-Radius Beyond the Basics Multiple Borders

Fluid CSS3 Slideshow with Parallax Effect In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%.

jquery-complexify Websites have a responsibility to users to accurately tell them how good a password is, and this is not an easy job. If your password is 8 characters long and only formed of lower case characters, you need to make it better, perhaps by adding a number or more characters. If your password is 25 characters long but happens to not contain a number, you shouldn't be forced by a password security policy to add one, you clearly have a very secure password. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons. Note: I use the term 'casually' because this is only client-side validation and anyone could turn it off. Complexity Rating Complexify's default settings will enforce a minimum level of complexity that would mean brute-forcing should take ~600 years on a commodity desktop machine. Unicode Try it out: How do I use it? Complexify Ports

Initializr 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:

Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs. Notre feuille de styles de base Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels. L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Rappel : n'employez pas ce reset CSS sans avoir parcouru au minimum les indications laissées dans le code complet commenté. Où placer ces styles? Le plus simple est sans doute de placer ces styles dans un fichier séparé. Bonus

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.

34 Responsive Grid System

Related:  slider