Skip to main content

Fun with Html 5 transitions

A very easy enhancement for html 5 is CSS3 transitions. These are extremely easy to do. A lot of the tutorials accomplish some pretty big tasks that would normally be handled with quite a bit of javascript. However, some of the things that get overlooked are some of the small, simple details. Even a nice fade effect for showing and hiding something.

What I've done here on the site is that all links transition from a white border (that you don't see) to animate an underline and color shift.

Note that the transition animation is set to animates "all" properties, employ a 0.35 second animation time, and use ease-in-out for easing.

The CSS for the normal links:

  1. * a {
  2.   color: #2c92b7;
  3.   text-decoration: none;
  4.   border-bottom: 1px solid #FFF; 

Updated projects

I've updated my projects page to include my complete projects.

A board game in MVVM Part 5 - Additional Enhancement and Source

This is a continuation of my experience creating a quick board game in silverlight 5
Original Post
Part 1 - The Model
Part 2 - The AI
Part 3 - The View
Part 3b - Commands and Converters
Part 4 - The ViewModel
Play the Game

This is my final post in the series regarding viking. This is the unveiling of the final source code, fully commented along with a few extra enhancements that I've made to it.

One of the things I felt it really needed was some form of additional animation to indicate better what move was just made instead of pieces simply appearing/disappearing. What I did was to use an attached behavior. Behaviors and Attached Properties are extremely useful when it comes to trying to keep to MVVM. It not only keeps that extra code out of your UserControl's code-behind, but also allows the functionality to be reused.

A board game in MVVM Part 4: The ViewModel

This is a continuation of my experience creating a quick board game in silverlight 5
Original Post
Part 1 - The Model
Part 2 - The AI
Part 3 - The View
Part 3b - Commands and Converters
Play the Game

In MVVM the viewmodel mediates between the view and the model exposing the model or encapsulates interaction with the model that the view requires but shouldn't be performing on its own such as the user interaction.

The way I created the ViewModel here in Viking is fairly simple. It creates and exposes the main Game object to the view, and tells the game object when the user is trying to perform an action. Aside from that, it's dedicated to the user interaction. In the case of Viking, it's primary user interaction comes into play when the user:

Viking is now published as a facebook app!

Click here to play!