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.

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.

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!

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!

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.

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.

Today is the day for another great contest on Marcofolio.net. This one especially goes out to all people that want to win some Christmas Cards to send during the holidays. Three lucky readers will be able to win 50 Christmas Cards by MOO. That's surely worth a shot entering this contest!

There is no doubt that mobile currently is hot. The team behind the favourite JavaScript framework of many (jQuery) answered the need of a touch-optimized web framework, and decided to create jQuery Mobile. The development focuses on creating a framework compatible with a wide variety of smartphones and tablets. Although the framework was released almost one year ago, not many people know about it. Luckily, Giulio Bai wrote a book about the first steps into jQuery Mobile.

This logo looked like the perfect candidate to do so, since it uses huge pixels and only a couple of colours (4 shades of green). With only little HTML, CSS and jQuery, I was able to generate this logo with not much effort.

A while ago (I think it was around the release of the iPad), the Apple.com website got a new navigation menu on the top of the page. This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That's the moment I thought we could do better, using some nifty CSS3 techniques. So today, I present you the Apple.com navigation menu created using only CSS3.

According to the specification, this function does the following: Starting in Gecko 2.0, you can use the element() CSS function to use an arbitrary HTML element as a background image for background and background-image. That sounds pretty interesting! Take note this only works in the latest version from Firefox, and still needs the -moz- vendor prefix (so the complete function call will be -moz-element()).

Be aware that the :any() is not part of the CSS3 specification (yet), but since Webkit already implemented it, I'm pretty sure others will follow as well. Also, to make it work in Firefox, use the -moz- vendor prefix, resulting in :-moz-any (-webkit- vendor prefix for Webkit). So let's see what this :any() selector can do for you.

Today, we're going to give away three member accounts on UltimateDesignerToolkit. As you might have guessed by the name of the site, they have a huge collection of all kind of designer items in one place. Examples of these items are Photoshop brushes, vector files, PSD layouts, Photoshop actions and other design resources that may come in useful in your project.

Do you remember the Advanced jQuery background image slideshow I posted last year? Because of that tutorial, reader Evens sent me an e-mail, asking how the effect on the website from Climate Crisis could be recreated. It seemed liked an intersting thing to do, so I took the time to try to create the same effect.

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.