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

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:

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

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

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.

Examples of Gliffy Venn Diagrams A wireframe is a skeletal outline of the components of your web site so that you can better see the relationships between them. A web site wireframe is a great way to clarify your vision for an entire web development team. Plan your site A wireframe is a great way to ensure clarity and consistency during web site development: it's like creating an outline before detailing the specifics. Everyone on your development team can benefit from the wireframe: During development, the team uses the website wireframe to sketch ideas, verify plausibility, and estimate time and costs for development. Build it, change it, share it Creating a website wireframe is easy with Gliffy's free wireframe tool. Unlike Visio and other expensive, installed software, Gliffy lets you share and collaborate with anyone, on any platform, in any location.

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)

10 Completely Free Wireframe and Mockup Applications Every web designer and developer should have a good and reliable wireframe (mockup or prototype) tool at there disposal. The importance of such a tool differentiates amongst web designers and developers, some use them, some don’t. Personally, I use them. It is in this initial stage of development that makes web design enjoyable, the coming together of the clients needs and your own creative ideas onto a blank canvas, allowing you to plan effectively the visual arrangement of the sites content. The downside is that a good and reliable wireframe application can come at a heavy price, have you seen the cost of a good wireframe application? So, what options do you have? Please note that this post really old, so some of the below apps may not longer be free or available. Hot Gloo – The Online Wireframe App HotGloo is an easy to use and intuitive Flash built web-based wireframe app, that can create conceptual interactive prototypes of a website in the early development stages. Pencil Project

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. So you know your risk before you decide to use jQuery content sliders on your website. 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 Pure CSS3 Content Slider

10 Online Portfolios That Are Sure to Inspire Ready to start planning your portfolio? Check out these inspiring examples of online portfolios done exactly right. Brian Plemons Julien Renvoye Heather Payne Adam Hayes Emily Shields Aaron Robbs Vadim Sherbakov Zoe Rooney Leesa Mealings 10 Online Portfolios That Are Sure to Inspire CSS3 Drop Shadows Generator Why You Should Ditch The Template & Code Your Own Online Portfolio You know you need an online portfolio, so what’s the next step? Find an online portfolio site, choose a template, and go? No way! You’re too original for that. For your portfolio you need something unique–something that will look awesome, not cookie-cutter, and will showcase who you are and what you can do. 1. Think about it: a prospective employer or client is going to see the link to your portfolio on your resume or cover letter and immediately form an impression of you and your skill set by clicking on that link, even before they bother to read the content! 2. 3. 4. Think of templates in that way, at least for your portfolio site. 5. Want to learn HTML and CSS so you can build your own portfolio?

Related: