Tildemark blogs

Making simple hover image using CSS

Sat, 30 Aug 2008 08:58:44 +0800

I always forget this basic image hover. Im posting it here in my blog for future referrence and for you my readers as well. Making hover images is fairly simple and very straight forward. It only needs a couple of css lines using the anchor element and its hover by manipulating the background image. Hover your mouse pointer to the image below and see a working sample of the image hover using CSS.

Home

Download image hover resources if you want to try it on your own.

Below is a simple HTML code used to display the image hover.


Home

The span tag allows us to hide its content using the display:hide; command in CSS. The nav-home value will define how our image will then be displayed. See below for the CSS code.


a#nav-home {
display: block;
text-decoration: none;
width: 120px;
height: 20px;
margin: 0 auto;
background-image:url(images/hover1.gif);
}
a#nav-home:hover {
background-image:url(images/hover2.gif);
}
.nav-hide {
display: none;
}
#nav-home img {
border: 0;
}

writing accessibility CSS code for the color blind

Mon, 14 Jul 2008 10:58:21 +0800

Not being able to see the differences between colors is a bit trouble some. Imagine yourself looking at the traffic light and not seeing and red color. These people will see yellowish brown color instead of the red color. Red-green color blind is also called Protanopia, people that are less sensitive to red light and Deuteranopia for people who are less sensitive to the green light. Some study determined that about 10% of the male population are color blind. I am happy I do not belong to those 10%.

That is why link urls should stay underlined to help people with color blindness see it immediately. since we are not able to adjust CSS being used on the website we browse, we will just instead use our own CSS page by specifying it on our browser. if you are color blind, this page will help you a lot. If you are not color blind, i don't recommend you using it because it would be weird.

First lets create our own CSS file and specify it via our browser settings later.


* {
  color: #000 !important;
  background: #fff !important;
}

a {
  text-decoration: underline !important;
  color: #fff !important;
  background: #000 !important;
}

the !important specifier must be present on your CSS codes to tell the browser its important and must override the other CSS codes.

Using Internet Explorer navigate to

Tools -> Internet Options
Click on the Accessibility button
Place a check on the 'Format documents using my style sheet' option
Browse to the location where you saved your CSS file above.
then click OK

If you are using Firefox go to your profile folder and edit your userCrome.css file of your userContent.css file. just copy-paste the CSS code above to the bottom portion of the file.

Tableless form using HTML with CSS

Fri, 08 Dec 2006 09:00:33 +0800

Making a tableless form is fairly very easy. Like the one shown below:

HTML code:

Add this to your CSS:

#testform label,input ,textarea{
display: block;
width: 150px;
float: left;
margin-bottom: 5px;
}
#testform label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#testform br {
clear: left;
}

transparent images using css with opacity

Wed, 06 Dec 2006 16:21:25 +0800

Using CSS we could add some uniqueness to our hml pages using transparent images. for example, if we have a global background image ang on top of it there is a gif image only the border or the edges would become transparent.

Specifiying the image opacity allows us to adjust the transparency of our images. here's a sample code. i usually place it under #container tag on my css file.

/* CSS file */
body{
background-image: url(images/background.gif);
}

#container{
filter:alpha (opacity=80); /* MS Internet Explorer */
filter:progid:DXImageTransform.Microsoft.Alpha (style=0, opacity=80) /* MS IE proprietory */
-moz-opacity: 0.8; /* Mozilla v1.6 and below */
opacity: 0.8; /* CSS-3 Standards */
-khtml-opacity:.8 /* Safari */
}
/* CSS file */

the code above makes all the image found on the #container tag lessen its opacity by 80%. not really usefull for me but, you might like it so here goes.

CSS Floating Image

Sun, 27 Aug 2006 00:01:27 +0800

Theres a request with this entry from my last blog, and because i can still remember it, im going to post it here. the image stated in the url will be fixed no matter how the page is scrolled down.

change the url with the correct image filename you want to appear.

Creating Drop Shadow Using CSS

Mon, 14 Mar 2005 12:40:21 +0800

Imagine using text with drop shadows, no more images and faster loading...
I been looking for ways in how to make a drop down shadow and thought you might be interested in my discovery. If you are familiar with Adobe Pagemaker then it will be easy for you.

By placing anoter text of darker color on top of the other with a light color will do the trick. The only problem i've seen is that when you try to disable css, the text maybe duplicated.

tildemark blogstildemark blogs

Css:


.container { 
  position: relative; 
  left: 1px; 
  top: 1px; 
  color: #ccc; 
}
.text { 
  position: absolute; 
  left: -2px; 
  top: -2px; 
  color: #000;
}

Code:


tildemark
tildemark