Categories
CSS & HTML Tips Web Design Tips and Insights

Styling an Alphabet of 26 Letters in HTML and CSS

What does an alphabet have for us to style? It’s no more than a list of 26 single-letter items! Yep. But wait until you have seen this alphabet of 26 letters author index.

Now do you want to know how to achieve that? I coded it quite a while back and it just occurred to me that it would be nice to share it with my fellow readers. You can easily apply the hover tricks to other applications.

The HTML

I know, it’s everything but simplicity and clean code. That is the price for the interactive delicacies.

<div id="author_alphabetic">
	<ul>
		<li><a href="#" title="A"><span class="first"><span>A</span></span></a></li>
		...
		<li><a href="#" title="Z"><span class="first"><span>Z</span></span></a></li>
	</ul>
</div>

Note the extra span I have for the letter links for the fly out and rounded corner background.

The CSS
#author_alphabetic {
	text-align:center;
}
#author_alphabetic ul {
}
#author_alphabetic li {
	float:left;
	margin:3px 3px 0 0;
}
#author_alphabetic a {
	position:relative;
	width:74px;
	height:74px;
	border:1px solid rgb(203, 214, 149);
	text-decoration:none;
	font:2.4em/2.4em "Times New Roman";
	float:left;
	display:inline;
	color:#330;
}
#author_alphabetic a span {
	background:url(../image/alpha_br.png) no-repeat right bottom;
	width:75px;
	height:75px;
	display:block;
	position:absolute;
	top:0;
	left:0;
}
#author_alphabetic a:hover {
	background:rgb(224, 232, 158);
	z-index:100;
}
#author_alphabetic a:hover span.first {
	display:block;
	font-size:3em;
	line-height:1.1;
	font-weight:bold;
	color:#15362d;
	cursor:pointer;
	width:100px;
	height:100px;
	top:-1px;
	left:-1px;
	background:rgb(224, 232, 158);
	border:1px solid rgb(203, 214, 149);
}
#author_alphabetic a:hover span span {
	background:url(../image/alpha_br.png) no-repeat right bottom;
	display:block;
	position:absolute;
	width:101px;
	height:101px;
}

Highlighted style rules are the ones that you should pay special attention to in this technique. A similar application can be spotted with the top deep blue menu at the home page of Charm HTML wherein you can make the size of the inner element bigger than the container or the position of it out of the normal document flow to mimic an outstanding bookmark while keeping the underlying layout intact.

Categories
CSS & HTML Tips Web Design Tips and Insights

CSS: Styling File Upload / Select Input Control <input type="file" … />

Let’s face it, the native implementations of file uploading control of HTML form is ugly, throughout most of the browsers, and not consistent at all. Plus, <input type=”file” … /> just doesn’t play by quite a few of the CSS input styling rules such as border and background, making it a even bigger challenge.

Now how do we bend this rigid boy to our visual pleasure?

A few examples

  1. a contact form
  2. a file upload form

I’m not saying those are beautiful just when they come down to this technique I’m going to tell you, it’s absolutely possible to style an incredible control out of the native select and upload file input element.

The solution

The solution is to make use of the CSS opacity rule to give total transparency to the file upload control while maintaining it’s functionality, placing fake controls (a text field and a fake image button) between them and the visitor.

The HTML
<li class="upload">
	<label for="realupload">Upload Image: </label>
	<div class="fakeupload">
		<input type="text" name="fakeupload" /> <!-- browse button is here as background -->
	</div>
	<input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" />
</li>
The CSS
.upload {
	position:relative;
	width:664px;
}
.realupload {
	position:absolute;
	top:0;
	right:0;

	/* start of transparency styles */
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity:0);
	/* end of transparency styles */

	z-index:2; /* bring the real upload interactivity up front */
	width:270px;
}
form .fakeupload {
	background:url(browse.gif) no-repeat 100% 50%;
}
form .fakeupload input {
	width:401px;
}

All css width properties have to be decided upon your actual situation, as the native appearance of all upload controls vary browser by browser, you will adjust all of the width for the best compatibility and functionality.

There’s also a small line of javascript that simulates the function of real upload control on the fake one:

this.form.fakeupload.value = this.value;

To make it look real!

Categories
CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

What are the Mandarin Chinese web safe fonts?

As I’m a mainlander Chinese, I can only speak for those computers and browsers who live in central P.R.China.

If you are making a design for or in Mandarin Chinese, especially Simplified Chinese, beside those common English web safe fonts such as Arial and Verdana shipped in MS Windows by default that 95% mainlander Chinese rely on, you can specify font-family in CSS by the following typefaces for Chinese characters, they are almost totally safe across all Chinese browsers:

  1. 宋体, mostly used for large chunks of paragraphs in small font sizes.
  2. 黑体, works out well in either headings or paragraphs.
  3. 幼圆, slender touches and rounded corners, pearl’s way.
  4. 隶书, renaissance of a rather traditional Chinese brush writing dating thousands of years back, generally modest and conservative with an ancient style yet powerful from within.
  5. 微软雅黑, the new Chinese character font introduced in Vista and with IE7, though not that safe compared with the former 4 in that it’s not automatically included in the Chinese localized version of Windows XP, it’s generally accepted as the most elegant and beautiful of the Mandarin Chinese web safe fonts by Chinese web designers.

I have also made a screenshot of how these fonts look in real Chinese characters in FF2, with normal, bold and italic states for each typeface. The 4 characters is Shakespeare in Chinese in the right column with the name of the font in the left column.

chinese websafe fonts

Categories
CSS & HTML Tips Web Design Tips and Insights

Make scaled images in IE smooth

