Open Source Web Design

by naspinski 2/27/2008 8:45:00 PM

Just what you would think, a resource for open source web design...

This is a great resource for when you need a quick template, or just a bump in the old creativity/idea department.

OSWD.org

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags: link, design

css | design | links

Rounded Text Box Inputs - Slick looking and customizable

by naspinski 2/6/2008 1:04:00 AM

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good. Even though they don't really go with any of my sites, I wanted to know how they were done. I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!).

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier. It works for single-line textboxes as well as checkboxes. You could easily take the concept to a multiline textbox if you just added some larger images. The code is pretty self-explanatory, so I won't get into the details here. I included the .png files so you can customize the colors if you want - just drop in the code and go.

slick_inputs.zip (78.02 kb)

Currently rated 5.0 by 1 people

Currently 5/5 Stars.
1
2
3
4
5

Tags: css, web_2.0, design, html

css | design | html | steal some code

Iconize Textlinks with CSS

by naspinski 1/29/2008 6:39:00 PM

This is a great way to add a little visibility to your users, it adds an icon next to your file links, showing them visually what it is

I take no credit at all for this, all the credit belongs to http://pooliestudios.com/projects/iconize/

This is a great tool - and very simple when you look at it I got rave reviews when I implemented this on our in-house web-based fileshare system at work. Hopefully it can help you out too!

iconize-05.zip (30.59 kb)

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags: css, design, html, link

css | design | html | steal some code

Sticky Footer using only css/html (works in IE)

by naspinski 1/29/2008 6:12:00 PM

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:

<body>

<div class="wrapper">

Put your content here

    <div class="push"></div>

  </div>

  <div class="footer">
    Footer Here

  </div>

</body>

All credit goes to http://ryanfait.com/sticky-footer/ - thanks this is great!

sticky_footer.zip (1.78 kb)

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags: css, html, design, link

css | design | html | steal some code | tutorials

css transparency problems in IE

by naspinski 1/22/2008 2:57:00 PM

Imagine that, IE has formatting problems with css standards...

So... working with some transparency today, and for the life of me I couldn't figure out what was going on. I had 2 menus, both falling under the same a:hover transparency. Firefox: everything looks good, Opera: everything looks good, Safari: who cares, IE: transparency works in one menu, but not the other? Here is was my css

