More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it's pretty cool to get a sneak peak on what the future will hold for us.
While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.
The only images that are used in this example, were taken from the Superpack icon pack and only show the Apple icons. Everything else you see in this demo, is created using pure CSS3.
This example only works in the latest versions of Firefox, Chrome, Safari and Opera. Since Internet Explorer still doesn't fully support CSS3, this example looks a bit weird in IE. So, for now, this is just another sneak peak into the future. Let's check out how you can create this!
Tags: bar chart 3d css3
After the jQuery 1.3 and PHP, Zend Framework 1.8 and WordPress 2.9 E-Commerce book reviews and giveaways (all books from Packt Publishing), I'm reviewing another book today. This time, the book has been written by Peter Spannagle and Sarah Soward and is called WordPress and Flash 10x Cookbook.
As you might expect from reading the title, this book covers some great ways on how to combine WordPress with Flash. For me, it was a very interesting read, since I'm still pretty new to WordPress, but especially since I prefer HTML5/CSS3/jQuery above Flash. Still, I wanted to give this book a go since I really liked reading the other books from Packt.
I've read the book and wrote a review about it that you can read below. Now, you have a chance to win this 250+ pages thick book and read it yourself!
What you'll learn from this book:
- How to make your WordPress blog or website stand out with Flash
- Build your own
.swf files using various plugins
- Develop your own Flash audio player using audio and podcasting plugins
- and much more!
Read the review below and make sure to check out how you can win a hardcopy version of this book. Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.
Tags: wordpress flash book review giveaway
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.
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
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.
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.
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
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:
perspective property is what we need to create the 3d effect. Using
transition, we can create 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.
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