Posts under Web Design
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:
Simple HTML markup:
And the CSS:
.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;
}
24 APR
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 |
23 SEP
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!