November 4, 2007 – 7:10 am This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!
October 29, 2007 – 8:11 am Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.
October 29, 2007 – 8:06 am Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.
October 29, 2007 – 8:03 am Welcome to ColorBlender – your free online tool for color matching and palette design!
October 29, 2007 – 8:01 am DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.
October 29, 2007 – 7:59 am Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.
October 29, 2007 – 5:38 am There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer)
October 28, 2007 – 8:32 am So we brought you some great CSS tips to help with accessibility over the weekend, and we discussed how layout helps users get into your page with our look at stumblers and Diggers habits, now its time to introduce the layouts…
October 28, 2007 – 8:17 am These are free XHTML / CSS website templates available to use without any limitations. They can be used on a noncommercial site aswell as on a commercial one. Keeping a small credit link in the footer is not obligatory but shows your appreciation and support.
All templates are hand coded and lightweight (under 60KB) which ensures fast loading. They can be easily used as a standalone templates or in combination with sNews to create a fully dynamic site.
October 28, 2007 – 8:15 am CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.
October 28, 2007 – 8:12 am This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day
October 28, 2007 – 8:11 am CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.
October 28, 2007 – 2:30 am Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
October 25, 2007 – 11:50 am In the past, memory leaks haven't posed huge problems for Web developers. Pages were kept relatively simple and navigation between different locations within a site was a great way to clean up any loose memory. If there was a leak, it was most likely small enough to go unnoticed.
New Web applications live up to higher standards. A page might run for hours without being navigated and retrieve updated information dynamically through Web services. Language features are pushed to the breaking point by combining complex event schemes, object-oriented JScript, and closures to produce entire applications. With these and other changes, certain memory leak patterns are becoming more prominent, especially those previously hidden by navigation.
The good news is that memory leak patterns can be easily spotted if you know what to look for. Most of the troublesome patterns you might face have known workarounds requiring only a small amount of extra work on your behalf. While some pages might still fall prey to small memory leaks, the most noticeable ones can be easily removed.
October 25, 2007 – 11:49 am Great information about lists, menus and nav with css. Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
October 25, 2007 – 11:36 am This single HTML/CSS file will give you the ability to have a static header, side menu, footer, with a dynamic area in the centre for content. This is something that I was told could not be done without use of JavaScript. With the help of a lot of research and the mIRC chatroom #CSS I have finally figured it out. For all you interface programmers out there that want a single 100% use of screen space no mater how its resized please view the source and help yourself to the CSS and HTML code
October 23, 2007 – 7:17 am Experiments with advanced use of the browser DOM.
Warning: most of this stuff will require a fully DOM-compliant browser, which means Internet Explorer 5.5 or better, or Firefox, or Safari, or Opera. They may work in other browsers; alternatively, they may not.
October 23, 2007 – 6:54 am Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.
October 23, 2007 – 5:00 am I have a request. As a user of Windows Vista, I would like to ask all of you web designers and developers out there to please add Windows Vista fonts to your stylesheets. My reason for asking this is, well, because I didn’t upgrade to Windows Vista to stare at the same ugly set of Windows fonts I’ve had to endure for years. I hate Arial, Verdana, Trebuchet, Courier New, and Times New Roman, and Georgia isn’t too hot either. Bill Gates must share my opinion, because he made sure that Windows Vista came with a replacement for each one of those classics, and as far as I’m concerned the new Windows Vista fonts are far better designed than their predecessors.
October 19, 2007 – 6:10 am The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
October 19, 2007 – 5:47 am The original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class.
Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.
October 19, 2007 – 5:45 am Yes, the title may look like this post should be on an amateur blog and that it will be full of references to clip art and animated gifs, but this is serious. I’ve compiled a list of what I think are 25 ways to improve your website in as little time as possible. All can be done in a matter of minutes. Now, a website is hard work and usually there are no quick fixes but this list should provide you with a few pointers to make some updates today. If you like, it can also be used as a basis for a quality check document.
October 19, 2007 – 5:41 am A whole bunch of examples demonstrating various HTML elements and CSS properties in action. The web pages are minimal, bare-bone examples so that you can clearly see what's going on. Just view the source.
October 15, 2007 – 6:58 am Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.
October 15, 2007 – 6:40 am Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS.
October 15, 2007 – 6:22 am Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
October 11, 2007 – 5:42 am CSS Navigation Techniques
October 11, 2007 – 5:25 am 13styles is all about css website navigation menus. The menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.
October 11, 2007 – 5:05 am Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.
October 11, 2007 – 3:55 am A lot of the leading websites nowadays have fixed sizes, made to fit into a 800*600px resolution screen, but this has disadvantages: People with an unusually high resolution, see a tiny website or people with limited visual acuity have problems reading the text. Normally this should not be a problem because all leading browsers have the ability to zoom (Opera even zooms pictures).
But, a problem that probably everyone has encountered when zooming a random webpage is the following: The sizes grow unproportionally and in the end you end up with different text fields covering each other. The whole layout is completely messed up!
Why is that? Because most of us use pixels to define the sizes of their different boxes and fonts!
You can avoid this bad behaviour by using em-Quads for sizes
October 10, 2007 – 6:05 am HTML XHTML CSS tutorials, references, code examples. Play with the code, try how it works
October 10, 2007 – 5:24 am Using an unordered list and a couple of images, we can use CSS to create effective tabbed navigational menu’s which this tutorial will demonstrate. This demonstration uses the Sliding Doors technique which not only allows for long text but also enables the user to enlarge the text within their browser without breaking the tabs.
October 10, 2007 – 3:56 am Despite it being in the CSS 2 specification from 1998, downloadable fonts specified with the @font-face at-rule never caught on.
October 9, 2007 – 5:07 am The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused editor and development environment for building Ajax applications. It features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.
October 9, 2007 – 4:37 am How to set the opacity of an HTML element.
October 9, 2007 – 2:35 am Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.
October 8, 2007 – 5:30 am More stuff about the button tag. Why did I never know of this before. I'm quite ashamed ;-) If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup.
October 8, 2007 – 5:23 am Create HTML Form in Seconds
