CSS Hack: Move Your TypePad Navbar Above the Banner. Yes Virginia, you can move your navbar above your banner!
(What's a navbar?) Here's how: The default arrangement for your blog is Banner stacked on top ofThe navbar (if there is one) stacked on top ofThe content and sidebarsThe footer (if there is one) So using a test blog with Journal Black theme. Color Palette Generator: Automagically create a color palette from any photo. Perfect multi-column CSS liquid layouts - iPhone compatible. By Matthew James Taylor on 27 October 2007 This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch.
They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info: Free iPad CSS layout with landscape/portrait orientation modes. By Matthew James Taylor on 27 May 2010 The iPad has finally launched in Australia today, hooray!
I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. The Floating Boxes CSS Layout. By Matthew James Taylor on 16 June 2007 An alternative to the standard 'fixed width' or 'liquid layout' designs For those who can't wait, go straight to the demo page.
If you prefer, see my liquid layout designs. Layout problems for variable screen sizes Anyone involved in online advertising will tell you that screen real estate is worth $$$! How to convert a liquid-layout to a fixed-width design with simple CSS. By Matthew James Taylor on 2 July 2008 A lot of people have emailed me asking how they can convert my liquid layouts into fixed-width designs - this post will explain how that's done.
The process is very simple and it will work with all of my liquid layouts (percentage and em/pixel versions). Equal Height Columns with Cross-Browser CSS and No Hacks. By Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem.
How To Create a Pure CSS Polaroid Photo Gallery. Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix.
Wading birds. Pure CSS Sliding Image Gallery « tobypitman.com. So, another random CSS3 experiment!
This time it’s an image gallery that has a slide effect. This was a bit tricky to work out but I got there in the end. The idea is to get one image to slide in while the current image slides out. A Photograph Gallery. Updated 24th September 2009 copyright ©stu nicholls - CSS play Information. 4 Uber Cool Css Techniques For Links. I thought of writing a series of tutorials for various link techniques. When I start writing I realized that they are pretty simple (yet effective ) and it might be better to have them summarized. Links (A tags) are one of the most important elements on your document. Gallery - simple photo click. Simple photo click gallery 2nd November 2007 Caption #1Some pretend to see a difference between the Greenland whale of the English and the right whale of the Americans. Caption #2But they precisely agree in all their grand features; nor has there yet been presented a single determinate fact upon which to ground. Caption #3It is by endless subdivisions based upon the most inconclusive differences, that some departments of natural history.
Caption #4The right whale will be elsewhere treated of at some length. CSS Decorative Gallery. Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. Creating a Slick Auto-Playing Featured Content Slider. I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose. Both of these examples use the Coda Slider pretty much "out of the box".
Suckerfish HoverLightbox Redux. A Scrolling Photograph Gallery. Hoverbox Image Gallery. RGB Color Codes Chart. Jess & Russ. Pink Paislee + Glue Arts - Say Chez! Vintage Wanna Bee: HOW TO MAKE A FB TIMELINE COVER... S.britt.com - Some Sort of Website. On mouse over. CSS Borders: The Basics And Rounded Corners. CSS Transitions: A Simple Way To Delight Your Visitors. Centering in the Unknown. CSS Background: There’s More To Know Than You Think. Understanding CSS’s vertical-align Property. Numbering In Style. How Clean is Your Web Design? Source Code Comment Styling: Tips and Best Practices. Is your website secure? Is your website secure? Bring Your Forms Up to Date With CSS3 and HTML5 Validation.