Tildemark blogs http://www.tildemark.com/ Blogging on uniquely random things. en Copyright 2008 Mon, 14 Jul 2008 10:58:21 +0800 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification writing accessibility CSS code for the color blind 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.
]]> http://www.tildemark.com/programming/css/writing-accessibility-css-code-for-the-color-blind.html http://www.tildemark.com/programming/css/writing-accessibility-css-code-for-the-color-blind.html CSS SEO accessibility for color blind css for the color blind Mon, 14 Jul 2008 10:58:21 +0800 Tableless form using HTML with CSS 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;
}

]]> http://www.tildemark.com/programming/css/tableless-form-using-html-with-css.html http://www.tildemark.com/programming/css/tableless-form-using-html-with-css.html CSS Fri, 08 Dec 2006 09:00:33 +0800 transparent images using css with opacity 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.

]]> http://www.tildemark.com/programming/css/transparent-images-using-css-with-opacity.html http://www.tildemark.com/programming/css/transparent-images-using-css-with-opacity.html CSS Wed, 06 Dec 2006 16:21:25 +0800 CSS Floating Image 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. ]]> http://www.tildemark.com/programming/css/css-floating-image.html http://www.tildemark.com/programming/css/css-floating-image.html CSS Sun, 27 Aug 2006 00:01:27 +0800