Designing with
CSS in Mind

Cascading Style Sheets: What and Why?

Cascading Style Sheets: What and Why?

<style>
.fancy-box {
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  color:#93C;
  padding:20px;
  border:4px solid #303;
}
</style>

<div class="fancy-box">I'm a fancy box!</div>         
I'm a fancy box!

Cascading Style Sheets: What and Why?

CSS allows us to separate a document’s visual design from its content (Copy), structure (HTML), and behavior (JavaScript)

What will be covered?

Photoshop Layer Styles with CSS3

The Basics

<style>
	/* Let's use the appropriate HTML5 tag */
	header {

	}    
</style>

<header>Photoshop Styles to CSS3</header>

Gives us:

Photoshop Styles to CSS3

The @font-face Rule


With CSS3 we now have almost limitless choice of fonts* in our web designs. No longer must we live under the tyranny of "web safe" Times and Arial.

*Provided we have the proper license agreement to do so.

@font-face

<style>
    /* Import our font file */
    @font-face {
        font-family: 'HelveticaNeueLTStd97BlkCnOb'; 
        src: url('helveticaneueltstd-blkcno-webfont.ttf') format('truetype'); 
        font-weight: normal; 
        font-style: normal; 
    }
    
    header {
    	font-family: 'HelveticaNeueLTStd97BlkCnOb';
	font-size:38px;
    }
</style>

<header>Photoshop Styles to CSS3</header>
Photoshop Styles to CSS3

Allows us to keep type "live" for more efficient editing, proper accessibilty, and improved SEO.

FontShop plug-in

text-shadow


Lift and separation without the need for additional images.

text-shadow

<style>
    header {
    	font-family: 'HelveticaNeueLTStd97BlkCnOb';
    	font-size:38px;
    	color:#fff;
    	/* values: X distance, Y distance, Blur, Color */
    	text-shadow:0px 0px 6px rgba(0, 0, 0, 0.6);
    }
</style>
Photoshop Styles to CSS3
Faux 3D Shadows
Multiple Shadows

Designer tip: The default blend mode of "Multipy", and others such as "Screen", don't translate to CSS. Use "Normal" combined with opacity and color.

box-shadow

box-shadow

<style>
    header {
    	box-shadow:
            /* shadow #1: X, Y, Blur, Size, white @ 50% opacity */
            0px 0px 6px 0px rgba(255,255,255,0.5), 
            
            /* shadow #2: inner shadow, X, Y, Blur, Size, black @ 60% opacity */
            inset 0px 0px 24px 4px rgba(0,0,0,0.6);
    }
</style>

inset value for inner shadows. Can be combined like multiple backgrounds, separated with a comma.

Photoshop Styles to CSS3
header {
font:38px 'HelveticaNeueLTStd97BlkCnOb';
border-radius:10px;
text-shadow:0px 0px 6px rgba(0, 0, 0, 0.5);
background:
    #2bc4b6,
    radial-gradient(50% 50%, circle cover, rgba(0,0,0,0.0), rgba(0,0,0,0.5)), 
    url(g-texture.png);
background-repeat:no-repeat, repeat;

box-shadow:
    0px 0px 6px 0px rgba(255,255,255,0.5), 
    inset 0px 0px 24px 4px rgba(0,0,0,0.6);
}
Photoshop Styles to CSS3

Image:

css3ps.com

CSS Hat

Transitions

Transitions: A Basic Example

<style>
    .ourtransition { 
	width:100px;
	height:100px;
	background:#0F0;
	transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 1s;
    }

    .ourtransition:hover {
        background:#900;
        left:500px;
    }
</style>

Designing an interface is more than showing off/on states of buttons, specify what happens in between. Hover over the box below:

Animatable

UI Transitions

Animations

Animations

CSS replaces much of what used to be solely the domain of Flash. Think about how your designs and interactions can be enhanced with some subtle application of these effects.

Running | Paused

Media Queries

Media Queries in CSS

A media query consists of a media type ("screen", "print") and an optional expression to check for specific features. This could be the device's screen width or resolution. By separating our visual design from the document's structure we can easily serve different looks to different users and devices.

The Responsive Design movement builds upon media queries and uses a flexible grid system to adapt a layout to any context. Consider the benefits of only maintaining one copy doc and one HTML code base.

<style>
@media screen and (min-device-width:1024px) {
  #page { 
    max-width:960px; 
    font-size:16px;
  }
  .navigation ul li { float:left; }
}
@media screen and (max-device-width:480px) {
  #page {
    max-width:460px;
    padding:10px;
    font-size:14px;
  }
  .navigation ul li { float:none; }
}
</style>

mediaqueri.es

"Retina" Screens and HDPI Graphics

Designing for High Resolution Devices

<style>
#logo {
  background:url(logo-image.png);
  width:200px;
  height:50px;
}

@media screen and (min-device-pixel-ratio: 2) {
  #logo {
    background:url(logo-image-high-res.png);
    background-size:100%;
  }
}
</style>

Designing for High Resolution Devices

Best practices:

Layer Cake

Thanks! Questions and comments are always welcome.

@damofknowledge