Displaying keyword search results 1 - 4
Created by James on July 04, 2009 16:30:40 Last update: January 11, 2011 21:21:59
If you are looking for a solution for a progress bar, I direct you to the following resources: Bare Naked App provides a simple and elegant solution based on pure CSS with two images. You control the percentage of completion through the background-position attribute of the CSS. HTML:
<img src="/images/percentImage.png" alt="...CSS:
Created by James on September 07, 2010 03:11:39 Last update: January 11, 2011 20:28:33
<!doctype html> <html> <head> <title>Vert...For some reason, the following code did not work although...
Created by James on July 19, 2009 20:51:23 Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by James on July 19, 2009 23:29:42 Last update: July 19, 2009 23:33:24
Existing techniques use background images to make round corners. I present a technique here that uses four foreground images: . I think this technique is easier to understand and use. The only requirements are: Add position: relative to the CSS for the box to be rounded Matching border and color between the box to be rounded and the corner images Here's the HTML with static elements:
<!doctype html public '-//W3C//DTD HTML 4.01//EN' ...The markup is even easier if we use jQuery to add the corners dynamically:
<!doctype html public '-//W3C//DTD HTML 4.01//EN' ...This is the result: