Hover shine effect with pure CSS

10 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:

Simple HTML markup:
[cc lang=”html”]

[/cc]

And the CSS:
[cc lang=”css”]
/* 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;
}
[/cc]

Windows 8 start screen in HTML, CSS and Javascript

10 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

Getting all element attribute values with jQuery

10 years ago

Here is a little snippet which I have found extremely useful especially when working with XML in Javascript. You can use the following to loop through all of an element’s attributes and store them in an object:

[cc lang=”javascript”]
var element = $(“#myElement”),
attributes = {};

$.each(element.get(0).attributes, function(i, attrib){
attributes[attrib.name] = attrib.value;
});
[/cc]

So for example if we have the following XML node:

[cc lang=”xml”]

[/cc]

After running the snippet above on the node we can now access the values on the attributes object we created like so:

[cc lang=”javascript”]

console.log( attributes.id ) // item1
console.log( attributes.name ) // the first item
console.log( attributes.image ) // thumbnail1.png

[/cc]

I have found this very useful when I don’t want to hard code XML parsing and I don’t need to know all the values right away.

I hope this is useful for someone else!