SlideShare a Scribd company logo
CSS
& CSS3
    Robyn Overstreet
More CSS Layout
CSS Layout
• Positioning
• Display
• Floats
Inline vs. Block
Block
  Start and end with new lines. Can have a
width.
         <p>, <table>, <div>, ...



Inline
   Does not force new lines. Cannot have
width.
          <b>, <span>, <img>, ...

                              4
Display property
Switch elements between block and
inline display or hide elements
Possible properties
              Text
•   block
•   inline
•   none
             #search-results{
               display:none;
             }
The Box Model
Four parts:
  Content
  Padding
  Border
  Margin




              6
Box Model Measurements‫‏‬
 In most browsers, a box with a 70px width take up
         100px with margin and padding …




                        7
Box Model Measurements‫‏‬
In IE browsers, the padding is subtracted instead of
      added, so the box will take up only 90px.




                         8
Window & Document
Relative Position
Positioned in relation to the other elements
around it
Absolute Position
Positioned in relation to its parent
without regard to the normal flow of
elements
Fixed Position
Absolutely positioned, but relative to
the viewport, instead of its parent
element. The element's position is
specified with the "left", "top",
"right", and "bottom" properties
Positioning Properties
   Positioning properties specify the left, right,
    top, and bottom positions of an absolutely
    positioned element
   They set the shape of an element, place
    one element behind another, and indicate
    directions for fitting an element's content
    in a specified area
img.logo {
      position: absolute;
      top: 0;
      left:0;
      width: 150px;
      height: 150px;
                            13
}
Floating for Layout
Floating allows elements to align to the left or the right of the page.
Inline elements will wrap around floated elements.




              Left Float
Clear
The clear property sets the sides of an element
  where other elements are not allowed.

Possible values:
• left
• right
• both
• none


                         15
2-column Layout
• Experiment with floating both divs
  right, both divs left, or one left and
  one right
3-column Layout
Lab: Layout
• Sketch a design layout on paper
• Build the wireframe in CSS and HTML
• Try positioning a sidebar on the left or
  the right by just changing the CSS
  (not the HTML)
   • Extra: Position a logo over the columns
     using absolute positioning
CSS 3
Modular
CSS3 is a collection of modules
• Allows updates on a module-by-
  module basis (instead of waiting
  for an update of the full spec)
• Browsers can add support for
  features one module at a time
• Browsers are able to implement
  some modules and not others
New Features in CSS 3
New Selectors




Rounded Corners


                          Text-Overflow
                          


Border Image


                          Multi-Column Layout
                          


Color and Opacity: RGBA


                          Web Fonts
                          


Gradients


                          Transitions
                          


Box and Text Shadows


                          Transformations
                          


Multiple Backgrounds


                          Animation
                          


Masks




Reflection

Browser Compatibility
• Many of the CSS3 features only work on specific browsers.
• Need to use browser-specific property names in those cases.
• Prefix with -webkit or -moz

Webkit-specific properties
http://qooxdoo.org/documentation/general/webkit_css_styles


Mozilla-specific properties
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Browser
compatibility charts
References for finding browser
support of CSS3 properties
 • CanIUse.com
 • FindMeByIP.com charts
Web Fonts
Web Fonts
@font-face allows use of fonts from URLs



The Basics: Call a font from a URL and give it a name



@font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }
Web Fonts
The Thorough: Best bet for cross-browser support

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Your Typeface"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }


• Start with the IE compatible font (.eot)‫‏‬
• Check for a local version of the font
   (this also prevents IE from trying to load formats it can't understand)
• Offer other formats
Font Services
        !   Copyright. Fonts are copyrighted material.


Downloadable Fonts
• Font Squirrel fontsquirrel.com
   Freeware fonts to download and host yourself, with helpers to
   write CSS code

Font Hosting
Fonts delivered from server, with Javascript helpers
• Google Font API code.google.com/webfonts
    Open-source font library with limited number of fonts

• TypeKit typekit.com
   Subscription-based font service with a large library
Lab: Fonts
• Add fonts to your page using the Google
  web fonts API
• Check display across browsers
Text Features
Text Overflow
 A new option for content that overflows its containing box


                   Two roads diverged in
                   a yellow wood, and
                   sorry I could not ...




#poem_box{
   text-overflow: ellipsis;
}
Multi-Column Layout
                   Add -moz- and/
                    or -webkit- to
                     each of these




              column-count:2;

              column-width:250px;

              column-gap:20px;

              column-rule:1px
              dotted;
