background preloader

A Pure CSS3 Cycling Slideshow

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.” Related:  CSS Inspirationen

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. 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

CSS3 Structural Pseudo-class Expressions Explained You probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression. The keywords and the integer are pretty straightforward. A value of “even” or “odd” selects the even or odd elements, respectively, and an integer selects the nth of the targeted element. The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little. Expression Syntax The basic syntax for a pseudo-class expression looks like this: li:nth-child(an+b) { /* styles here */ } Except for the “n”, the above is not valid, but serves to illustrate the expression in algebraic-like notation. What is the “b” part? What is the “a” part? What is the “n” part? Some Real Examples Expression: 4n+2

How to Design a Horizontal Accordion (Plus an Exclusive Freebie!) Today we're going to walk through the creation of your very own horizontal accordion together with an exclusive bonus - a light version of the very same accordion we'll be creating today. Accordion’s are great for showing off your favourite images, posts, or perhaps compacting a product feature tour. If you’re going to add a little pizazz to your accordion, you should take a look at SlideDeck – mega simple to work with. Note: Accordion Layer Setup During the course of this tutorial there will be references to different layers and layer groups - this can be a little confusing. As a reference, below is an image of the final layer groups used just in case you get a little stuck :) Step 1 Creating the Background Open up Adobe Photoshop and create a new document with the following settings: 1100x490 pixels, 72ppi, and a white background. Using the Rectangle Tool (U), create a rectangle that covers the entire surface area of the canvas. Amount: 1%Distribution: UniformMonochromatic: Yes Step 3 Step 4

Quick Tip: Digital Color Meters for Figuring Out Online Colors Let’s say your client just emailed you his photo. He tells you he wants you to use the same blue in his shirt for the background of his website. One way to approach this challenge is to use a handheld color meter. Or you could hold color chips with CMYK/RGB values against the screen. The first method is exorbitantly expensive. The best solution is to use a computer-based color meter that allows you to read color values on your screen. DigitalColor Meter for Macintosh If you own a Mac and use OS X, you already have that solution. If you haven’t moved DigitalColor Meter to a different folder, you’ll find it in Applications > Tools. To use DigitalColor Meter, move your cursor over the color you’re interested in and read out the RGB color values. PC/Windows Options If you’re running Windows on a PC, Eyedropper is a free application that offers the same functionality as DigitalColor Meter. You can download Eyedropper here. How to Make Money as a Social Media Marketing Expert Click to Rate:

LAB! - 3D it! Using CSS 3d to make every website into 3d(kind of). It is a bit buggy but you can bookmark the script to your bookmark bar and have some 3D fun on any websites by one single click! The get offset function is not accurate, it looks weird then the div is too large but it looks alright on most of the sites. Control Change the parameters and see the preview of your customized 3d script: Credit Myself: @EdanKwan Control Panel: dat-gui Images: Cristiano Galbiati, Vivi Rindom, Subhadip Mukherjee, joeymc86 Web Font: Open San by Steve Matteson Comment

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

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. We’ll use radio buttons and sibling combinators for controlling which slide is shown. 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 The styles of the inputs and the labels: … and the sp-parallax-bg div:

Inspiring CSS3 Animation Demos Since the introduction of CSS3, there are really a lot of hot debates revolve around its possibilities and usability. However, there are also a lot of interesting experiments hand-crafted to explore its potential. Though the experiments by any mean do not prove the CSS3′s usability, they really showed the true possibilities of CSS3, to a degree that major developers believe the CSS3 is the future. Is that true? Judge it with your eyes. Enough said, let us explore the fantastic world of CSS3! You may also be interested in: You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Animated 3D Helix First one in the list is an incredible animation made by, using CSS3 3D transforms. Animated Buttons A must-see for web designer, as the demo not only shows the possibilities of CSS3 animation, but also provides very cool and practical button effects for inspiration! Animation Menus AT-AT Walker Battlefield CSS3 Big Deal

Understanding Typographic Hierarchy One of the most important techniques for effectively communicating (or “honoring”) content is the use of typographic hierarchy. Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text. “Typography exists to honor content.” - Robert Bringhurst: The Elements of Typographic Style A Simple Example Let’s look at an example of content with and without a designed hierarchy. The image below is a list of concerts playing at the outdoor venue down the street from my house. Ok, so maybe I’m being dramatic in the example, but we can make this much easier. Hierarchy and the Web It should be pointed out that when designing for the web, there’s another layer to take into account. Size

Demoing and displaying JavaScript at the same time using CSS Tuesday, May 8th, 2012 at 12:53 pm When writing documentation or doing examples you constantly run into the same issue: how do you display and demo the code at the same time? You don’t want to have a code display and live code as they will get out of sync (on the other hand I always found that when copying code into a document I also cleaned it up and optimised it). The easiest way for this are all the “new” services like JSFiddle, JSBin, Dabblet, and others (there seems to be a new one every month now) and you can even embed them into other documents, but it means you need an iframe and load content from another service (which might go down or get forgotten in the future). The other way of course is to use Ajax/JavaScript to load the code into the page. I was wondering how you can simply demo and show inline JavaScript in a document without needing any extra libraries. However, you can do a simple demo and display of the same script much easier these days using CSS.

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.

Using the LESS CSS Preprocessor for Smarter Style Sheets Advertisement As a Web designer you’re undoubtedly familiar with CSS, the style sheet language used to format markup on Web pages. CSS itself is extremely simple, consisting of rule sets and declaration blocks—what to style, how to style it—and it does pretty much everything you want, right? You see, while the simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. Enter the CSS preprocessor. What’s the difference? If It Ain’t Broke…? By now you might be thinking, “So what? In this tutorial, I’ll be using LESS to demonstrate how CSS preprocessing can help you code CSS faster. I’ll start off by explaining how LESS works and how to install it. Let’s go! Installing It There are two parts to any CSS preprocessor: the language and the compiler. Many different compilers are actually available for LESS, each programmed in a different language. Using the JavaScript compiler is extremely easy. That’s it. 1. 2. But that’s not quite it. 3. 4.

Related:  Web Design