Placed in: Home arrow Programming arrow Webdesign viagra australia
viagra online
viagra sale
cialis online
cialis australia
Webdesign
Creating a polaroid photo viewer with CSS3 and jQuery

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).

Polaroid Photo Viewer with CSS3 and jQuery

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.

Demo polaroid photo viewer with CSS3 and jQuery   Download polaroid photo viewer with CSS3 and jQuery

IMPORTANT NOTE:
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
 
The iPhone Contacts App with CSS and jQuery

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.

iPhone Contacts App with CSS and jQuery

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.

Demo Scrolling box - iPhone contacts style   Download Scrolling box - iPhone contacts style

Features:

  • 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).
  • Falls back nicely when the user has JavaScript disabled.
  • 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.

Known issues

  • 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.
  • I wrote some pretty damn ugly JavaScript (Hey, it works).
  • 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
 
The iPhone Springboard in xHTML, CSS and jQuery

Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the iPhone Springboard in xHTML, CSS and jQuery.

The iPhone Springboard in xHTML, CSS and jQuery

Chris Coyier from CSS-Tricks allowed me to place the article over at his website (Thanks Chris!). If you want to know how I created the iPhone Springboard, make sure you read the article on CSS-Tricks.

Demo The iPhone Springboard in xHTML, CSS and jQuery   Download The iPhone Springboard in xHTML, CSS and jQuery

I'm planning to make some more of these "iPhone style" webpages, so subscribe to the feed if you want to keep updated.


Tags:  iphone mac springboard jquery xhtml css
 
The iPhone unlock screen in xHTML, CSS and jQuery

The iPhone: Everybody knows what it is, many people "played around" with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we're used from Apple).

I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I'm going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

The iPhone unlock screen in xHTML, CSS and jQuery

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.

Demo The iPhone unlock screen in xHTML, CSS and jQuery   Download The iPhone unlock screen in xHTML, CSS and jQuery

Features:

  • XHTML and CSS valid.
  • "Timer" displays the current time (Just like the iPhone).
  • "Date" displays the current date (Just like the iPhone).
  • Pretty sleek interface, including see-through elements (Just like the iPhone).
  • Changeable background.
  • Tested and working on Firefox 3, Internet Explorer 7 and Safari 3.

Known issues

  • The "slider" doesn't slide back (what the iPhone does).
  • The "unlock animation" isn't exactly the same as the iPhone.
  • Doesn't work on an actual iPhone.

Other than those minor issues, it works as expected. I'm planning to make some more of these "iPhone style" webpages, so subscribe to the feed if you want to keep updated. Want to know how I created it? Check it out.


Tags:  iphone mac screen jquery xhtml css
 
Building a blog with CakePHP - Part 2: SEO and Management

A while ago, I placed an article called building a blog with CakePHP - Part 1: Getting started. The tutorial gave you a good start in the world of CakePHP, just to learn the basics of the framework.

Now we're improving the blog by adding some functionality. We'll make it a little bit more search engine friendly and we're going to build an admin panel to add new articles.

Building a blog with CakePHP - Part 2

What we did last time

  1. Creating the database
  2. Clearing CakePHP errors
  3. Creating the "Blog" model
  4. Data from controller to view
  5. Altering the layout & styling with CSS

Make sure you've read the previous article before starting with this one if you want to learn the framework. You can also try viewing the source code of part 2 if you want to show your chest hair.

Download the source code for this tutorial

There we go! Strap on your cooks hat; We're going to bake some delicious Blog-cake.


Tags:  cakephp framework seo blog webdevelopment programming php
 
Mass Twitter Action and Retrieve Script

As you might have noticed, I've been mentioning the Twitter service already a couple of times here. I've created a webpage that you can use to display your own Twitter updates and showed that Twitter can be great for asking quick questions to other Tweeters. You could follow me to get the latest updates too.

Anyway, the goal for article isn't promoting how great and addicting Twitter is. I went through the Twitter API to create another great and probably very useful Twitter application. I want to present to you the Mass Twitter Action & Retrieve Script.

Mass Twitter Script

What does it do? The mass Twitter script allows you to mass follow, defollow or retrieve friends or followers from Twitter. This can be useful for several reasons, like retrieving all your followers and automatically follow them back at once. Or de-friend a couple of people you follow because they're only spamming. I'm sure you could think about more reasons where you can implement this script.

Demo Mass Twitter Action and Retrieve Script   Download Mass Twitter Action and Retrieve Script

Once again, I'm not going to explain the code. If you want to make adjustments to it, feel free to do so.


Tags:  twitter free mass php webdesign website
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 Next > End >>

Results 31 - 36 of 52
Subscribe

Subscribe to Marcofolio