March 2011
3 posts
3 tags
IE Hacks and Conditional Comments
It always seemed like it would be interesting to serve a gif image to Internet Explorer 6 and a png to other browsers, instead of using a CSS behavior file (like IE PNG Fix or SuperSleight). So now that IE 6 is nearly gone, here’s how.
Demo
Continue Reading
2 tags
Grants for Nonprofits from Community TechKnowledge...
Some info on two interesting Grant Award programs for nonprofits came through this week – the 2011 Heart and Soul Grant Award Program and Google Grants for Nonprofits.
Read More…
3 tags
Screen Capture and Screen Cast Videos with Jing
There are lots of tools to use for screen captures, but one of the most useful and intuitive applications to use for screen cast video capture is Jing by Techsmith. It’s available for Windows and Mac. There’s a free version and also a Jing Pro version for $14.95 per year. Screen shots and videos can be easily saved and shared on your favorite social media site; that’s the...
June 2010
1 post
1 tag
“Here is a breakdown of the significance of each platform as it relates to...”
– Stop Wasting Time With Social Media
February 2010
2 posts
4 tags
How To Encode Ogg Theora Video
Ogg-Theora video is the open source codec supported by Firefox, Chrome, and Opera to play HTML5 video. If the world were perfect, and all browsers supported Ogg Theora this would be the HTML code to play this simple HTML5 video demo:
<video src="Videos/cat.ogv" controls></video>
If you use this format instead, you will be ready to add the code to play H.264 and Flash:
<video...
3 tags
Simple HTML5 Video
Safari, Firefox, and Chrome now support HTML5 video; Opera support is coming soon. Since the iPhone does not support Flash (and there are more users every day, especially with the iPad coming), it’s time to begin the transition. I was interested in a solution that supplemented or enhanced the Flash video using JWPlayer that I have been using for several years. Here is a demo of simple...
January 2010
6 posts
“I want my sites to look Safari in Safari, and IE6 in IE6. I most definitely do...”
– Sam Brown ~ The importance of teaching your clients and being the boss
2 tags
Pretty Form Input
This is part of a styled input form. It uses CSS3 rounded corners.
This is the input form in IE. Not as pretty, but still nice.
This is the CSS used:
input.inputbox, textarea.inputbox { input.inputbox, textarea.inputbox { background-color: #fff; /* change the color */ border-top: 2px solid #ccc; border-left: 2px solid #ccc; border-right: 2px solid #888; border-bottom: 2px solid #888;...
3 tags
Code for rounded corners & box shadow
Here is the code. Class=contentbox was added to all the classes needing rounded corners and shadows.
<div class="box600 contentbox">
Full “.contentbox” code:
.contentbox {
border-top: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-left: 1px solid #fff;
/* End White border */
-khtml-border-radius: 15px;
-moz-border-radius:...
2 tags
2 tags
Transparent Background
The black transparent backgrounds for the site below were done using the CSS3 rgba property. rgba was also used for link hover states and for the footer background.
background: transparent url(RWImages/blkbkgnd.png); /* IE 7 & 8 */
_background: #000; /* IE 6 and below */
background: rgba(0, 0, 0, 0.8); /* All other browsers */
It was easier to get background transparency and text with no...
2 tags
November 2009
2 posts
2 tags
1 tag
October 2009
1 post
2 tags
Remote @font-face embedding for Firefox
Firefox 3.5 doesn’t allow @font-face to reference a font that is hosted on a remote server, although Safari does. Firefox simply doesn’t show the font and uses the next font in the font stack. In order to use @font-face on a blog like Tumblr, the .htaccess file on your server that hosts the font file needs to be edited to allow the blog to use the font.
Edit your server .htaccess...
September 2009
1 post
1 tag
Pretty Boxes with CSS3
CSS3 makes such pretty boxes. This one is a transparent red (#f00) on a yellow (#ff0) background to make a nice orange. It uses border-radius, rgba transparency, box-shadow, and text-shadow properties. These look like the image in Firefox 3.x and Safari, and should also work in Chrome. The text-shadow can be viewed in Opera. All versions of IE display a yellow box with a square-cornered black...
August 2009
1 post
“(Note: Coding for web sites would be so much easier without IE6. :)
…a group...”
– IE6 No More (via esquareda)
July 2009
2 posts
2 tags
Easy PNG Transparency in IE6 with GIMP
Here’s how to use GIMP make great looking transparent png images for websites that also look great in IE6 with no image fiddling and no behavior htc files needed.
In the GIMP:
Create a png image as usual.
Change the GIMP background color to be the color of the website background.
Save As filetype .png, but be sure to check “Save background color” wne the “Save as...
1 tag
4 tags
CSS Text Wrap in a Grid
I’ve been working with a grid system for my latest project, and it’s been great. I don’t usually start with someone else’s code though, and so I missed something. The text on one page would not wrap around right-floated images. I finally removed all the styles on both the p tag and the div for the image, and still no text wrap, so …
The grid CSS had this:
p { ......
June 2009
10 posts
2 tags
“If you love it, you don’t know much about typography. And if you hate it, you...”
– Comic Sans designer, Vincent Connare
Watch a short documentary on this font - (via http://justcreativedesign.com)
All the students say it works in some places, especially for kids. I really like it for web sites for kids. I think that it’s readable too; a lot of kids don’t like serif...
3 tags
1 tag
The Book Seer →
This site recommends books to read that are similar to one you enter. I tried it for a couple of fiction and tech books, and it gave some good suggestions. I’ll have to try again the next time I need a new book to read. It was produced by Apt Labs
2 tags
1 tag
2 tags
web design grids
Web Design Booth has listed 15 resources for generating a grid for web design.
I also like the resources at 960 Grid System. They have layouts for both 12-column and 16-column grids.
2 tags
“Twitter is not so much about connecting with your friends, it’s about...”
– Twitter is Not Your Average Social Network by Stan Schroeder - mashable.com
May 2009
4 posts
2 tags
A funny from xkcd... →
Since I’ve been mentioning fonts.
1 tag
Typekit Is Coming →
It looks like this is really the year of “real fonts” on the web…
2 tags
Fonts with FontJazz
FontJazz is a new JavaScript method to allow the use of different typefaces on websites. The type is rendered in the browser and not server-side. It’s very easy to use. You upload your font, input the font color, font size, and the background color, and FontJazz generates a gif file of your font and 2 JavaScript files for download. Because the background color is required, it works best...