Placed in: Home viagra australia
viagra online
viagra sale
cialis online
cialis australia
3 year anniversary of Marcofolio.net

Not one, not two, but Marcofolio.net is turning 3 years old today! Time goes so fast when you're having so much fun, doesn't it? And I'm still writing high quality content with pleasure, still exploring more and more possibilities of the web every day.

Marcofolio.net turns three

I believe the quality of the articles have gained a lot, especially compared to the first year. I wanted to push out a redesign before the blog turned three, but because of the lack if time, you'll have to wait a while. But stay tuned, I hope to get it up and running as fast as possible.

I hope to see you sticking around here and enjoy your stay on this website as much as I do writing it. Stay tuned for more high quality articles, jQuery tutorials, inspirational articles, CSS(3) proof of concepts and much, much more!


Tags:  marcofolio.net celebrate anniversary birthday website
 
jQuery quickie: Colourful rating system with CSS3

Today, we're going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), we can create a Colourful rating system.

Colourful rating system with CSS3

As usual, since CSS3 isn't supported (yet) by every browser, the demo page only fully works on those browsers that support it (Firefox, Safari and Chrome). Other browsers will not see the circles, but will see colourful blocks that can be used as a rating system.

Demo Colourful rating system with CSS3   Download Colourful rating system with CSS3

Should I do more jQuery "basic"/quickies in the future? Simply let me know and I'll do that! For now, let's see how you can create your own colourful rating system with jQuery and CSS3.


Tags:  rating colour jquery css3 simple
 
3d animation using pure CSS3

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?

At that point, I started digging through the Safari Reference Library, where I eventually found the Safari CSS Visual Effects Guide: Transforms page. This page describes a CSS property I've never seen before: -webkit-perspective.

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

3d animation using pure CSS3

Simply open up the demo page and hover the movie poster elements and be amazed. As you could have expect, this technique will only work on -webkit based browsers (Latest version of Safari and probably Chrome too). Even Safari on the iPhone displays the 3d effect, but not the animations.

Demo 3d animation using pure CSS3   Download 3d animation using pure CSS3

For those who don't have a webkit browser, I've added a small video to this post to see the demo in action. This really opens up the possibilities and shows the strength of CSS3!


Tags:  3d css3 animation transition perspective
 
jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Most webdesigners/developers know what Lorem Ipsum is. For those who don't, it's simply dummy text of the printing and typesetting industry. Although I hardly use it myself (others think it's killing your designs), I still think the idea behind it is pretty good. Chris Coyier took this idea to a whole new level and created HTML-Ipsum. You can copy HTML elements to your own project to see if you've styled all the elements in a proper way.

There is just one thing which bugged me for a long time about Lorem Ipsum. When you copied all the text (or HTML), style it etc., you'll need to remove everything afterwards. When you created loads of different pages, it might take a while to find all your Ipsum traces. Because of that, I created jHTML-Ipsum: a jQuery HTML Ipsum plugin.

jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Simply set your selector and let jHTML-Ipsum do his work. It dynamically creates all the HTML elements so you can see if all your CSS works in a proper way. Using various parameters, you can set how the plugin behaves and see which elements it should create.

Demo jHTML-Ipsum   Download jHTML-Ipsum

When you fully designed your website, you simply delete the plugin and you don't need to delete or change the individual pages. Read below how you can install the plugin and which options you can set.


Tags:  jhtml-ipsum html ipsum jquery plugin
 
Advanced jQuery background image slideshow

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

With the use of transparent PNG's, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

jQuery background image slideshow

It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I've used images with a width of 1500px, just to cover most of the currently used screen resolutions.

Demo jQuery background image slideshow   Download jQuery background image slideshow

Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, comments are left on the source code to explain what it does.


Tags:  slideshow jquery tutorial webdevelopment
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 46 - 60 of 362
Subscribe

Subscribe to Marcofolio