Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.
Placing them on simple polaroids on a webpage simply didn't do it for me. I wanted to drag them around, rotate them and still have a fun time. That's were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all modern browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the
-webkit- prefix. Mozillas Firefox 3.1 is getting these properties too (with the
-moz- prefix). So, for now, this is just for fun - Other browsers will display the polaroids, but won't have the neat shadow while dragging and rotating while placing them down.
With that said, check out how you can re-create this effect and learn some more about CSS3 and jQuery. Check out one of my older articles if you're searching for an image gallery that isn't using CSS3.
Tags: polaroid photo viewer css3 jquery tutorial webdevelopment
About the author: IconPlant offers the highest quality XP style icons available at the most affordable prices and our service is prompt and reliable.
Many think about making their own icons for their design projects. In fact it is actually possible to make your own icons, according to your taste. What you will need is Adobe Photoshop, some Photoshop tutorials to get an idea, and of course your creativity. The following article is not a tutorial, but a walkthrough on the general steps for using Photoshop to make icons.
Tags: guest article walkthrough icons tips photoshop
Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.
The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.
OK, maybe not fully the "feeling" (look and feel) from the iPhone, since I can't make any webbrowser react to placing your finger on the screen, but your mouse will do the trick.
- XHTML and CSS valid.
- "Top indicator" changes character while scrolling (Just like the iPhone).
- Including "Search" on the right (Just like the iPhone).
- Pretty sleek interface, including see-through elements (Just like the iPhone).
- Combined with the unlock and springboard screen, it looks like the real deal.
- Tested and working on Firefox 3, Internet Explorer 7 (With fixes) and Safari 3.
- The "top indicator" doesn't always show the correct character, especially when using the search.
- The "top indicator" is placed on top of the scrollbar of the browser.
- Works crappy on an actual iPhone.
- Only works correct when browser doesn't scroll. For people with a small screen resolution, here's a smaller demo (I just changed the CSS and images to 50% of the original size).
Other than those minor issues, it works as expected. Make sure you check it out!
Tags: iphone mac screen jquery xhtml css
Music. Everybody listens to it and loves it. Some people like rock, some prefer pop music, while others only listen to electronic music.
There are some amazing (popular) music bands out there that have an incredibly amazing and inspiring website design. With their great music and their well designed online "business card", it helps in their success.
Sadly, there are many band websites out there that aren't really that inspirational. The sites from The Killers, the Red Hot Chili Peppers, Metallica, Panic! at the Disco, Green Day, Coldplay, Pink Floyd and many others could really use another layout.
Hope to see some great designs out there soon that might be inspired by these good-looking band websites.
Tags: music bands inspiration design website
Remember my goals for 2009? One of the goals was: Finally changing / update my template. Today, I'm proud to release this template, giving Marcofolio.net a totally new and unique look.
I already had my template designed November 2008, but never had the time to convert it to HTML/CSS. I was really lucky to be the winner of a PSD to XHTML contest on CrazyLeaf. The guys from Feathercode did a real good job at converting my PSD to a nice XHTML page.
Since I'm using Joomla!, I still needed to transfer this XHTML to a Joomla! template. It took me a while, but it's finally here: the new template for Marcofolio.net is placed in the wild!
Changes from the previous theme:
- Header/Footer (Didn't you notice?)
- Now added a live Twitter feed
- Made use of some fun jQuery
- Advertising spots are now through BuySellAds - Just $40 each!
Just check out the new Marcofolio.net that got a new, colourful, grungy, abstract new look.
Tags: facelift marcofolio template design grunge