Lightbox_me - Stupidly Simple Lightboxing What is it? Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you. Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Features Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not: Handles overlay resize when the window is resized Handles overlay size in cases where the document is smaller than the window Handles position: fixed in all browsers Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents In addition it's got these other nice features: Usage Include jQuery and lightbox_me in your web page, then invoke lightbox_me on a jQuery object: $(domobj).lightbox_me(); or $("#id").lightbox_me(); This will lightbox the DOM element immediately.
960 Grid System The Web Standards Project C Public CVS Repository World Wide Web Consortium (W3C) The 960 Grid System Made Easy By Joshua Johnson The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily. However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed. With all this code, how could this be the easy way to create a layout? This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them. We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles. Grid-Based Design Before we get into the specifics of the 960 Grid System, let’s briefly discuss grid-based design in general. Our brains like to simplify things to make them readily understandable. Why Do I Need a Grid System? Typogridphy
Code Snippets Designing Websites for All Screen Resolutions Tutorial on Designing for 800 x 600, 1024 x 768, 1280 x 1024 and higher Designing web sites to fit all resolutions is a very important web design principle. Try out the Entheos site in all resolutions higher than 800 x 600 and you will find that it is designed to fit the page exactly. Therefore, visitors who have higher resolution can see more content in one page which reduces scrolling. Most web sites are designed for only one resolution. They may look perfect in a 800 x 600 resolution but if viewed in a 1024 x 768 resolution look a little empty. From our research we have found that majority of our viewers are on the 1024x768 resolutions and higher. Step 1: Decide on the lowest Screen Resolution Before you start you need to decide on your lowest screen resolution. Step 2: Design Your Web Site On This Resolution Once you decide on your lowest screen resolution you need to design your web site for that resolution This means that all your graphics will be designed for this resolution.
How to get started with creative coding Creative code is fun but daunting to break into. If you look at a crazy WebGL experiment or a site with complex CSS transitions it's easy to feel like only a coder Jedi could pull off such feats of engineering brilliance. There's truth that being technically proficient goes a long way, but you don't need to know everything about everything in order to accomplish something beautiful. I've built my company around that practice. But I'm also not interested in technology for technology's sake – nothing makes me feel worse than working really hard on some crazy WebGL project only to fail basic user goals. Of course that meant putting my money where my mouth is. The inner workings The logo is that it isn't just one HTML canvas, but actually a number of canvases each doing a specific job: The footer, which drew the triangle/color craziness at the bottom fo the page. The colors are the result of a plugin called Flat Surface Shader, made by Matthew Wagerfield and Tobias Schneider. Tool building