Multi-Column Layout
  column-count
  column-gap
  column-rule
  column-break-after
  column-break-before
  column-span
  column-fill



  These require -webkit- or -moz- prefixes
New Visual Effects
    in CSS3
RGBA

background: rgba(255,70,280,.6);
                 red   green blue   alpha




                                       60% opacity
Rounded Corners
W3C Official Spec:


border-radius:
55pt / 25pt;
                          Text



Browser Implementation:
                                    New in FF 3.5 !

-webkit-border-radius: 55pt 25pt;   Previous versions
                                    did not support
-moz-border-radius: 55pt / 25pt;
                                    elliptical borders
Quick-fire Lab
Round the corners of a div
Shadows
Applies to text and boxes with text-shadow and box-shadow.


box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;




<horizontal distance> <vertical distance> <blur> <color>
Quick-fire Lab
Apply a shadow to a box or to text
Gradients
background: -webkit-gradient(linear,0 0, 0 100%,
from(#333),to(#fff));


     0, 0
            type: linear or radial.

            points: space separated

            from() and to(): value

            color stop (optional)‫‏‬
               color-stop(80%, #e4c700)‫‏‬

 0, 100%
Quick-fire Lab
Create a gradient background for a
div
Multiple Backgrounds
Add multiple background images by separating urls with a comma




#box{
  background: url(top.gif) top left no-repeat,
  url(bottom.gif) bottom left no-repeat,
  url(middle.gif) left repeat-y;
}
Reflection
 -webkit-box-reflect: <direction> <offset> <mask-box-image>

 <direction> can be one of above, below, left or right.
 <offset> is a length or percentage that specifies the distance of the reflection
 from the edge of the original border box (using the direction specified). It can
 be omitted, in which case it defaults to 0.
 <mask-box-image> is a mask-box-image that can be used to overlay the
 reflection. If omitted, the reflection has no mask.


img.simple_reflect{
             -webkit-box-reflect:below 5px;
}

img.deluxe_reflect{
    -webkit-box-reflect:below 5px -webkit-
gradient(linear, left     top, left bottom,
from(transparent), color-stop(.7,
    transparent), to(rgba(255, 255, 255, 0.5)));
}
Reflection
img.deluxe_reflect{
    -webkit-box-reflect:below 5px -webkit-
gradient(linear, left     top, left bottom,
from(transparent), color-stop(.7,
    transparent), to(rgba(255, 255, 255, 0.5)));
}
Quick-fire Lab
Try multiple background images
and/or reflection
Masks
img.photo {
    -webkit-mask-box-image: url(mask.png);
}




            +                 =
Border Image
#box{
     border-width: 8px;
     -webkit-border-image: url("border2.png") 8 round;
}




   <div id=”box”>


                        border2.png
Graphic
Transformations
2D Transformations
The transformation functions:
scale, scaleX, scaleY
translate, translateX, translateY
skew, skewX, skewY
rotate
matrix



  -webkit-transform: skew(0deg, 30deg);
  -webkit-transform: rotate(30deg);
Transformations: scale




   -moz-transform:   scale(3);      1     = 100%
   or   transform:   scale(1,4);    .2    = 20%
-webkit-transform:   scaleY(1.5);   1.5   = 150%
        transform:   scaleX(.2);    3     = 300%
Transformations: skew
                 transform: skew(0deg, 30deg);




              skewX                               skewY


-webkit-transform: skew(-25deg);   -moz-transform: skew(0deg,-25deg);
Faking 3D: a 2D Cube
.cube {
      position: relative;
      top: 200px;
}
.rightFace,.leftFace,.topFace{
      position: absolute;
      padding: 10px;
      width: 180px;
       height: 180px;
}
.leftFace {
      -webkit-transform: skew(0deg, 30deg);
}
.rightFace {
      -webkit-transform: skew(0deg, -30deg);
      left: 200px;
}
.topFace {
      -webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1,
1.16);
      top: -158px;
      left: 100px;
}
Lab
Create a skewed box
Animation!
Transitions

#box {
    transition-property: width,height;
    transition-duration: 2s;
    height: 150px;
    width: 150px;
}

#box:hover{
    height: 500px;
    width: 500px;
}
Lab
Create a transition on hover.
Use scale, skew, translate, or change
width or height
Triggering Animation
:hover as used in previous versions of CSS
:target trigger animation with a anchor link, e.g. page.html#start

<div id="b" class="brick">foo</div>
<div id="c" class="brick">foo</div>
<p><a href="#c">drop c</a></p>

