Jamie Le Souef

Post Tags : CSS, Deisgn, Dreamweaver, Photoshop, Website, Wordpress
Filed under Folio

Post Tags : CSS, Deisgn, Dreamweaver, Photoshop, Website, Wordpress
Filed under Folio

Forms have always been the way you interact with a website and they are often overlooked when it comes to deisgn. Windows designers forgetting to think how a form might look in OS X, and OS X users might forget to think about how a form might look in XP or Vista.

Styling your forms can be a great way to overcome this and many other issues (including just dam ugly forms!). Noupe has put together a list of over 40 CSS and Javascript techniques for creating beautiful and functional web forms.

[Read : Form Elements: 40+ CSS/JS Styling and Functionality Techniques]

Post Tags : CSS, Design, Forms, JavaScript, Web
Filed under Web Design

Post Tags : CSS, Design, Dreamweaver, Photoshop, Wordpress, xhtml
Filed under Folio

Post Tags : CSS, Design, Dreamweaver, Flash, Photoshop, Website, xhtml
Filed under Folio

Post Tags : CSS, Design, Dreamweaver, Flash, Photoshop, Website, xhtml
Filed under Folio

Post Tags : CSS, Design, Dreamweaver, Flash, Music, Photoshop, Website, xhtml
Filed under Folio

(Note this project was never compleated)

Post Tags : CSS, Design, Dreamweaver, Flash, Photoshop, Website, xhtml
Filed under Folio

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.
When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

read more | digg story

Post Tags : CSS, Design, JavaScript, Tips, Tutorial, Web 2.0, xhtml
Filed under CSS, Design, General, Web Design

Jamie’s Pure CSS round Corners

There have been many solutions on the internet on how to those funky round corners everyone loves. And, in the right application, I love them to. Cutting up image slices in Photoshop and then trying to get them to place correctly in most, if not all, browsers is a pain in the arse! Pixel differences with browsers (namely the dog of a browser -IE6) kills me every time.

I stumbled along a solution a while ago, using CSS can not recall where from, but I’m constantly using it, and thought it best to give out to the re rest of my audiance.. current 5 people (none of which are web designers…).

Anyways, here it all is.

The CSS

/*START RND CNR CSS*/

#sidebar{
width:15em;
background: #9BD1FA
}

#sidebar b.rtop,
#sidebar b.rbottom{
display:block;
background: #FFF
}
#sidebar b.rtop b,
#sidebar b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
#sidebar b.round1{
margin: 0 5px
}
#sidebar b.round2{
margin: 0 3px
}
#sidebar b.round3{
margin: 0 2px
}
#sidebar b.rtop b.round4,
#sidebar b.rbottom b.round4{
margin: 0 1px;
height: 2px
}
/*END RND CNR CSS*/

The HTML

<div id=”sidebar”>
<b class=”rtop”>
<b class=”round1″></b>
<b class=”round2″></b>
<b class=”round3″></b>
<b class=”round4″></b>
</b>
<h1>CSS Rounded Corners without using Images. Works in IE6, IE7, Firefox</h1>
<b class=”rbottom”>
<b class=”round4″></b>
<b class=”round3″></b>
<b class=”round2″></b>
<b class=”round1″></b>
</b>
</div>

The Result

Check out this page to see the above sweetness in action.

Post Tags : CSS, Design, Standards, stylesheet, Tutorial, W3C, Web 2.0, xhtml
Filed under CSS, Design, General, Web Design