Build an Infinite Scrolling Photo Banner With HTML and CSS Today we’re going to embark on the challenge of creating an animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: we’re going to do it without a single line of JavaScript. To make this banner truly useful, our goal will be to use individual photos dropped into our HTML, not simply one long CSS background that repeats. This is pretty tricky but we’ll walk you through exactly how it works. Let’s get started! The Idea The concept here is simple. As you can see, we basically just have a strip of images that move their position from left to right. This effect is easy enough with JavaScript or Flash, but as an exercise let’s see if we can pull it off in pure CSS. Hurdles As promised, this is a pretty easy project, but only because I’ve done most of the problem solving for you. The Easy Way The easy way is to take the images that you want to display, import them into Photoshop, then combine them into one long image. The Hard Way Let’s Build It
New Tools And jQuery Plugins For Web Designers - 38 Items jQuery plugins are released more often than people would expect and that is a good thing because this way you have a whole bunch of them to choose from. In this article I featured 38 of these wonderful jQuery plugins along with other tools useful for web designers and web developers. tablecloth.js We’ve all been there. Either you’re redesigning a large site or working on a completely new one… styling tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting. JQVMa JQVMap is a jQuery plugin that renders Vector Maps. stroll.js – because it scrolls, and trolls Cubism.js Cubism.js is a D3 plugin for visualizing time series. lake.js Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. The new canvas element will be the same width as the original image and double the height. Storage.js Android Query Faye
HTML5 Please - Use the new and shiny responsibly 10 Creative & Rich UI & How to Create Them Mar 29 2009 Sometimes it’s just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talented web-developers manage to deliver powerful, functional and gorgeous web-design in “look-and-feel”-style, which is easy to use and nice to see. The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. There have been plenty of posts on the number of awesome javascript, Ajax and CSS techniques and where to find them. 1. Beside the absolutely incredible design you will find: 1.1 A menu with a nice animated effect on hover state How To » Super elastic effect to design high impact web menu This tutorial explains how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework. Check out the demo 1.2 A sliding post panel. How To » Elegant animated weekly timeline for websites Check out the demo 2. 4.
Tweet Heat - The hottest Tweets of the Month [January 2012] This is a guest post by Jan Rajtoral AKA Gonzo the Great, founder of gonzodesign, who provides design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design. In this new series of posts we’re going to take a look at what has been published last month in the Blogosphere. We hand-picked the best stuff including resources, tutorials, scripts/snippets, WordPress related posts and a lot more. HTML, CSS, PhP, Coding & Resources HTML5 Please - Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. When can I use… Support tables for HTML5, CSS3, etc - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. Filament Group’s Open Source Code Repositories - This page will serve as a centralized list of all projects, which we’ll keep updated as we develop new widgets and techniques. Tutorials
15 useful jQuery plugins and tutorials The variety of plugins and tutorials available for jQuery never cease to amaze me. I’ve been looking for some new plugins, so I extended my research a bit to share these cool jQuery plugins with you. If you need more, you can take a look a these jQuery scripts to improve your site’s interface, or at the jQuery scripts for your portfolio. 1. Probably one of the best jQuery image gallery on the web, a paid script but well worth the price. 2. jQuery Captify The beautiful and simple way to display captions to images on rollover. 3. Lightweight script to create a featured list of articles on your website. 4. A jQuery plugin that makes it much easier to add forms on your website and validation in the form. 5. jQuery AutoSuggest Help your visitors to search your website or add tags by using this plugin. 6. Transforms a regular select html element into a dropdown checkbox list, this will definitively improve the usability of your forms. 7. jQTouch Ever designed for the iPhone? 8. 9. 10. jqDock 13. 16.
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
jRumble | A jQuery Plugin That Rumbles Elements About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. Flashing and flickering objects on the web can be dangerous. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag. Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples Documentation Options/Defaults Known Issues
Understanding HTML5 Content Models Earlier this week we looked at the new text-level and structural semantic elements html5 provides. Today I want to continue and talk about content models in html5, specifically the new outline algorithm for creating hierarchy. Once again much of the content below comes to me via Jeremy Keith‘s book HTML5 for Web Designers, which I highly recommend. Unfortunately some of what we’ll look at below isn’t yet supported by browsers. Content Models Before html5 we had two categories of elements, inline and block. Text-level semantics — what were previously inline tagsGrouping content — block level elements like paragraphs, lists, and divsForms — everything inside form tagsEmbedded content — images, video, audio, and canvasSectioning content — the new structural tags described in my previous post Currently to create a hierarchical outline of our content we use a set of h1–h6 tags. The above would produce the following outline based on the headings. HTML5 helps solve the problem above. Scoped Styles
Behind The Scenes Of Nike Better World - Smashing Magazine 20 Awesome HTML5 Website Templates Which Are Free A lot had been share about HTML5 on the Internet, as it’s one of the latest trending topics.. It is considered as the next big thing. HTML5 is another stepping stone to make the web experience more enjoyable and gratifying for its users. A lot of people out there are trying to learn as much about HTML5 as they possibly can, because it’s going to come loaded with a bunch of new features that webmasters can employ to make their website that much better. The web has changed quite a bit and it’s about to change majorly with the introduction of HTML5. Please make sure to follow the terms of use before utilizing any of these free HTML5 templates for your projects and create rich applications. Advertisement A free HTML5 and CSS3 theme More Information on A free HTML5 and CSS3 theme Free HTML5 Template for Design Company Website More Information on Free HTML5 Template for Design Company Website Create An Elegant Website With HTML 5 And CSS3 SocialStream HTML5 and CSS3 Template HTML5 Starter Pack
What Potential Impact Can HTML5 Have on SEO? Although still a work in progress, HTML5 is the next major revision of the HTML standard. HTML, which is the markup language that allows us to structure and present our web content, is the primary factor in search engine optimization efforts. HTML gives search engines the needed context they need to understand what’s contained in a web page. How might HTML5 change the way we approach SEO? What are the possible impacts of HTML5 in search engine algorithms? Web Page Segmentation and Increased Semantics One key component of HTML5 is that it adds new elements that help us better express what’s on a web page. Once HTML5 becomes more widely adopted, search engines can use these new elements to help them find page elements of interest to them. Currently, we use <div> elements to organize and segment a web page. The issue with using <div> elements is that the element is meaningless. HTML5 Elements That Can Affect Search Engine Indexing Link Types See a full list of link types here. Related Content
Creating a HTML5 & CSS3 Single Page Web Layout Creating a HTML5 & CSS3 single page template Today we will create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation menu), promo area (I will use jQuery Nivo Slider), center area with some content, bottom area (which you can use for footer links as example), and footer itself. Live Demo download in package Now, you can download package, check our prepared demo and lets start! Step 1. As usual, quite each webmaster (designer) start thinking about initial idea which he like to build. And only after – we can start thinking about initial layout of that page – HTML Step 2. I separated whole layout to few sections: header section – place, where we will put our logo, menu, promo slidercentral section – place for main content, bottom sections with some custom contentfooter section – where you will able to put some links, company name In HTML code I will use next HTML5 tags: <header>, <nav>, <section> and <footer>. index.html
Slider with Sliding Backgrounds Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.