It’s Time to dig Into Preprocessors

With less then 50 days left of the year I’ve set up a new goal. It’s time to start digging into preprocessors, in this case I’ve choosen Sass with Compass and my goal is to be able to create a decent demo by the end of the year. I’ll try to devote as much time as possible, but to be honest I’ll most probably not have the time to code every day. But that’s not the point really, the main reason is to learn something new and having this goal is a great start.

What I’ve done so far …
I used the Terminal (OSX) to set things up, but in retrospect, I realize it might of been smarter to use an application instead. Basically because I’m not comfortable with the Terminal and even if it’s fairly easy with the help of a guide, the application alternatives sounds more efficient. But hey, I got things up and running and that’s the main thing.

Besides this, I’ve been reading through the Sass Documentation, fiddling around with some code examples, basically just to get a grip of what it’s all about.

It’s now 48 days left …

How to maintain the end state in a CSS Animation

One thing I’ve noticed is that when it comes to CSS Animations a commonly asked question is how to stop a CSS animation at the end state. So I thought a short blog post answering that question might be helpful. The following demo shows a div moving from left: 25px; to left: 300px;. Once it’s complete, it returns to its initial state.

Update 2015-05-21
Chrome 43 now lets you use CSS animations without the -webkit prefix.

Demo

HTML

<div class="movingbox"></div>

CSS

.movingbox {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    background: #222;
    border-radius: 5px;
    -webkit-animation: move 5s ease-in-out; 
            animation: move 5s ease-in-out;
}

@-webkit-keyframes move {
    100% {
        left: 300px;
    }
}

@keyframes move {
    100% {
        left: 300px;
    }
}

Now, let’s say that we want the animation to stop at 100%, persisting the div at left: 300px;, how would we do?

Easy, just add animation-fill-mode: forwards; and the final property defined in the last keyframe rule will be maintained.

In this case, like this:

-webkit-animation: move 5s ease-in-out forwards;
        animation: move 5s ease-in-out forwards;

Here’s an updated demo.

And that’s it, hope this helped!

Web Development Tools and Resources

First of all, I’m not a web developer, at least not professionally. But I spend a lot of my spare time digging into code. I do this for two reasons.

1) I work in the eCommerce industry with Conversion Rate Optimization, Analytics, SEO/SEM, WCM and other Marketing and Sales related tasks. This means that a lot of the decisions I make, most probably will affect a web developer in the end, so the least I can do is to understand their reality as much as possible, which hopefully leads to a more efficient process where we minimize the risk of misunderstanding each other.

2) It’s also really interesting and fun, which of course makes it easier to find the time for it.

With that said, I thought that a post with the most common resources that I use might be interesting.

Mozilla Developer Network
A wiki and great resource containing courses, demos, blog posts and more …

Codecademy
Interactive courses covering a lot of different languages. I’m currently going through the JavaScript parts which are educational and challenging.

StackOverflow
StackOverflow is a gamification based Q/A site for programmers. Whether you’re answering, asking or just browsing through the questions you’ll learn something new. My favorite resource!

Can I use
If (when) you need to know the browser support for a specific HTML5 or CSS3 feature caniuse.com has you covered. This is a great site and it’s always up to date.

CodePen
A web based text editor where you can share what you’ve created with others. It’s also a great website if you just want to get inspired. It’s packed with brilliant and amazing demos!

JSFiddle
This is also a web based text editor. I use it for building small code snippets and when I need to share code with others, in general when I need help figuring out a bug (or two).

Update 2013-10-20
ColorZilla
Realized I should add this site as well. A clever, useful and easy tool for generating gradients.

There are of course tons of other websites and resources out there, but these are the ones I use on a daily basis.

Animated Submit Buttons

One of my pens was featured under Editor’s Picks on CodePen the other day. As a result, the pen got a lot of views, hearts and it’s been added to a various number of collections. So given this, I thought that a tutorial on how I created this pen could be a great opportunity for me to start blogging and hopefully there’s someone out there who’ll enjoy to read how the buttons were created.

So here it goes. My first blog post and my first ever tutorial.

Browser support:
Chrome 27+, Safari 5.1+, Firefox 21+, IE10+ and Opera 15+

OK, before we jump into the code I’ll briefly explain what we want to achieve. The demo contains two buttons, but I’ll only walk you through how one of them was created. There isn’t much to say about the design, since it’s not vital for the demo to work. Focus will instead lie on how I created the text-transition that appears when the button is clicked.

Please note that I am using un-prefixed CSS properties.

HTML
There isn’t much to say about the markup other then that you should notice how the flip div is wrapped around the submit and sent classes. The reason for this is simple. The effect we want to achieve when the button is clicked is to perform a “flip animation”, and this will be achieved by rotating the flip div 180 degrees around its x axis.

<div class="wrapper">

<div id="btn1">

<div id="flip">

<div class="submit"><p>Submit</p></div>
<div class="sent"><p>Thank you!</p></div>

</div>

</div>

</div>

CSS
Now, let’s have a look at the CSS. First of all we got the wrapper which is only used for centering the buttons and then we got the actual button styles. I tried to create a clean/flat design using plain colors with a slightly darker border. The border-radius is used to smoothen the edges and I’ve also added a hover effect where I transition the background to the same color as the border. In this case, the transition-duration is set to 0.2 seconds and the transition-timing-function is set to ease-in-out, which gives the transition a slow start and end.

.wrapper {
position: relative;
top: 2.52em;
width: 21.7em;
height: 100%;
margin: 0 auto;
}

#btn1 {
position: absolute;
width: 9.45em;
height: 3.15em;
background: #18a397;
border-radius: 0.189em;
text-align: center;
cursor: pointer;
border: 0.126em solid #0b988c;
z-index: 1;
}

#btn1:hover {
transition: 0.2s ease-in-out;
background: #0b988c;
}

Since we are performing a “flip animation” to change the message in the button we’ll need different messages on each side. The .submit class holds the default message and the .sent class holds the message that will be visible after the flip animation. To manage this I’ve used the backface-visibility property which defines if an element should be visible or not when faced away from the screen.

In this case I’ve set the backface-visibility to hidden; on both .submit and .sent, and as you might of noticed I’ve also rotaded the sent class 180 degrees around it’s x axis. This way we’ll get one message before and after the “flip animation”.

#flip {
position: relative;
width: 9.45em;
height: 3.15em;
background: transparent;
transform-style: preserve-3d;
}

.submit {
position: absolute;
width: 9.45em;
height: 3.15em;
backface-visibility: hidden;
}

.sent {
position: absolute;
width: 9.45em;
height: 3.15em;
backface-visibility: hidden;
transform: rotateX(180deg);
z-index: 2;
}

To trigger the animation I’ve written a JavaScript onclick event which ads a class, in this case .animate to the flip div. The class contains the following properties: animation-duration: .2s; animation-name: flip; animation-timing-function: linear;, which gives the animation a consistent speed from start to end and animation-fill-mode: forwards; which persists the end state (100%) of the animation.

.animate {
animation: .2s flip linear forwards;
}

@keyframes flip {
100% {
transform: rotateX(180deg);
}
}

JavaScript

(function () {
"use strict";

var flip = document.getElementById('flip'),
button = document.getElementById('btn1');

button.onclick = function () {
flip.className = 'animate';
};

})();

I may add that I’ve just started to digg into JavaScript, so there are surly better and more efficient ways to trigger an animation.

That’s about it!