Marcofolio.net ()

CSS animated profile cards

Marco — Sun, 07 Apr 2013 13:37:48 +0000

Whoah, been a while since I've posted something! Yet, I wanted to mess around with some fun CSS3 stuff and wanted to share the results with you. Today, we're going to create CSS animated profile cards. Although there are four different kind or animations (Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure. Simply hover over the images to see the contact details.

The pictures used are created by Belovodchenko Anton, but their profile data is fake. -prefix-free has been used to remove the vendor prefixes in CSS. All animations are done with the help of the transition property.

So, how can you create this effect for yourself? Let's dive into the code, explaining the parts one at the time.

Fronteers 2012 - Notes and more

Marco — Mon, 15 Oct 2012 06:10:12 +0000

If you are following me on Twitter, you might have ~~been spammed~~ seen loads of Tweets last week with the #fronteers12 hashtag. This was because of the fact I was attending the Fronteers Conference, where loads of interesting talks were held.

Places like these are also great for meeting and talking to people. I talked to a couple of them (like @mathias, @mikevhoenselaar, @leaverou, @eising and @smashingmag) who I only knew from "the online world", but it can be pretty inspirational to talk to them in person as well.

With this post, I wanted to share a couple of interesting tweets, ideas, notes etc. from the conference. If you find these interesting, I do recommend you to watch the video recordings taken at the event, which will be published somewhere next week already.

I want to thank Info Support (my employer) to let me attend the event, but especially Fronteers for hosting it. Also, a big up for Christian Heilmann who was the "MC" during the conference and did a great job (especially at the Q&A).

Giveaway contest - Digital copies of "The Best 365 Websites Around the World"

Marco — Mon, 14 May 2012 19:41:00 +0000

A book with the title The Best 365 Websites Around the World, who doesn't want to read that? Awwwards wrote this book and this week, we're giving away 5 digital copies. The book contains great content, which will give you loads of inspiration.

Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on May 21st. You'll automatically receive information if you have won a prize. Good luck to everyone!

Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.

CSS3 quickie: The Facebook loading animation

Marco — Sat, 18 Feb 2012 08:43:02 +0000

After the couple of jQuery Quickies that have been placed online on this website, I today present you a CSS3 quickie. Just a short walkthrough to create a simple effect, to learn some basic stuff. In this case, we're recreating the Facebook loading animation using CSS3 animations. I'm pretty sure that you've seen the animation before, if you're a Facebook user.

We're using CSS3 keyframes to create the desired effect. We'll be using prefix free from @LeaVerou to use unprefixed CSS3 properties.

Take note this example only works properly in browser that support the keyframes property. I've tested this script and verified that it's working in the latest versions of Firefox, Chrome and Safari.

Giveaway contest - MightyDeals deal

Marco — Wed, 08 Feb 2012 06:49:39 +0000

A great resource for all kind of webdevelopers and -designers has to be MightyDeals. They provide some great (daily) deals for webprofessionals, which simply means that you can get that font, brush or program for a way cheaper price so can finally get it. Today, we're giving away five of these amazingly useful deals to all the readers! And the best part is: You're able to decide which deal you want to have.

Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on February 15th. You'll automatically receive information if you have won a prize. Good luck to everyone!

Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.

Recreating the IBM Lotusphere logo in CSS3

Marco — Mon, 23 Jan 2012 18:52:28 +0000

A while ago, I visited the IBM Lotusphere 2012 conference page. One thing that I noticed immediately, was their beautiful logo on the background. Although it's design is very minimal and simple, the logo just looks very good.

I wanted to recreate this logo using only HTML and CSS3. The main key to this effect is using the border-radius and overflow:hidden properties. I've created two versions: One that uses extra HTML elements, the second one uses CSS3 pseudo elements.

Check out the demo to see how the logo looks like in your browser. Keep in mind, no images are used at all. Feel free to dig in the source code as well and maybe learn a couple of things.

Let's take a look under the hood to see how you can create something like this yourself. It's actually easier that it might look!

Giveaway contest - Stickers by Sticker Mule

Marco — Mon, 09 Jan 2012 20:10:34 +0000

Since it was my 23rd birthday last weekend, and I wanted to start off the new year with some great goodies, I've got a great giveaway for everyone. Today, we're giving away store credit for all kinds of stickers by Sticker Mule!

They could be useful for anything! Design your custom sticker, create die cut stickers or even create custom skins for your iPhone, laptop, Kindle or iPad.

Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on January 16th. You'll automatically receive information if you have won a prize. Good luck to everyone!

Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.

Looking back at 2011

Marco — Mon, 02 Jan 2012 19:15:26 +0000

Welcome to 2012 everybody! I hope you had a great Christmas time and enjoyed New Year's eve. Just like last year, I wanted to look back at my own blog to see what took place.

Sadly, I wasn't able to post a lot this year due to personal circumstances. Yet, I'm pretty sure that all the posts that I did place are true, high quality unique articles that you might be able to use for your next web project since they were mainly about jQuery, CSS3 or HTML5. I really hope you liked reading the articles on Marcofolio.net for the last year!

As for 2012, I hope to write more articles than past year. I might write more Quick Tips; Shorter articles, but those that contain extremely useful tips/code snippets that you might use. And in case you haven't seen it on Twitter yet, this was the Christmas card my girlfriend and I made for this year.

I wish you all the best for 2012 and let's check some articles placed here last year.

Build native-looking apps for iOS

Marco — Mon, 12 Dec 2011 20:42:28 +0000

Lately, I've been messing around with cool HTML5 stuff a lot. One of the things that HTML5 is trying to reach, is the market of mobile devices. A long time ago (when I got my first iPhone), I wrote an article on how to add a webclip for easy access to your website. But since then, I've learned a couple of more things on how to build native-looking apps for iOS using only HTML.

I've created a template/boilerplate that you can use for your next project to create native looking apps for iOS (more specifically: Mobile Safari) using nothing but HTML. Simply build your website starting with this template, bookmark it and you're done.

View or download the source code and read the comments carefully to see what's needed to create a native looking app using only HTML.

If you don't feel like fully digging into the source, but learn the pieces bit by bit, feel free to read on further. Take note that this will only work when the user bookmarks your webpage. The changes to any existing projects can be made easily, just make the following changes in the head section of your page and you're ready to go!

Working with Websockets

Marco — Mon, 28 Nov 2011 20:17:14 +0000

HTML5 has some extremely cool features, and a couple of weeks ago I took a deep dive into Websockets. This protocol, which you can recognize by the ws:// and wss:// (secure websockets) URL prefix, enables "Server side push events".

During my deep dive, I learned a couple of things that are pretty interesting. If you're into/learning HTML5, you really should try out Websockets! In my opinion, it's one of the coolest technologies they've added. Are you ready to dive and learn more about Websockets? Here are a couple of things to keep in mind when working with Websockets.