Should we abandon rounded corner techniques that require additional HTML markup in favor of emerging CSS techniques that are not yet supported on all browsers? Apparently, the answer is an overwhelming YES. (more…)
Posts Tagged ‘CSS’
A Whole New Web?
Thursday, June 25th, 2009CSS Absolute Positioning
Monday, April 6th, 2009Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use <div/> tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage. (more…)
CSS in Print Media
Monday, February 23rd, 2009Most of the time, web designers will optimize a site to display on screen media (any type of screen, such as a computer monitor or a mobile device screen). If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy. Depending on your design itself, the visitor’s printer, and the visitor’s web browser, you can get a number of different results when printing a given page from the internet. Here are a few quick and simple steps you can take to make your site display just as well on paper as it does on the screen. (more…)
Rounded Corners in Mozilla and Safari
Monday, January 26th, 2009The W3C’s CSS3 specification includes an oft-requested CSS attribute called border-radius. Using this attribute, you can create rounded-corner boxes that use no images, script, or other fancy DHTML tricks (pure CSS). This will make your site flexible, faster, and more accessible. It’s not yet supported in Internet Explorer 7/8, but other modern browsers have already introduced support for this fantastic CSS feature. (more…)
Pure CSS Image Hover
Monday, January 5th, 2009Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect. (more…)
Create a DHTML Tab Strip
Tuesday, November 18th, 2008Tab strips are commonplace throughout the web, and they’re utilized in a wide variety of ways, such as in site navigation or form wizards. Organizing links in a tabbed format can add quite a bit of style and functionality to your site, as many visitors are already familiar and comfortable with using tabs on other websites and even on other platforms such as their operating system. This tutorial shows you how to create a simple DHTML tab strip using HTML, CSS, and a small bit of JavaScript. (more…)
Five Elegant Rounded Corner Boxes
Thursday, October 30th, 2008I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity. (more…)
All About Table-less Column Design
Monday, October 13th, 2008There are a number of ways to create vertical columns in your XHTML design without using the <table/> tag and the horrendous amount of HTML that always seems to accompany it. Each method listed here is superior in various situations, so choose a good fit for your particular design. (more…)
Karate Corners: XHTML/CSS Rounded Corners
Monday, October 6th, 2008I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested <div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once. (more…)