Posts under CSS
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
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.
17 NOV
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
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 propably only suitable for headings. But even then they still display with terrible hard edges.