background preloader

Tips and tricks

Facebook Twitter

A new micro clearfix hack. The clearfix hack is a popular way to contain floats without resorting to using presentational markup.

A new micro clearfix hack

This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements. Here is the updated code (I’ve used a shorter class name too): This “micro clearfix” generates pseudo-elements and sets their display to table. Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hiddenIt ensures visual consistency with IE 6/7 when zoom:1 is applied.

Modern.IE: Testing made easier in Internet Explorer. Email Address Encoder. Last Updated: Tuesday, February 22, 2011 This form will allow you to encode your e-mail address through the use of Character Entities, transforming your ascii email address into its equivalent decimal entity.

Email Address Encoder

Simply enter your regular e-mail address in the first text box, click the encode button, and then highlight and copy the resulting code produced in the second text box. This encoded e-mail address can be read and translated back into its original ascii text by almost any web browser without any further action on your part. Just replace all instances of your e-mail address on your pages with the code, and you won't have to worry (too much) about spam lists. For example: On the visible web page: "For more information, send email to yourname@domain.com. " In the source code for the web page, the above should look like this: Spam Resources: The Spam Plan - a simple plan for a spam free life. Return to the West Bay Web Home Page. A Simple Parallax Scrolling Technique. Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.

A Simple Parallax Scrolling Technique

As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in! Step 1: The Markup This technique revolves around controlling the speed of background image. I am using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. According to the specification for Custom Data Attributes, any attribute that starts with data- will be treated as a storage area for private data.

Since all we need to do is control the speed of the background images, we'll use data-type="background" and data-speed="10" as key attributes to specify the necessary parameters. Shapecatcher: Draw the Unicode character you want! Vérifiez la compatibilité navigateur, test de navigateur et de plate-forme. - Browsershots. Web Development Tools. 17,.67,.83,.67) ✿ cubic-bezier.com. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs. InShare33 The best strategy for dealing with Internet Explorer 6 is not to support it.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. You've spent hours on it, but you just can't seem to get your layout right. This isn't one of those rants about IE6 or a campaign to try to kill it. I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6.

This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Update: Yann Faurie has graciously provided a French translation of this article. Table Of Contents Strategies. PunyPNG - PNG Compression and Image Optimization - Gracepoint After Five. Convertisseur de caractères et de codages Unicode. Fake images please? {placekitten}