Skip to main content

Posts

Showing posts from November, 2011

Stylish text with the css text-shadow property...

This is a  cross-post of an article  I wrote for the  hacks.mozilla.org  blog. It shows off some of the fun stuff web developers can do with the  text-shadow  feature that will be released as part of Firefox 3.5. The  text-shadow  CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow. The  text-shadow  property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3 and has now  made it into Firefox 3.5 . How it Works According to the CSS3 specification, the text-shadow property can have the following values: none | [<shadow>, ] * <shadow>, <shadow> is defined as: [ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ], where the firs...

Highlighting Search Keywords in a DataGrid Web Control

Introduction In many of the popular search engines (such as Google), when you perform a search the resulting page displays a short text snippet from each search "hit" with each of those search words you had specified in bold type face. Similarly, if you view Google's cached version of a search hit, the word(s) you searched on are highlighted different colors to make them easy to pick out. This article will examine how to provide such functionality in ASP.NET when using a DataGrid Web control. A DataGrid is an excellent Web control to list search results. Essentially you provide a TextBox Web control into which a user can enter a search query. When the user submits the form, it's posted back and the database is queried for matching records. These returned results can then be databound to the DataGrid, which will show one result per HTML table row. For more information on the DataGrid Web control be sure to read Scott Mitchell's A Thorough Examination of the D...

CSS Trick: Turning a background image into a clickable link

One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this: ASp.net Problem Solution Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles: 1 < a href = " http://problemfacing.blogspot.com/ " title = "ASP.NET Problem Solution" id = "xavisys-logo" > ASP.NET Problem Solution </ a > That’s all the (X)HTML you’ll need to make your background image clickable. Your link should look something like this:  Asp.net Problem Solution So, how can we make a background image a clickable link? It turns out it can be done with a clever CSS t...