div.brick:target{
   -webkit-transform: rotate(30deg);
}

onclick using javascript

<div onclick=
"this.style.webkitTransform='rotate(360deg)'">
Animation: keyframes




             Illustration: Yurike Cynthia Go
                Creative Commons License
Animation: keyframes
@-webkit-keyframes moveitaround{ {
  @-webkit-keyframes moveitaround
  from { {
     from
     -webkit-transform: translate(50px,50px) rotate(30deg);
        -webkit-transform: translate(50px,50px) rotate(30deg);
  } }
  50% { {
     50%
           -webkit-transform: translate(100px,100px) rotate(140deg);
         -webkit-transform: translate(100px,100px) rotate(140deg);
  } }
     to {
  to -webkit-transform: translate(500px,200px) rotate(360deg) ;
       {
    -webkit-transform: translate(500px,200px) rotate(360deg) ;
     }
  }
  }
}


div.mydiv {
     -webkit-animation-name: moveitaround;
     -webkit-animation-duration: 1s;
     -webkit-animation-iteration-count: 3;

}
Animation Examples
Lab
Make an object move across the
screen using keyframes

More Related Content

What's hot (20)

PPT
PHP - Introduction to Object Oriented Programming with PHP
Vibrant Technologies & Computers
 
PPT
CSS Basics
WordPress Memphis
 
PDF
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
PPTX
Javascript functions
Alaref Abushaala
 
PPT
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 
PDF
Angular Directives
iFour Technolab Pvt. Ltd.
 
PDF
CSS Day: CSS Grid Layout
Rachel Andrew
 
PPTX
JavaScript Basic
Finsa Nurpandi
 
PPTX
Html links
JayjZens
 
PPT
Javascript arrays
Hassan Dar
 
PPTX
Html frames
ManishaSheelam
 
PDF
Django Introduction & Tutorial
之宇 趙
 
PPTX
Javascript 101
Shlomi Komemi
 
PPTX
Basic HTML
Sayan De
 
PPTX
Ajax presentation
Bharat_Kumawat
 
PDF
Flexbox and Grid Layout
Rachel Andrew
 
PPTX
Java script
Shyam Khant
 
PDF
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
PPTX
Model view controller (mvc)
M Ahsan Khan
 
PHP - Introduction to Object Oriented Programming with PHP
Vibrant Technologies & Computers
 
CSS Basics
WordPress Memphis
 
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
Javascript functions
Alaref Abushaala
 
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 
Angular Directives
iFour Technolab Pvt. Ltd.
 
CSS Day: CSS Grid Layout
Rachel Andrew
 
JavaScript Basic
Finsa Nurpandi
 
Html links
JayjZens
 
Javascript arrays
Hassan Dar
 
Html frames
ManishaSheelam
 
Django Introduction & Tutorial
之宇 趙
 
Javascript 101
Shlomi Komemi
 
Basic HTML
Sayan De
 
Ajax presentation
Bharat_Kumawat
 
Flexbox and Grid Layout
Rachel Andrew
 
Java script
Shyam Khant
 
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Model view controller (mvc)
M Ahsan Khan
 

Similar to CSS and CSS3 (20)

KEY
Trendsetting: Web Design and Beyond
Andy Stratton
 
PDF
Css3
Renzil D'cruz
 
PPT
CSS3
Doncho Minkov
 
PPTX
CSS 3 Overview
Danilo Sousa
 
PDF
Simply Responsive CSS3
Denise Jacobs
 
KEY
CSS3: stay tuned for style
Chris Mills
 
PPTX
Website trends 2012 presentation
Fresh_Egg
 
PDF
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
PDF
Intro to CSS3
Denise Jacobs
 
PDF
CSS3 3D Workshop
Christopher Schmitt
 
PDF
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
PDF
CSS3 - is everything we used to do wrong?
Russ Weakley
 
PDF
CSS3: Ripe and Ready
Denise Jacobs
 
PDF
CSS3 Refresher
Ivano Malavolta
 
PDF
[heweb11] CSS3 Makeover
Christopher Schmitt
 
PDF
CSS Training Online-Online CSS Course css course online learning html and css...
Evanta Technologies
 
PPT
CSS 3
Doncho Minkov
 
PPTX
CSS3 basics for beginners - Imrokraft
imrokraft
 
KEY
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
 
PDF
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Trendsetting: Web Design and Beyond
Andy Stratton
 
CSS 3 Overview
Danilo Sousa
 
Simply Responsive CSS3
Denise Jacobs
 
CSS3: stay tuned for style
Chris Mills
 
Website trends 2012 presentation
Fresh_Egg
 
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Intro to CSS3
Denise Jacobs
 
CSS3 3D Workshop
Christopher Schmitt
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
CSS3 - is everything we used to do wrong?
Russ Weakley
 
CSS3: Ripe and Ready
Denise Jacobs
 
CSS3 Refresher
Ivano Malavolta
 
[heweb11] CSS3 Makeover
Christopher Schmitt
 
CSS Training Online-Online CSS Course css course online learning html and css...
Evanta Technologies
 
CSS3 basics for beginners - Imrokraft
imrokraft
 
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
 
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Ad

Recently uploaded (20)

PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PPTX
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
PDF
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
PDF
Simplify Your FME Flow Setup: Fault-Tolerant Deployment Made Easy with Packer...
Safe Software
 
PDF
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
PDF
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
PDF
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Kubernetes - Architecture & Components.pdf
geethak285
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
Simplify Your FME Flow Setup: Fault-Tolerant Deployment Made Easy with Packer...
Safe Software
 
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Ad

CSS and CSS3

  • 1. CSS & CSS3 Robyn Overstreet
  • 3. CSS Layout • Positioning • Display • Floats
  • 4. Inline vs. Block Block Start and end with new lines. Can have a width. <p>, <table>, <div>, ... Inline Does not force new lines. Cannot have width. <b>, <span>, <img>, ... 4
  • 5. Display property Switch elements between block and inline display or hide elements Possible properties Text • block • inline • none #search-results{ display:none; }
  • 6. The Box Model Four parts: Content Padding Border Margin 6
  • 7. Box Model Measurements‫‏‬ In most browsers, a box with a 70px width take up 100px with margin and padding … 7
  • 8. Box Model Measurements‫‏‬ In IE browsers, the padding is subtracted instead of added, so the box will take up only 90px. 8
  • 10. Relative Position Positioned in relation to the other elements around it
  • 11. Absolute Position Positioned in relation to its parent without regard to the normal flow of elements
  • 12. Fixed Position Absolutely positioned, but relative to the viewport, instead of its parent element. The element's position is specified with the "left", "top", "right", and "bottom" properties
  • 13. Positioning Properties  Positioning properties specify the left, right, top, and bottom positions of an absolutely positioned element  They set the shape of an element, place one element behind another, and indicate directions for fitting an element's content in a specified area img.logo { position: absolute; top: 0; left:0; width: 150px; height: 150px; 13 }
  • 14. Floating for Layout Floating allows elements to align to the left or the right of the page. Inline elements will wrap around floated elements. Left Float
  • 15. Clear The clear property sets the sides of an element where other elements are not allowed. Possible values: • left • right • both • none 15
  • 16. 2-column Layout • Experiment with floating both divs right, both divs left, or one left and one right
  • 18. Lab: Layout • Sketch a design layout on paper • Build the wireframe in CSS and HTML • Try positioning a sidebar on the left or the right by just changing the CSS (not the HTML) • Extra: Position a logo over the columns using absolute positioning
  • 19. CSS 3
  • 20. Modular CSS3 is a collection of modules • Allows updates on a module-by- module basis (instead of waiting for an update of the full spec) • Browsers can add support for features one module at a time • Browsers are able to implement some modules and not others
  • 21. New Features in CSS 3 New Selectors  Rounded Corners  Text-Overflow  Border Image  Multi-Column Layout  Color and Opacity: RGBA  Web Fonts  Gradients  Transitions  Box and Text Shadows  Transformations  Multiple Backgrounds  Animation  Masks  Reflection 
  • 22. Browser Compatibility • Many of the CSS3 features only work on specific browsers. • Need to use browser-specific property names in those cases. • Prefix with -webkit or -moz Webkit-specific properties http://qooxdoo.org/documentation/general/webkit_css_styles Mozilla-specific properties https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
  • 23. Browser compatibility charts References for finding browser support of CSS3 properties • CanIUse.com • FindMeByIP.com charts
  • 25. Web Fonts @font-face allows use of fonts from URLs The Basics: Call a font from a URL and give it a name @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } p { font-family: Gentium, serif; }
  • 26. Web Fonts The Thorough: Best bet for cross-browser support @font-face { font-family: "Your typeface"; src: url("type/filename.eot"); src: local("Your Typeface"), url("type/filename.woff") format("woff"), url("type/filename.otf") format("opentype"), url("type/filename.svg#filename") format("svg"); } • Start with the IE compatible font (.eot)‫‏‬ • Check for a local version of the font (this also prevents IE from trying to load formats it can't understand) • Offer other formats
  • 27. Font Services ! Copyright. Fonts are copyrighted material. Downloadable Fonts • Font Squirrel fontsquirrel.com Freeware fonts to download and host yourself, with helpers to write CSS code Font Hosting Fonts delivered from server, with Javascript helpers • Google Font API code.google.com/webfonts Open-source font library with limited number of fonts • TypeKit typekit.com Subscription-based font service with a large library
  • 28. Lab: Fonts • Add fonts to your page using the Google web fonts API • Check display across browsers
  • 30. Text Overflow A new option for content that overflows its containing box Two roads diverged in a yellow wood, and sorry I could not ... #poem_box{ text-overflow: ellipsis; }
  • 31. Multi-Column Layout Add -moz- and/ or -webkit- to each of these column-count:2; column-width:250px; column-gap:20px; column-rule:1px dotted;
  • 32. Multi-Column Layout column-count column-gap column-rule column-break-after column-break-before column-span column-fill These require -webkit- or -moz- prefixes
  • 34. RGBA background: rgba(255,70,280,.6); red green blue alpha 60% opacity
  • 35. Rounded Corners W3C Official Spec: border-radius: 55pt / 25pt; Text Browser Implementation: New in FF 3.5 ! -webkit-border-radius: 55pt 25pt; Previous versions did not support -moz-border-radius: 55pt / 25pt; elliptical borders
  • 36. Quick-fire Lab Round the corners of a div
  • 37. Shadows Applies to text and boxes with text-shadow and box-shadow. box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; <horizontal distance> <vertical distance> <blur> <color>
  • 38. Quick-fire Lab Apply a shadow to a box or to text
  • 39. Gradients background: -webkit-gradient(linear,0 0, 0 100%, from(#333),to(#fff)); 0, 0 type: linear or radial. points: space separated from() and to(): value color stop (optional)‫‏‬ color-stop(80%, #e4c700)‫‏‬ 0, 100%
  • 40. Quick-fire Lab Create a gradient background for a div
  • 41. Multiple Backgrounds Add multiple background images by separating urls with a comma #box{ background: url(top.gif) top left no-repeat, url(bottom.gif) bottom left no-repeat, url(middle.gif) left repeat-y; }
  • 42. Reflection -webkit-box-reflect: <direction> <offset> <mask-box-image> <direction> can be one of above, below, left or right. <offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0. <mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask. img.simple_reflect{ -webkit-box-reflect:below 5px; } img.deluxe_reflect{ -webkit-box-reflect:below 5px -webkit- gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(255, 255, 255, 0.5))); }
  • 43. Reflection img.deluxe_reflect{ -webkit-box-reflect:below 5px -webkit- gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(255, 255, 255, 0.5))); }
  • 44. Quick-fire Lab Try multiple background images and/or reflection
  • 45. Masks img.photo { -webkit-mask-box-image: url(mask.png); } + =
  • 46. Border Image #box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round; } <div id=”box”> border2.png
  • 48. 2D Transformations The transformation functions: scale, scaleX, scaleY translate, translateX, translateY skew, skewX, skewY rotate matrix -webkit-transform: skew(0deg, 30deg); -webkit-transform: rotate(30deg);
  • 49. Transformations: scale -moz-transform: scale(3); 1 = 100% or transform: scale(1,4); .2 = 20% -webkit-transform: scaleY(1.5); 1.5 = 150% transform: scaleX(.2); 3 = 300%
  • 50. Transformations: skew transform: skew(0deg, 30deg); skewX skewY -webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);
  • 51. Faking 3D: a 2D Cube .cube { position: relative; top: 200px; } .rightFace,.leftFace,.topFace{ position: absolute; padding: 10px; width: 180px; height: 180px; } .leftFace { -webkit-transform: skew(0deg, 30deg); } .rightFace { -webkit-transform: skew(0deg, -30deg); left: 200px; } .topFace { -webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16); top: -158px; left: 100px; }
  • 54. Transitions #box { transition-property: width,height; transition-duration: 2s; height: 150px; width: 150px; } #box:hover{ height: 500px; width: 500px; }
  • 55. Lab Create a transition on hover. Use scale, skew, translate, or change width or height
  • 56. Triggering Animation :hover as used in previous versions of CSS :target trigger animation with a anchor link, e.g. page.html#start <div id="b" class="brick">foo</div> <div id="c" class="brick">foo</div> <p><a href="#c">drop c</a></p> div.brick:target{ -webkit-transform: rotate(30deg); } onclick using javascript <div onclick= "this.style.webkitTransform='rotate(360deg)'">
  • 57. Animation: keyframes Illustration: Yurike Cynthia Go Creative Commons License
  • 58. Animation: keyframes @-webkit-keyframes moveitaround{ { @-webkit-keyframes moveitaround from { { from -webkit-transform: translate(50px,50px) rotate(30deg); -webkit-transform: translate(50px,50px) rotate(30deg); } } 50% { { 50% -webkit-transform: translate(100px,100px) rotate(140deg); -webkit-transform: translate(100px,100px) rotate(140deg); } } to { to -webkit-transform: translate(500px,200px) rotate(360deg) ; { -webkit-transform: translate(500px,200px) rotate(360deg) ; } } } } div.mydiv { -webkit-animation-name: moveitaround; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 3; }
  • 60. Lab Make an object move across the screen using keyframes

