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. 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. The outermost .sponsor div contains two additional div elements. Maybe more interesting is the sponsorData div. Sponsor Flip Wall Step 2 – CSS Step 3 – PHP 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; The cover keyword tells the browser to scale the image to fit the window. As you can see in this series of images, this results in a page that looks a lot better even if the screen is very small or very large. How to Use background-size: cover; Create your background image. Upload your image to your web host and add it to your CSS as a background image: background-image: url(fireworks-over-wdw.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; Add the browser prefixed CSS first: -webkit-background-size: cover; -moz-background-size: cover; -o-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 So we start with a small image named, say, “feed-icon.gif”: We then convert to data-URL format by encoding with base64_encode()1: This will output the image as a string of base64-encoded gibberish, which I will not utter here. R0lGODlhEAAQAPcAAP+JAP+LAP+vWf ... ceZECFAtPbhAkijCBVUAAOw== And just keeps going for about 4KB-worth of code, which is actually larger than the original image. <img src="data:image/gif;base64,<? Or display in our dynamic CSS.php file: background: url("data:image/gif;base64,<? 1 That’s sort of a “quick-n-dirty” technique but it works. Then to display in your web page, use something like this: <img src="data:image/gif;base64,<?

Pie chart etc.. Most people would agree that the old adage “A picture is worth a thousand words” is also true for web based solutions. There should be no discussion – Charts and Graphs are ideal to visualize data in order to quickly deliver an overview and communicate key messages. Whatever type of data presentation you prefer or suits you data (pie charts, bubble charts, bar graphs, network diagrams etc.), there are many different options but how do you get started and what is technologically possible? In this article tripwire magazine present more than 75 Tools for Visualizing your data on a website and most of the options available will be covered. If you are aware of a tool, script etc. that deserves to be added to the list I would kindly ask you to leave a comment to everyone’s benefit. Advertisement Introduction Images says more than a thousands words. The article has been organised into the following sections. How to visualize you data using JavaScript-based solutions jQuery Sparklines mooCSSChart

|| Generador de texto simulado | Lorem ipsum para diseñadores de páginas web || online unserialize PHP functions On 15. Jan 2014 02:22 smackyou wrote: This function has serious problem - it won't accept multibyte strings. On 22. I love it! On 18. The most easy to use php unserializer I ever seen! more comments for unserialize There are some more comments for unserialize(). Leave your comment

Jquery Inline css editor Design in the Browser I was inspired by the article Make Your Mockup in Markup by Meagan Fisher. I am one of those persons who can't stand Photoshop and design every bit of a website in it. Also it is not very DRY to design paragraphs, or whatever, in Photoshop and again with CSS. But designing the mockup with markup is also somewhat annoying. That's why I coded this Plugin. Installation and Usage Please see the Demos and the example source code here and here. Download latest Version You always find the latest version of the Plugin at the GitHub repository download page. A Demo Screencast Current Source Code

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. View demoDownload source In this tutorial we will create a simple smooth scrolling effect with jQuery. So, let’s start! The Markup The markup for our example page is going to be very plain. The HTML is going to be the same for both examples. The CSS Since we have two examples, we will start with the horizontal page style. The main idea is to make the sections very wide and 100% in height. We need to give the body a valid height, because we want to be able to define the height 100% to the section. The style for the vertical page layout is going to look as follows: Nothing special here, just that we give a big height to the sections. Let’s add the JavaScript The JavaScript The function for the horizontal scrolling effect is the following:

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. 006.DO NOT COPY OVER COMMENTS AND INSTRUCTIONS WITH THE CODE to your message or risk spam box banishment :). 008.It is important to note that sometimes the styles in the header area should not be or don't need to be brought inline. 013.<! 014.More info/Reference: 019.<! 023. 024. 025. 026. 029. 2. 033. 036. /* Client-specific Styles */ 041. /* Reset Styles */ 046. /** End Mail Chimp Reset **/ 048. /** 3. 050. 053. p { 054. margin: 1em 0; 057. /** 4. 059. 062. h1, h2, h3, h4, h5, h6 { 063. color: black ! 064. line-height: 100% ! 081.

Related: