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)

Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
Dan Dixon
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
Parvez Mahbub
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
Svitlana Ivanytska
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
Russ Weakley
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
Rob LaPlaca
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response Structure
BhagyashreeGajera1
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Seble Nigussie
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
 
html-css
html-csshtml-css
html-css
Dhirendra Chauhan
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
Digital Surgeons
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
Dan Dixon
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
Parvez Mahbub
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
Svitlana Ivanytska
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
Rob LaPlaca
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response Structure
BhagyashreeGajera1
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 

Similar to CSS and CSS3 (20)

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

Recently uploaded (20)

Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesGrannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI Experiences
Lauren Parr
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesGrannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI Experiences
Lauren Parr
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
AI Trends - Mary Meeker
AI Trends - Mary MeekerAI Trends - Mary Meeker
AI Trends - Mary Meeker
Razin Mustafiz
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
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