Super-simple Geolocation

Image by deeminllama: http://fc08.deviantart.net/fs45/f/2009/086/a/3/you_are_here_by_deeminllama.jpg

“Remember, no matter where you go, there you are.” ― Buckaroo Banzai

Over the past several years mobile devices have brought us a lot of new great features and capabilities, things that people now are starting to expect from computing devices. Features like touch-capability, then multi-touch, GPS to tell where the device (and user) is, motion- and light-sensing, device orientation, access to the device’s camera, and even more. Wouldn’t it be great if web developers had access to all of those amazing new device features? Well, some of that is possible right now.
Continue reading “Super-simple Geolocation”

A simple crossfading slideshow made with CSS

“Simplicity is the ultimate sophistication.” ― Leonardo da Vinci

One of the great things about the current web design landscape, compared to a few years ago, is that now it’s possible to create things with just HTML & CSS that you would have in the past needed to use JavaScript or even Flash to accomplish. One example of this is a simple image slideshow, a set of images that automatically rotates every X seconds, often with a caption for each image, like the one below (mouse over for caption).

class-header-css3
CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
class-header-semantics
Semantics: Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
class-header-offline
Offline & Storage: Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
class-header-device
Device Access: Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
class-header-connectivity
Connectivity: More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
class-header-multimedia
Multimedia: Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
class-header-3d
3D, Graphics & Effects: Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.
class-header-performance
Performance & Integration: Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

Images and captions are from the W3C

Wait, how is the transition happening automatically, without JavaScript?

Thanks for asking. It’s accomplished through the magic of CSS keyframe animation (Also see: An Introduction To CSS3 Keyframe Animations by Louis Lazaris for an introduction). If you’re already pretty familiar with CSS animations, then go read this article by Lea Verou and see if you don’t learn something new :-)
Continue reading “A simple crossfading slideshow made with CSS”