background preloader

Sponsor Flip Wall With jQuery & CSS

Sponsor Flip Wall With jQuery & CSS
Martin Angelov Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well. Step 1 – XHTML Most of the markup is generated by PHP for each of the sponsors after looping the main $sponsor array. demo.php <div title="Click to flip" class="sponsor"><div class="sponsorFlip"><img alt="More about google" src="img/sponsors/google.png"></div><div class="sponsorData"><div class="sponsorDescription"> The company that redefined web search. Maybe more interesting is the sponsorData div. Step 2 – CSS

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Related:  Site BulidingDéveloppement Web

How to Create a Background Image that Scales with the Browser Window One of the first things you will discover when you start working with responsive designs and flexible-width layouts is that you need images that can adjust to the screen size as well. A while ago, I showed you how to use the CSS3 property background-size to stretch images to fit in a window, but there is an even better use for this property: background-size: cover;

Encode & Decode Data URLs with PHP Converting small images to data-URLs is a great way to eliminate HTTP requests and decrease loading time for your pages. Using PHP‘s base64_encode() and base64_decode() functions, we have the power to convert images to data-URLs and vice-versa. Decoding Data URL Images 3D Plane for jQuery 3D Engine 3D Plane for jQuery 3D Engine In the last post we created a 3D Engine with jQuery. This time around we’re going to make a new shape and make it interact with the mouse. What We’re Making I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse. We’ll be making a plane that rotates the further you get from the center.

Smooth Vertical or Horizontal Page Scrolling with jQuery In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. online unserialize PHP functions On 15. Jan 2014 02:22 smackyou wrote: This function has serious problem - it won't accept multibyte strings. webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation 10 jQuery Horizonal Scroll Demos & Plugins In today’s post we bring to you 10 jQuery Horizonal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :) 1.

Une structure de base pour vos emailings 004.HOW TO USE: Use these code examples as a guideline for formatting your HTML email. You may want to create your own template based on these snippets or just pick and choose the ones that fix your specific rendering issue(s). There are two main areas in the template: 1. The header (head) area of the document. You will find global styles, where indicated, to move inline. 2. The body section contains more specific fixes and guidance to use where needed in your design.

Related: