CSS Drop Shadows
They’re the corkscrew in every graphic designer’s Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends — and static images with a fixed background effect are not very adaptable. But what if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? Interested? Here’s how it works: you need to make a drop shadow image in the image editor of your choice. We’ll start by giving a shadow to an image and then move on to other block elements. And its corresponding markup (one div is the only extra markup we’ll need): The following illustration shows how the technique works: First, our previously prepared shadow file will be set as background for the div. background: url(shadow.gif) no-repeat bottom right; That “!
CSS | Visual-Blast Media
CSS Compressors - CSS Optimizers One of the most important thing when developing websites is page loading speed, to load as quickly as possible, especially in the case of large websites with lots of CSS code where faster loading means increased usability and user satisfaction. CSS Compression tools improves your load time performance by removing comments from code, placing each command in one single line, removing unneeded ‘white space’ characters like space, new line, and tab to reduce its size. Keep in mind, if you really want to optimize website performance, after the development stage, you should go further with CSS sprites, minifying JavaScript, gzip compression and caching your files. Try out these online CSS optimization tools, some of them also offer JavaScript compression, and see how they can speed up website response time and save your bandwidth as well. Online CSS Compression Tools 1. cssdrive.com CSS Compressor – comes in 2 modes: Normal and Advanced. 2. Continue reading …
13Styles.com - css menu styles, high quality css menus, website navigation menus
Sons of Suckerfish
Back in November 2003, 'Suckerfish Dropdowns' was published in A List Apart. Since then it has been a popular method of applying dropdown menus thanks to its lightweight, standards-compliant, accessible, cross-browser nature. The basic idea is that you construct a dropdown menu with CSS and then bolt on a small piece of JavaScript to mimic the :hover pseudo-class that certain browsers (namely Internet Explorer) don't fully support. While working on a new and improved Suckerfish Dropdowns method, we got a little bit carried away and both widened the idea and made it more general. This collection comprises seven articles: Sons of Suckerfish - The article you're reading right now - an introduction to The Suckerfish, how it works, how it can be implemented and why it is better than other methods. The Suckerfish Right. This is the code used in the Suckerfish :hover and Son of Suckerfish Dropdowns articles. Becomes: The way it finds the elements to attach behaviour to has also been changed.
/my/flicker.html
This page is basically a duplication of a comment I made on mezzoblue. Introduction Whilst developing a work-around to background-attachment:fixed for IE7, I came across the horrible image flicker problem. Oh. And this is a browser problem not a server problem. That pesky image flicker!! To clarify: only affects IE6.0 (not IE5.0/5.5) only affects CSS background-images which are influenced by some dynamic effect on the page (these are numerous and are not just hovers) is especially persistent when IE’s cache settings are “Every visit to the page” (a common developer’s setting) the force-no-vary server configuration does not fix the flicker for the above setting. Apache As well as these lines: #this stops screen flicker in IE BrowserMatch "MSIE" brokenvary=1 BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 BrowserMatch "Opera" ! I added the following lines to my Apache httpd.conf file*: Then I tuned on the Apache module mod_expires: LoadModule expires_module modules/mod_expires.so Microsoft IIS
'min-height' in Safari - Anne’s Weblog about Markup & Style
As you might know, Safari 1.2, doesn't support min-height. While some people don't really care about the Mac (like me, although I would want one) and others do I found a solution after I gave up. A person, who doesn't see that much value in web standards, made a comment about the Safari failure (the complete site was readable, only visually not the same as Mozilla) and concluded that my CSS knowledge wasn't sufficient. I immediately thought of how I hate the CSS table model and directly after that I saw how it could solve my problem. In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). All I had to do to make min-height work cross-browser, was using something else: Internet Explorer will ignore the display property (actually, it treats it like display:block;) and will handle height as min-height, since IEs handling of height is stupid.
stu nicholls | CSS PLaY | centering floats
Centering Float Left Menus Revisited 24th January 2009 a centered floated left menu (known width) and.... a centered floated left menu (unknown width) copyright © stu nicholls - CSS play Information I have had a few people ask if they could center a floated left menu when the width of the items in the menu is not known, and I had thought that it was not possible. Revisited 24th January Revisiting this to show an easier method that is cross browser friendly. For most single level menus this method will work in all the major browsers and doesn't use hack, inline-blocks or display table/table-cell. All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden. The <ul> tag is then styled with a relative position and floated left with a left position of 50%. Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%. ...and that as they say is all that is needed. Copyright
