background preloader

To check

Facebook Twitter

Coverr - Beautiful, free videos for your homepage. Trianglify by @qrohlf. Aerotwist - Tutorials. How to make a carousel using only HTML and CSS (no JavaScript required!) Recently, I’ve been working on a site that uses a CMS that’s a bit limiting.

How to make a carousel using only HTML and CSS (no JavaScript required!)

I can add my own HTML and CSS to the site, but JavaScript is off-limits. The designs I’m working from included a carousel. I had some ideas of how I could make that work using CSS animations and the transform property, but that would leave me with a carousel that scrolled automatically and didn’t allow for user input which wasn’t really what I was looking for. After some thinking, I eneded up with a solution that uses absolute positioning and the :target pseudo-selector to change the z-index and opacity of our carousel items to cycle through them. It looks something like this: This is the first item Idque Caesaris facere voluntate liceret: sese habere. This is the second item Vivamus sagittis lacus vel augue laoreet rutrum faucibus. And finally, the third Quis aute iure reprehenderit in voluptate velit esse. Let’s build one! The structure <! That’s it for our HTML. The styles And that’s it! Nesting Components. ..or the struggles with contextual styling. — Using CSS components is somewhat straightforward.

Nesting Components

We add the markup and give it the component’s class name and all is good. Where it gets trickier is when we try to nest components. And when they need to be tweaked based on the context. Where should the styles be defined? It’s a question I’ve been asking myself a few times and what this article is trying to explore. Just to clarify before we start, with "CSS components", I mean the small building blocks that get used to assemble a website or app. Ok, best is to go straight into it and look at an example. ES6 In Depth: An Introduction.

Welcome to ES6 In Depth!

ES6 In Depth: An Introduction

In this new weekly series, we’ll be exploring ECMAScript 6, the upcoming new edition of the JavaScript language. ES6 contains many new language features that will make JS more powerful and expressive, and we’ll visit them one by one in weeks to come. But before we start in on the details, maybe it’s worth taking a minute to talk about what ES6 is and what you can expect. WebGL Fluid Experiment. Useful.js: JavaScript examples, too useful not to share. Puzzle Demo — Scriptaculous Documentation. UI elements. A Beginner's Guide to Using the Application Cache. Introduction It's becoming increasingly important for web-based applications to be accessible offline.

A Beginner's Guide to Using the Application Cache

Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache interface gives your application three advantages: Offline browsing - users can navigate your full site when they're offline Speed - resources come straight from disk, no trip to the network. The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. The cache manifest file The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Referencing a manifest file To enable the application cache for an app, include the manifest attribute on the document's html tag: