How i’ve made an ad with HTML5, CSS3 & ZeptoJS
I’ll put here two examples; one of a regular banner and another of an expandable one.
Now when the giants switch from Flash to HTML5, all others did, or will do the same. I personally think this is a good movement for the web, and also for creative agencies because:
- Flash licences were expensive;
- Is now easier to handle with APIs directly in HTML, since they’re on the same layer;
- A frontender can easly turn existing website components into ads;
- HTML/SCSS code is easier to maintain rather than AS/FLA files.
Stack we’re going to use is made of:
- Gulp for handling tasks (i’ll describe each of them later)
- Bourbon, as a SASS mixin library
Public directory will be automaticaly created while it’s content will be generated via grunt tasks — so you don’t have to create it.
You can use custom fonts by placing them inside /resources/fonts
Aa i said earlier, we’re going to use Gulp to simplify our workflow; uglifying, minifying, sprite generation, error hinting, etc; And for doing that, there are few dependencies.
npm and Node JS are required! grab them here; they ar both packed into a single package.
- open your console and go to your directory root
- npm init to generate the package.json file
For those of you lazy enough, i created a gist here; Put it into your root and hit npm install.
For the brave ones …
3. npm install — save-dev gulp gulp-concat gulp-if gulp-jshint gulp-plumber gulp-ruby-sass gulp-sourcemaps gulp-uglify gulp-util jshint-stylish sprity sprity-sass
That’s it! We have our dev dependencies installed.
4. Create gulpfile.js — this file holds the tasks. A gist version here.
5. Bourbon is also a dependency, i use it as a ruby gem; Let’s install it into /resources/scss with bourbon install.
AD #1 — The square
AD #2 — The Mouseover
in progress …