Awesome CSS

A quick post about some very cool CSS you can find online because I was too busy helping build Jane’s Lunch to write an in-depth post. Sorry! In any case, CSS Totoro welcomes you.

Pure CSS Totoro by @jacksaidwhat

CSS is awesome and I don’t even mean it ironically. Sure there are flashier languages, but CSS seems like a lot of fun. You get to see immediate changes to whatever you’re working on and you can make so many cool things with it!

For instance, check out these logos made from only one div tag and some CSS. One of my favorites is this mug:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.mug_animate {
  -webkit-box-shadow: inset 0 -3em 0 0 #2C2C2C;
  box-shadow: inset 0 -3em 0 0 #2C2C2C;
  margin: 0 auto;
  margin-bottom: 1em;
  height: 2.5em;
  margin-top: 1.25em;
  position: relative;
  width: 1.5em;

  -webkit-transition: all 1000ms linear;
  -moz-transition: all 1000ms linear;
  -o-transition: all 1000ms linear;
  -ms-transition: all 1000ms linear;
  transition: all 1000ms linear;
}

.mug_animate:after {
  border: .25em solid #2C2C2C;
  border-right: none;
  border-radius: .75em 0 0 .75em;
  content: '';
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: .25em;
  width: .75em;
}

.mug_animate:before {
  border-radius: 0 0 0.2em 0.2em;
  top: -0.5em;
  left: -0.25em;
  position: absolute;
  border: 0.25em solid #2C2C2C;
  height: 2.5em;
  width: 1.5em;
  content: "";
}

.mug_animate:hover {
  -webkit-box-shadow: inset 0 0em 0 0 #2C2C2C;
  box-shadow: inset 0 0em 0 0 #2C2C2C;
}

You can also create a variety of image filters, which is explained here. You can check it out and start editing all your photos directly using CSS!

CSS