James Ball

How Do You Do, Fellow Kids?

CSS3: Animate Dog Eared Icons

TLDR: View the demo here

The HTML

The html for this is fairly simple. We are going to create a few divs and wrap them inside links.

1
2
3
4
5
<a href="#"><div class="file orange">&lt;&#47;&gt;</div></a>
<a href="#"><div class="file blue">js</div></a>
<a href="#"><div class="file red">rb</div></a>
<a href="#"><div class="file yellow">py</div></a>
<a href="#"><div class="file purple">&lt;?&gt;</div></a>

Creating The Icon

As we are using a link for the HTML we need the CSS to do all the work.

First start off by creating the style for the file classes. This will create a rectangular box with text in the center.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.file{
  background: #b0b0b0;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: bold;
  height: 150px;
  margin: 10px;
  padding: 20px;
  line-height: 160px;
  text-align: center;
  width: 100px;
}

Creating The Dog Ear

Ok, nothing to fancy so far but we still need to create the dog ear for the top right of the icon. To do this we will be using borders to create a triangle which floats above the div using absolute and relative positioning.

One unusual thing about borders is that the browser draws them at an angle. One side of the border is colored for the colour of it’s sides (top, right, bottom, left), and the rest are left transparent. You can set the border width to a higher value e.g. 32px.

1
2
3
4
5
6
7
.border-effect{
  border-color:  red green blue orange;
  border-style: solid;
  border-width: 32px;
  width: 0;
  height: 0;
}

And it will output a shape like this.

Using this technique the left and bottom borders can be set to #888 & the top and right to #fff.

Here we have our shape now all we need to do is place it in the corner of our icon.

1
2
3
4
5
6
7
8
.dog-ear{
  border-color: #888 #fff;
  border-style: solid;
  border-width: 0 32px 32px 0;
  content: "";
  right: 0;
  top: 0;
}

If you want to learn more about border shapes take a look at this post by Jon Rohan.

Moving The Dog Ear

First lets rename our .dog-ear to .file:before. This will make the element appear directly before the and element with the class .file. Now we have our dog ear awkwardly sitting inside of our icon before our text; nobody wants that. To fix this we will make .file-before use the absolute positioning property. The element positioned relative to its first positioned parent element.

1
2
3
4
5
.file:before{
  position: absolute;
  right: 0;
  top: 0;
}

Well now there in the corner of the page, you can fix this by setting .file’s position to relative.

1
2
3
.file{
  position: relative;
}

Adding Some Colour

At the moment all of the elements look a bit drab; add some colour.

1
2
3
4
5
.orange{background:#ff7461;}.orange:before{border-color:#c65b4b #fff;}
.red{background:#ff6161;}.red:before{border-color:#c64b4b #fff;}
.yellow{background:#f4cf77;}.yellow:before{border-color:#cdad60 #fff;}
.blue{background:#8cc8ec;}.blue:before{border-color:#75a8c3 #fff;}
.purple{background:#b094de;font-size: 50px;}.purple:before{border-color:#8a75ad #fff;}

Animating The Icons

Now we have our icons finished, but they don’t do anything when you interact with them. We can use CSS3 transitions and transform to animate the shape when the user hover and clicks it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* This will reset the dog ear to make it look like it has unfolded. */
.file:hover:before{
  border-width: 0;
}

/* This zoom into the icon when you hover over it. */
.file:hover{
  transform: scale(1.05);
}

/* This zoom out the icon when you hover over it, then click. */
.file:hover:active{
  transform: scale(0.95);
}

Now for the finishing touch: transitions.

1
2
3
4
5
6
7
8
9
/* Don't forget to specify which properties you want to animate and avoid using "all" */

.file:before{
  transition: border 0.2s;
}

.file:hover{
  transition: transform 0.2s;
}

Now you animations will smoothly transition between one state to another.

The Final Product

View the demo of what we have just created.

Octopress: Custom 404 Page

Open up config.ru from the root directory and update the sinatra not_found route to the following:

config.ru
1
2
3
not_found do
  send_sinatra_file('404')
end

This will redirect to http://yourdomain.com/404/ where the page is found, but we still need to create a page.

To do this use rake new_page[404]. This will create a new file named index.markdown in your /source/404 directory:

404/indexlink
1
2
3
4
5
6
7
8
9
10
---
layout: page
title: "404 Error"
comments: false
sharing: false
footer: false
---
Whoops, the page you’re looking for cannot be found.

Maybe you can find what you are looking for in the [archives](/blog/archives/).

View my 404 page here.

Test Post Please Ignore

Looks like I have successfully imported my previous posts from Wordpress and deployed Octopress.

helloWorld.c
1
2
3
4
#include <stdio.h>
int main() {
printf("Hello World!\n");
}

Workflowy: Organising My Brain

Basic Features

To use Workflowy simply type right on the screen. Write some text and it turns into a bullet point. You can add more bullets and nested bullets, as well as a note which appears underneath attached bullet in a lighter colour.

Bullets can be marked complete, export, copy, and delete any bullet by accessing the bullet menu by clicking on its bullet.

Freemium

You can sign up for Workflowy for free, but the free version has some limitations. It only allows 500 lists or bullets per month, two choices for typeface (serif and sans serif), and no theme support.

Pro accounts, on the other hand, can be backed up to Dropbox, contain an unlimited number of lists, and have a range of options in themes and typefaces. The Pro account costs $4.99 per month or $49 per year.

Pros

  • Deeply nested lists to categorize information
  • Hiding complete tasks
  • Collaborative editing with other users
  • The ability to embed other lists into your lists
  • Filter through lists with #tags, @filters and full text search
  • Keyboard shortcuts

Cons

  • Lack of some useful features such as due dates, deadlines, flags, and calendar integration
  • Dropbox backup and password protection requires a Pro account
  • Limited support on some older browsers and devices such as Windows Phone 7.8 and lower
  • Pro version is only worth getting if you write over 500 bullets per month

The Bottom Line

Workflowy is a great webapp for creating nested-lists and collaborating with others. With is simplistic design it is easy to use but lacks some useful features.