Editor's Notes

  • #2: \n
  • #3: \n
  • #4: \n
  • #5: \n
  • #6: \n
  • #7: \n
  • #8: \n
  • #9: \n
  • #10: \n
  • #11: \n
  • #12: \n
  • #13: \n
  • #14: \n
  • #15: \n
  • #16: \n
  • #17: \n
  • #18: \n
  • #19: Tip: Start basic.\nLayout and Design Inspiration: \nhttp://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/\nhttp://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/\nhttp://designm.ag/inspiration/non-profit-websites/\nhttp://designm.ag/inspiration/30-beautifully-simple-websites/\nSee the CSS cheat sheet\n\nHTML example:\n &lt;html&gt;&lt;head&gt;&lt;title&gt;The Site&lt;/title&gt;\n &lt;link href=&quot;layout1.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;\n &lt;/head&gt;\n &lt;body&gt;\n &lt;div id=&quot;header&quot;&gt;&lt;h1&gt;The Site.&lt;/h1&gt;&lt;/div&gt;\n &lt;div id=&quot;navigation&gt;\n &lt;ul&gt;\n &lt;li&gt;Home&lt;/li&gt;\n &lt;li&gt;Services&lt;/li&gt;\n &lt;li&gt;Blog&lt;/li&gt;\n &lt;li&gt;About&lt;/li&gt;\n &lt;/ul&gt;\n &lt;/div&gt;\n &lt;div id=&quot;sidebar&quot;&gt;\n &lt;h3&gt;Sites I like&lt;/h3&gt;\n &lt;ul&gt;\n &lt;li&gt;alistapart.com&lt;/li&gt;\n &lt;li&gt;lifehacker.com&lt;/li&gt;\n &lt;/ul&gt;\n &lt;/div&gt; \n &lt;div id=&quot;main-content&quot;&gt;\n &lt;h2&gt;Welcome to my site&lt;/h2&gt;\n &lt;p&gt;But, soft! What light through yonder window breaks?\n It is the east, and Juliet is the sun!\n Arise fair sun and kill the envious moon,\n Who is already sick and pale with grief\n That thou her maid are more fair than she. &lt;/p&gt;\n \n &lt;/div&gt;\n&lt;/body&gt;\n
  • #20: \n
  • #21: \n
  • #22: \n
  • #23: \n
  • #24: http://caniuse.com/#cats=CSS\nhttp://www.findmebyip.com/litmus\n
  • #25: \n
  • #26: \n
  • #27: \n
  • #28: http://code.google.com/webfonts\nhttp://typekit.com/\n
  • #29: http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start\nhttps://browserlab.adobe.com\n
  • #30: \n
  • #31: \n
  • #32: \n
  • #33: \n
  • #34: \n
  • #35: \n
  • #36: \n
  • #37: \n
  • #38: \n
  • #39: \n
  • #40: \n
  • #41: \n
  • #42: \n
  • #43: \n
  • #44: \n
  • #45: \n
  • #46: \n
  • #47: http://www.lrbabe.com/sdoms/borderImage/\n
  • #48: \n
  • #49: \n
  • #50: \n
  • #51: \n
  • #52: \n
  • #53: \n
  • #54: \n
  • #55: \n
  • #56: \n
  • #57: \n
  • #58: \n
  • #59: \n
  • #60: keyframes example : anim.html\nother links: walk cycle, photo viewer\n
  • #61: \n