a{text-decoration:none;color:#5C756C; }
a:hover{background-color:#EAE9D9;filter:alpha(opacity=80);opacity:0.8;}
.side_menu{float:left;display:block;width:250px;margin:0 20px -10px 0;}
.side_menu a{padding:10px; border-bottom:dotted 1px #888671; display:block; }

So the links that were inside the .side_menu class showed transparency while the ones that weren't did not?

So I started playing around with the elements one by one, and you know which one made it go non-transparent? width! If I took away the width:250px;, it was no longer transparent. So, All I had to do was add in a width:100%; to the a element and this problem was fixed. But then this leads to another problem: you don't want to necessarily have all of your links to be 100% width, so you have to make a choice: make different classes for widths, inline css, forget about transparency, forget about IE, or a million others.

Imagine if the most popular browser on the planet actually followed set standards... I may as well keep dreaming.

Sidenote: The CSS you need for transparency (non IE compliant, for IE, just add a width declaration) is simply this:

.class_name{filter:alpha(opacity=80);opacity:0.8}

If IE would follow standards, you would not need the 'filter' property, just 'opacity'. The 80 and .8 mean 80% opaque, the higher the number, the less transparent and vise versa.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags: css

css

css Tooltips :: tutorial

by naspinski 1/17/2008 4:37:00 AM

A slick way to make rollover tooltips with nothing other than a little css and some html - also works well for image thumbnail rollovers as well

In the past, I have made tooltips with JavaScript, and that can get lengthy and messy - I prefer to use JavaScript as little as possible. So I recently figured out a way to make tooltips and picture enlarging rollovers that is very simple and uses nothing but css and html.

Ok, first thing we need to do is to understand how this is going to work: basically, you are going to embed your tooltip with an element inside your link; for this exampe, I chose span as it is already there and easy to work with. Then we must hide that text with display:none; in css.

Now I want the tooltip to stay close to the link that you hover over to get it (you could use this to put the link anywhere on the page as well) so I have to make the link relative, and the embedded span will be positioned absolutely, and sice it is positioned absolutely to the reatively positioned link, it will appear relative to the link (wow... that looks confusing when I put it down in text).

Now with that out of the way, we just have to add a :hover state to the class and change it's display to display:block; to make it visible. Add a little formatting and you get the following css:

a.tooltip{position:relative;}
   a.tooltip:hover{z-index:25;}
   a.tooltip span{
     display: none;position:absolute;top:1em; left:1em;
     /* the line above is all that is necessary in a.tooltip span the rest is formatting - you can alter top and left */
     padding:2px; border:1px solid Black; width:100px; background-color:Gray;}
   a.tooltip:hover span{display:block;}

You will notice that there is a z-index value in there. I picked a rather large number, but that is so the tooltip will always be visible over whatever you have on the page.

The css is now out of the way, time to move on to the html. All of the hard work is done, now we simply need to make a link with an embedded span which to contain our tooltip:

<a class="tooltip" href="" >
Roll over this
<span>For this kickin' tooltip!</span>
</a>

And there you have it, a simple css rollover tooltip:

*note: If you dont want the rollovers to appear clickable (usually the finger cursor) you can add cursor:default; to the a.tooltip:hover class.

Similiarly, you can do the same with images. For this example, I am using a full size imaged resized for the thumbnail, but you may want to use a seperate smaller image so the preview loads faster for your user; its up to you: I changed the css class, removed the formatting and lsightly edited the positioning to get this for the css:

a.img_tooltip{position:relative;}
   a.img_tooltip:hover{z-index:25;}
   a.img_tooltip span{display: none;position:absolute;top:-1em; left:5em; }
   a.img_tooltip:hover span{display:block;}

And here is the html for an image rollover:

<a class="img_tooltip" href="" >
<img src="images/image.jpg" alt="thumbnail" style="width:100px;" />
<span><img src="images/image.jpg" alt="full image" /></span>
</a>

As you can see, I set width:100px; as I am using a full sized image and I wanted to shrink it. Here is your image rollover

And there you have it, a simple way to get css rollover tooltips. They can be pretty useful when you want to stick something in your page but it may be intrusive or ugly to be there all the time.

A very simple example can be downloaded from the steal some code repository or just pick it up here: css_tooltips.zip (67.91 kb)

Currently rated 5.0 by 1 people

Currently 5/5 Stars.
1
2
3
4
5

Tags: tutorial, html, css, design

css | html | steal some code | tutorials

ColorBlender

by naspinski 1/2/2008 5:14:00 AM

This is an incredibly useful site to those of us with no sense of color whatosever; no need to actually understand color theory, just use this useful app to do the work for you - this site's color scheme was made using Color Blender

ColorBlender.com

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags: design, link

css | design | links

loads of useful information, examples and tutorials pertaining to web development utilizing asp.net, c#, vb, css, xhtml, javascript, sql, xml, ajax and everything else...

categories

Open Source Web Design

Just what you would think, a resource for open source web design...

Rounded Text Box Inputs - Slick looking and customizable

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

Iconize Textlinks with CSS

This is a great way to add a little visibility to your users, it adds an icon next to your file links, showing them visually what it is

Sticky Footer using only css/html (works in IE)

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

css transparency problems in IE

Imagine that, IE has formatting problems with css standards...

css Tooltips :: tutorial

A slick way to make rollover tooltips with nothing other than a little css and some html - also works well for image thumbnail rollovers as well

ColorBlender

This is an incredibly useful site to those of us with no sense of color whatosever; no need to actually understand color theory, just use this useful app to do the work for you - this site's color scheme was made using Color Blender

home | my projects | about | contact | Resume | Sign in

© Copyright 2008 stan naspinski