Perfect Full Page Background Image
Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more.
Latest Articles RSS
What is Cross Site Scripting or XSS?
I think the name “cross site” is confusing. It’s easy to hear that and think it involves code on one website attacking code on another website. That’s not what it is. Not to mention its unfortunate “true” acronym.
It simply means: executing abritrary JavaScript code on the page.
My Slides from the jQuery Summit
At this year’s jQuery Summit I gave a mostly-totally-revised version of my talk “Solving Common Client Requests with jQuery” that I originally gave at the Bay Area jQuery Conference earlier this year.
I always think slides are a little weird outside of the context of the talk, but I also know some folks like to see them. These also happen to contain some JS Bin URL’s which might be of some use.
Hash Tag Links That Don’t Headbutt The Browser Window
Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this…
Show Image Under Text (with Acceptable Fallback)
WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a gradient to animate through the background of the text. Then we touched on it again for the transparent borders idea.
Let’s take a look at using it to have an image be visibile only through the letters of the text. One more cool thing…
Latest Screencast
#93: CSS3 Slideup Boxes
Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
Latest Snippets
CSS Multiple Columns
CSS Media Queries for Standard Devices
HTML Add Spaces to Dock in OS X
HTML Multiple File Input
HTAccess Subdirectories URL Internally Redirect to Query String
HTAccess PHP Error Logging
JavaScript Test for Internet Explorer in JavaScript
JavaScript Multiline String Variables in JavaScript
jQuery Highlight Related Label when Input in Focus
jQuery Better Broken Image Handling
WordPress HTML5 Shim in functions.php
WordPress Reset Admin Password Through Database
PHP Associative Array Syntax
PHP Unzip Files
Latest Links
20 Things I Learned about Browsers and the Web Direct Link →
Really neat presentation of a book by the Google Chrome Team. Everyone seems to be calling it an “HTML5″ book There is certainly a bunch of HTML5 going on, but there is also loads of CSS3 and clever JavaScript at work. Read a few pages then close the tab and then go back to it to check out a fun bookmarking idea.
Of particular interest is how they are using window.history.pushState() and window.history.replaceState() to change the URL in the browser…
CSS3 Finalize Direct Link →
jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document <style> blocks, find the CSS3 stuff, then append a new <style> block to your page with the appropriate vendor extensions for the browser you are in.
This solves one of the most common complaints about using CSS3, that is bloats your stylesheet with loads of repetitive properties.
Worked great in my limited testing.…
CSS Gradients for IE9 Direct Link →
This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in structure to how you create a -webkit-gradient. Thus you get the benefit of programatic declaration of colors and ease of updating.
Earlier in the article, Biggs also makes a good point about transitions and why doing them through CSS…