CLOSE

Categories

Archives

24APR13

Hover shine effect with pure CSS

9 years ago

This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works.

Live demo:

Click Me

Simple HTML markup:

1
<div class="myButton">Click Me</div>

And the CSS:

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
45
46
47
48
49
/* normal button style */
.myButton {
    width: 110px;
    height: 30px;
    background-color:#0099cc;
    text-align: center;
    color: #FFF;
    position: relative;
}
/* button hover style if required */
.myButton:hover {
   
}
/* generated element for shine effect.
 * normal state is semi-transparent
 * white but with zero width. Set no
 * transition here for no mouse-leave
 * animations. Otherwise the effect
 * will play in reverse when your mouse
 * leaves the element
 */
.myButton:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
   
}
/* on hover we animate the width to
 * 100% and opacity to 0 so the element
 * grows and fades out
 */
.myButton:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
21APR13

Windows 8 start screen in HTML, CSS and Javascript

9 years ago

About 7 or 8 months ago I built a tile based launch page at work to launch learning modules which looked similar to the Windows 8 start screen. When I had spare time I kept building on and adding 3D animations to match it even closer to Windows 8. Then I kind of forgot about it until this week when I stumbled upon this article Creating Windows-8-like 3D animations with CSS3 and jQuery which provides a tutorial on creating a similar effect.

I had been meaning to do a post on my laucher when I first started making it but it never happened. So now that that article reminded me I thought I should post it. I am not going to provide any explanations of the code or tutorials but rather just show a demo (It’s HTML and javascript so you can just view the source anyway). I have ripped a bunch of LMS related code out of it and turned it into a web page launcher.

Click a tile to launch an ‘app’ (in this case a website). Hover you mouse over the top or bottom right corner for the ‘charms’ bar to close the site and return to the start screen. I have currently only tested it in Chrome and on an iPad and there isn’t a way to get to the charms bar on iPad yet.

Click to launch demo

17NOV12

JS Transform Handles

9 years ago

The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.

The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.

14FEB12

New Showreel!

10 years ago

I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out. READ MORE

22SEP11

Creating a HTML version of this blog’s header

10 years ago

Update: this post was made when I was using a different blog design. Please view the original swf file here.

Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript.

Luckily jQuery includes a JSON parsing feature and Flickr provides a JSON feed and so it was very easy to get the Flickr feed. The image flipping was done with CSS3’s 3D transforms and so unfortunately it will only work in Chrome and Safari. Now I just need to work out how to get more than 20 images from the Flickr feed (I need 36 to fill the header), and turn the images black and white. I found a jQuery plugin that apparently can apply image effects but I haven’t gotten it to work yet.

READ MORE

23JUN11

Javascript and Canvas wet paint mixing

10 years ago

Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely a lot more work getting and setting pixels with Javascript and Canvas. Check out the demo below. The brush will lag at higher drawing speeds when the size is large. But it if you don’t draw too fast it works pretty well. So far it seems to work best in Safari.

Supported browsers:

  • Chrome (Only tested in Chrome 12)
  • Safari (Only tested in Safari 5)
  • IE9

Note: Doesn’t work in Firefox and haven’t tried Opera

READ MORE

23SEP10

Comparing custom font display with @font-face

11 years ago

This is a little experiment I conducted comparing the way different browsers render custom fonts through @font-face. What I found was that the two browsers that displayed them best were IE8 and Firefox 4 Beta. The worst browsers were Opera and Safari. Opera seemed to make the characters extra skinny, and Safari made the characters thicker. Coming in the middle were Chrome and Firefox 3.6 which displayed the text with the correct thickness but with harder edges than the FF4 Beta and IE8. Have a look at the images below for a comparison.

Chrome

Safari

Firefox 3.6

Firefox 4 Beta

Internet Explorer 8

Opera
21SEP10

The Megahorns Website Refresh

11 years ago

I have just launched a new website design refresh for The Megahorns, a local band from Melbourne. Quite a large band actually with heaps of saxes, trumpets, trombones and drums! The re-design involved building a new WordPress theme from the ground up to incorporate into their existing CMS. The design incorporates graphic elements from their recent and first album ‘Vol One’. I also decided to design a comprehensive custom ‘The Megahorns’ font containing an almost full set of 210 characters for use on the website. All the characters were adapted from the letters ‘megahorns’ on their album cover. This was my first proper font design and I’m pretty happy with it! So check out their super funky music by heading over now to their new website and be sure to check them out live!

21MAY10

Google Fonts API – It’s good and bad

12 years ago

Update 2017/07/17: This post was published a long time ago and a lot has changed since then. Now that font rendering has vastly improved in Browsers Google Fonts is a great choice for web fonts!

Recently Google has announced a new API which allows web designers to use custom fonts in their HTML/CSS websites. This API is great idea allowing designers to break away from the standard Arial/Courier/Times New Roman font families without resorting to images. After hearing about this announcement I headed over to the Google Font Directory to see what fonts were available. But I soon discovered that as good idea this API was, the fonts rendered like crap. The displayed with hard edges and no anti-aliasing, and when getting into smaller sized the text becomes unreadable. I tested the fonts in Firefox and Chrome and they both looked the same, so I can’t say how they look in other browsers. Have a look at the screen shots below to see for yourself (be sure to view them full size), or head over to the Google Font Directory .

As you can see in these images at smaller sizes some fonts are unreadable without anti-aliasing, so for now these custom fonts are probably only suitable for headings. But even then they still display with terrible hard edges.

◂ Newer Posts