Marcofolio.net ()

Complete list with sweet UI improvements on Windows 7

Marco — Mon, 02 Nov 2009 06:34:42 +0000

First things first here: I'm a Mac guy. But I must say: Windows 7 has made quite a lot improvements compared to it's predecessor (Vista). The first time I booted the OS and saw flying orbs create the Windows logo, I was impressed.

I was even more impressed by the amazing user interface improvements made by Microsoft. For those that aren't familiar with these, here's a complete list with sweet UI improvements on Windows 7. Below is the startup screen created by the flying orbs.

A small little diclaimer here: I've fully skipped the "Windows Vista Era", since I moved to Mac OSX right after Windows XP. There might be some things in this list that were already implemented in Vista, but I wasn't aware of those. Also, this list only shows the graphical improvements - not the technical.

That being said, let's check out the slick UI improvements Microsoft brought to their new OS. It could be pretty inspirational for you too!

Planet Collision: Free November 2009 Calendar Wallpaper

Marco — Sun, 01 Nov 2009 13:52:09 +0000

Planet Collision: Free November 2009 Calendar Wallpaper was originally my entry for the Desktop Wallpaper collection on SmashingMagazine. Sadly, my wallpapers weren't selected to be included in the list, but I still wanted to share them with the rest of the world.

I hope you enjoy them and use them as your wallpaper. These wallpapers are totally free for all kinds of use. Next to the versions that has a calender on them, the non-calender version has been included (in case you want to use it in other months too).

These wallpapers come in a 4:3 (normal) and 16:9 (widescreen) aspect ratio. Also, an iPhone version has been included. The wallpaper was my outcome after following the great space explosion tutorial.

Browser size aware content scaling

Marco — Mon, 26 Oct 2009 08:04:09 +0000

Just recently, I noticed something pretty cool at Google Images: When you resize your browser, search results are hidden/shown, depending if it makes a full row. It does really have a big advantage: you'll never have any "empty spots" on your website. The grid is always fully filled and results that don't fit in the grid, are simply hidden.

I wanted to recreate this technique using jQuery. Just like Google Images, it check how many images fit in each row and hides the one that fall off (depending on the browser size).

The difference between my HTML and the one Google, is that Google uses a table to display the image. My version uses floating images (but essentially, they work the same). Just make sure to check out the demo.

Now let's take a deeper look at the problem, the solution and how you create your own browser size aware content scaling.

8 different ways to beautifully style your lists

Marco — Mon, 19 Oct 2009 16:34:23 +0000

The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).

As a reminder, here's how a default ordered list and a unordered list look like:

Ordered list item #1
Ordered list item #2
Ordered list item #3

Unordered list item #1
Unordered list item #2
Unordered list item #3

And check out the demo to see what we're going to create with it.

Looks much better, doesn't it? And you get all that, just by adding a couple of sweet CSS stuff. Want to know how? Here we go!

CSS trick: Debug your HTML and CSS

Marco — Tue, 13 Oct 2009 20:25:25 +0000

Today, I'll be showing you a neat little CSS trick to Debug your HTML and CSS. Take note that this will not be actual debugging, but it can help you find the element depth on a web page. Also, when you didn't properly close a tag, this piece of code will expose it for you.

Simply check out the demo to view what we're going to create! At first, the demo looks like a regular web page. But when you start hovering the elements, you'll be able to see the HTML structure (in depth) of the HTML page.

There are just a couple of lines of CSS to get this effect! Check out how (or view the source) you can create this yourself.

Create a mouse follower with smokey trail in Silverlight

Marco — Mon, 05 Oct 2009 19:21:59 +0000

Last week, I started experimenting with Microsoft Silverlight. I've never worked with the technique before, but after using it, I was impressed. It works pretty good and the separation of the XAML and CS file is great.

Today, we're going to create a Smokey Mouse Follower in Silverlight. This was my first experiment too and pretty fun to see. I have to admit that the layout can be improved in loads of ways, but this tutorial is intended to be for beginner Silverlight users.

We'll be using Microsoft Expression Blend 3 in this tutorial. Visual Studio will probably give the same effect, but I haven't tested it. We're going to create the program using Visual C#. The images (cursors) I used are from IconFinder.

Make sure to check out the demo to see what we're going to create! As you can see, it's not really that useful, but pretty fun to see. Also, it's a great way to get in touch with Silverlight. Let's start!

Giveaway contest - Invoicera Billing Software

Marco — Fri, 02 Oct 2009 15:08:56 +0000

Formatting and submitting invoices may seem like a headache at times, but this essential component of the billing process is a critical part of doing business. Record-keeping would be nearly impossible without a paper trail that includes invoices submitted to clients, customers or employers. This is where one should consider the help offered by web based invoicing software, a surprisingly simple and easy way to automate your invoicing paperwork.

There are a plethora of online invoicing and billing applications to choose from but not all of them are capable of meeting the expectations. Many of them are at a loss on features or there is a high cost involved. There is hardly any software which comes to the rescue of freelancers, entrepreneurs or SMB owners and helps them to sync their all crucial tasks. But things are changing now and Invoicera is one of the latest exciting entrants in the race bringing about this change.

Three lucky readers will be able to win a license for Invoicera. Read the rules below to find out how you can join this contest: it's pretty simple! If you're one of the three winners, you'll receive one licence for Invoicera. Make sure you join this contest quick, since it ends on October 9th and 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.

Create a better jQuery stylesheet switcher

Marco — Mon, 28 Sep 2009 14:40:44 +0000

Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.

There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We'll simply change some colours for the user!

Make sure to check out the demo to view what we're trying to accomplish.

The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Now, let's take a look at how you can create something like this yourself!

Theatrical movie trailer with jQuery

Marco — Mon, 21 Sep 2009 15:51:48 +0000

Don't you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we're trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQuery

This technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we can really make it look like the movies.

I'll leave out the CSS in this tutorial, since not much really important stuff is going on there. This example works best in Firefox - Although it works in Safari and Opera too, the letter-spacing CSS property gets rounded up (or down) and you won't be able to see the full effect. Also, you'll need to imagine the sound effects yourself.

Advanced Photoshop Covers (NL #11 - #20)

Marco — Wed, 16 Sep 2009 18:01:31 +0000

The readers (or regular visitors) of Marcofolio.net, must already know that I'm a true programmer. Although this is a fact, I do love to kick up Photoshop some times and create something outstanding. For that reason, I'm also subscribed to the Dutch version of Advanced Photoshop - a great Photoshop magazine. The magazine shares some great Photoshop techniques, as wel as good written tutorials and inspirational articles.

Last year, I placed an article online called "Advanced Photoshop Covers (NL #01 - #10)". As you could have expect, this is part 2 of the Dutch Advanced Photoshop Covers that are so inspirational, that you'll surely get your design fluids flowing.

The pictures are taken by me and I apologize for any "reflections" on the magazine. If you like one, I recommend you to check out the portfolio website from the artist. Be ready to get inspired!