Recently in CSS Category

2008 Aug 30

Making simple hover image using CSS

Bookmark and Share By
tildemark
| | Comments (0) | TrackBacks (0)

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.

hover1.gif

hover2.gif

 

 

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

<a id="nav-home" href="#"><span class="nav-hide">Home</span></a>

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;
}
2008 Jul 14

writing accessibility CSS code for the color blind

Bookmark and Share By
tildemark
| | Comments (0) | TrackBacks (0)
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.
2006 Dec 8

Tableless form using HTML with CSS

Bookmark and Share By
tildemark
| | Comments (0) | TrackBacks (0)

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












HTML code:

<form id="testform" name="testform" >
<label >Name:</label>
<input type="text" name="name" /><br />
<label >Email:</label>
<input type="text" name="email" /><br />
<label >Comment:</label>
<textarea name="comments" rows="5" cols="25"></textarea><br />
</form>

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;
}

2006 Dec 6

transparent images using css with opacity

Bookmark and Share By
tildemark
| | Comments (0) | TrackBacks (0)

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.

2006 Aug 27

CSS Floating Image

Bookmark and Share By
tildemark
| | Comments (0) | TrackBacks (0)

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.

<style type="text/css">
<!--
body
{
  background-attachment: fixed;
  background-image: url;
  background-repeat: no-repeat;
  background-position: right top;
}
-->
</style>
change the url with the correct image filename you want to appear.
Main Index | Archives | Javascript »

Search

About this Archive

This page is a archive of recent entries in the CSS category.

Javascript is the next category.

Find recent content on the main index or look in the archives to find all content.

Recent Activity

Thursday

  • tildemark tweeted, "im having some problems with cron. it seem i cant automate tweet updates which is very necesary because my blog is published statically."
  • tildemark tweeted, "@jjdoblados a plugin from movable type"
  • tildemark tweeted, "added tweets on my blog, it looks kindda nice."
  • tildemark tweeted, "@barcampmanila good luck. i wish i was there."
  • tildemark tweeted, "just installed a my very own photo gallery. fire it up at http://www.tildemark.com/photo"

Wednesday

  • tildemark tweeted, "some php scripts are giving me 500 error on certain folders and runs on the other folder. which is very weird"

Tuesday

  • tildemark tweeted, "im upgrading my blog to anew version, hope goes well."
  • tildemark tweeted, "im currently testing mt4.2 i might be implementing this if all goes well."
  • tildemark tweeted, "i had to rename the wscript application to remove the virus. my pc is clean again."

Sunday

  • tildemark tweeted, "my pc has a virus and it has disbled the task manager, folder options and the tweakui. my antivus just expire last week. its driving me nuts"