As ugly as it can get, an image displayed in IE in dimensions other than its original physical sizes would look rugged. So how to smoothen scaled images in IE? An engineer at flickr revealed the secret:

img { -ms-interpolation-mode:bicubic; }

That’s it! Just add the rule to your stylesheet!

smoothenscaledimage

Categories
Fonts & Typography

Symbolic fonts: Webdings and Wingdings

Webdings, Wingdings, Wingdings 2 and Wingdings 3 are very interesting symbolic fonts shipped in all versions of MS Windows but not included in other OS and platforms such as Mac OS. All versions of Internet Explorer display them correctly in CSS typography but in other browsers you can’t expect them safe for text glyphs because most of the characters or symbols are not found in Unicode.

Make a tiny image of the glyph for web usage.

Here is a complete collection of usable glyphs found in Webdings, Wingdings, Wingdings 2 and Wingdings 3 assembled in layered PNG. Download and open it in Fireworks so you can easily extract any of them to make an adorable tiny symbol image in your web designs or logo designs.

Webdings, Wingdings, Wingdings 2, Wingdings 3

Note that they are not web safe because only Windows comes equipped with these fonts. For a list of web safe fonts, read here.

Categories
CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

Let’s use Lucida Grande for a change – 13 web safe fonts revisited

The 10 web safe fonts, Arial, Impact, Georgia, Times New Roman, Trebuchet MS, Comic Sans MS, Verdana, Tahoma – ahhh, wait a minute, I can’t remember the last 2. Let me take a look at the 9 web safe fonts, ok, it’s Courier New and Arial Black. Tahoma isn’t included in the 9 browser safe fonts list – are those that look almost the same across platforms such as Windows, Mac OS and other reading devices able to load web pages.

Serious web designers use and only use these fonts for web page texts to make sure the intended typography are correctly rendered in all visitor browsers. In addition to a few non-text symbolic fonts such as Weddings, below is an alphabetical list of the common web safe fonts for CSS typography:

(Windows font | Mac font | Font family)

  1. Arial, Arial, Helvetica, sans-serif
  2. Arial Black, Arial Black, Gadget, sans-serif
  3. Comic Sans MS, Comic Sans MS, cursive
  4. Courier New, Courier New, Courier, monospace
  5. Georgia, Georgia, serif
  6. Impact, Impact, Charcoal, sans-serif
  7. Tahoma, Geneva, sans-serif
  8. Times New Roman, Times, serif
  9. Trebuchet MS, Helvetica, sans-serif
  10. Verdana, Verdana, Geneva, sans-serif

Yeah, right. But that’s not all. These 10 fonts are not only web safe but also bear the same name across platforms. Or is it? Nonetheless, we have a few more choices than these that are also safe to use in cross-platform and cross-browser CSS typography:

(Windows font | Mac font | Font family)

  1. Lucida Console, Monaco, monospace
  2. Lucida Sans Unicode, Lucida Grande, sans-serif
  3. Palatino Linotype, Book Antiqua, Palatino, serif

Actually there are a few more, however as they are bitmap fonts rather than in TrueType, they’d look rugged when resized in browsers.

The 9 web safe fonts I have included in an image are very very incomplete. Not only does it miss Tahoma, Geneva, sans-serif but 3 advanced web safe fonts that’s our point here. Though they have fundamentally rather different names on different platforms, you can just copy and past the font-family lines above to use in your CSS, expecting the typography to look exactly the same on both Windows and Mac.

Let’s use Lucida Grand for a change! 🙂

Categories
Programming Tips & Insights Web Design Tips and Insights

One SSI directive to save all programming muggle’s effort and time

SSI stands for Server Side Includes that is a default module in Apache web server. In essence, it provides a very simple mechanism to include one HTML file in another one, thus tremendously reducing redundant coding and increase the ease of later maintenance.

So, to get 80% out of SSI, the only directive you pretty much need is this:

<!--#include virtual="/parts/footer.html" -->

Make sure ‘include’ is immediately after ‘#’ without any blank spaces.

As the file name suggests, you are adding a common site footer. You can do this to all other pages on your site, making updating footer very easy because you only need to modify /parts/footer.html to get the changes done.

To get 80% our of SSI, you only need one directive, that is <!–#include virtual=" … " –>. It’s the essence I believe. And to get the rest 20%, you might also want to know about these handy ones (incomplete, just examples I think that will amuse you):

Get file size:

<!--#fsize virtual="/parts/ads.html"-->

Get last modified date:

<!--#flastmod virtual="index.html"-->

Get visitor IP address:

<!--#echo var="REMOTE_ADDR" -->

Get today’s date:

<!--#echo var="DATE_LOCAL" -->

Setting and getting a variable:

<!--#set var="name" value="Rich" -->
<!--#echo var="name" -->

You can even do some concatenation:

<!--#set var="firstname" value="Rich" -->
<!--#set var="lastname" value="Mond" -->
<!--#set var="name" value="${firstname} ${lastname}" -->

You get the idea. =) However, to get SSI to work on your server, you might need to add the following directives to httpd.conf (that is, if you are your own server administrator) or .htaccess (if you are on your own by shared hosting):

Options +Includes

For further reading, please refer to:

  1. Apache SSI Tutorial
  2. Kavoir SSI Framework
  3. wikipedia SSI
  4. HTML Code Tutorial, SSI help forum is a good place to go seeking for help. I’m there by the name of yangyang. =)
Categories
CSS & HTML Tips Fonts & Typography

The 9 web-safe fonts

9 web safe fonts to use in your coding

Update: There’s actually one more font you can use freely and safely across platforms, that is Tahoma.

Update: Alright, there’s actually 3 more web safe fonts you can use. Check them out here.