All / Class 11 - Fun stuff to do with CSS

Class 11 – Fun stuff to do with CSS

fun

It’s not scary. I promise!

Activity 0: Border Radius with CSS (Rounded Corners)

Good reference: http://www.css3.info/preview/rounded-border/

You can make all corners the same radius, or you can make each corner a different radius.

Example:

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}


Activity 1: Css drop shadows (shadow text) – Does not work in earlier versions of IE

Homework: http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

A great reference: http://www.red-team-design.com/drop-shadow-effect-using-css

h1
{
  color:#777777;
  margin:0;
  font-family: Trebuchet MS;
  font-size: 35px;
  text-align:center;
  text-shadow: 1px 1px 3px #323232;
}

Activity 2: Opacity –

A. Image Transparency (get an image)

Do This: http://www.w3schools.com/css/css_image_transparency.asp


Activity 3:

Blurry Text and other tricks: http://css-tricks.com/snippets/css/blurry-text/


Activity 4: Edit Images with CSS using Filters

http://www.inserthtml.com/2012/06/css-filters/


Taking Design & Planning a Step Further

Style Tiles before Mockups: 

http://screencast.com/t/ebkcRkeFjk

Resource: http://styletil.es/

Photoshop is the easiest, but so is indesign, or even a piece of paper and a pen.


Extra credit:

ACTIVITY 6: ADVANCED TRY IT YOURSELF: HTTP://CSS3GENERATOR.COM/


Activity 7: Css gradients – can be used for backgrounds, etc. A great reference: http://www.colorzilla.com/gradient-editor/