INLS 572
Web Development
CSS for Presentation
Joan Boone
jpboone@email.unc.edu
Spring 2016
CSS for Presentation
Originally (1996-2001)...
 Focus of CSS was on fonts, color, and tables
 Minimum features to encourage use
What's new...visual, interaction features
 Borders (border-radius, box-shadow, border-image)
 Backgrounds (background-size, background-origin)
 Gradients (linear, radial)
 Filter Effects
 2D/3D Transforms (translate, rotate, scale, skew)
 Transitions (change style for a given duration)
 Animations (can replace JavaScript, Flash)
CSS: Basic Borders
Properties: border-style, border-width, border-color
p { background: lightsteelblue;
padding: 4%;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
Example: BasicBorders.html
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 1.5em;
border-top-color: red;
border-right-color: chartreuse;
border-bottom-color: gold;
border-left-color: purple;
margin: 2%; }
CSS3: Border Images,
Property: border-image
border-image: url(border.png) 30 round;
Original
image
border-image: url(border.png) 30 stretch;
Source: w3schools CSS3 Border Images
CSS3: Box Shadows,
Property: box-shadow
• Generator tool: CSSmatic
• Examples: Paulund: CSS Box Shadows Effects
box-shadow: 10px 10px 5px #888888;
Source: w3schools CSS3 Box Shadows
CSS3: Borders with Rounded Corners
Property: border-radius
p{
background: wheat;
padding: 3%;
border-style: solid;
border-color: tomato;
border-width: 5px;
border-radius: 25px;
margin: 2%;
}
Example: BorderRadius.html
References
•
w3schools: CSS3 border-radius
•
MDN: border-radius
Try different values
•
CSSmatic: Border Radius Generator
•
{CSS} Portal: CSS3 Rounded Corner Generator
Where Borders Are Used
Practice: Create an avatar
Original 130x130 pixel image
Round image with white border
Start here: CodePen: Quick Border Radius on IMG
Backgrounds
CSS3 adds the ability to
 Apply multiple background images to an element
 Scale image, maintaining aspect ratio, so it fills the browser window
References
 Browser support
 w3schools: CSS3 Backgrounds
 MDN: Using CSS Multiple Backgrounds
Some examples of Fullscreen websites
Web Design considerations
 NN/g: Ensure High Contrast for Text Over Images
Articles on how to use
 A List Apart: Supersize that Background, Please!
 Six Revisions: Responsive Full Background Image Using CSS
Background Images
Example One
Uses contain property
Maintains aspect ratio with
opaque borders if needed
Example Three:
Uses cover property
Maintains aspect ratio and crops
if needed
Often used with responsive sites
Source: A List Apart: Supersize that Background, Please!
CSS3: Filter Effects
CSS3 adds the ability to
 Define visual effects such as blur, grayscale, brightness, and
contrast to an element
 Often applied to <img> elements
References
 Browser support
 Tutorial: w3schools: CSS3 Filter Property
 Understanding CSS Filter Effects (good article, but dated wrt
browser support)
Examples
 CSS Filters Playground
 CSSREFLEX Generator for Filter Effects
Aside: National Geographic Photo Guidelines
“Please avoid heavy-handed processing. We want to see the world through
your eyes, not through the excessive use of editing tools.”
CSS3 Gradients
CSS3 adds the ability to
 Provide smooth transitions from one color to another
 Can be assigned anywhere that an image can be used in a
stylesheet, e.g.,background-image, border-image
Two types
 Linear gradients change colors along a line
 Radial gradients spread outward in a circular or elliptical shape
References
 MDN: Using CSS Gradients
 CSS-Tricks: CSS Gradients
 CSS Gradient Generator
 uiGradients: Beautiful colour gradients
CSS3 Gradients and Web Design
Don't overuse gradients...
But, don't avoid them either
 NN/g: Flat Design: Its Origins, Its Problems, ...
“One of the biggest usability issues introduced by flat design is
the lack of signifiers on clickable elements.”
 designmodo: ...Gradients are Making a Comeback
CSS3 Gradients and Web Design
Original version
Using KokoCaramel from uiGradients
background: #D1913C; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #D1913C , #FFD194);
background: linear-gradient(to left, #D1913C , #FFD194);
Example: indexFGgradient.html
Transparency and Gradients
Original image
Created with
Photoshop with
50% opacity
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.4) 90%), url(hboro.jpg);
Original image
with lineargradient and
color stop
CSS3 2D/3D Transforms
• Translate, rotate, scale, and skew HTML elements
• Browser support
References
 CSS-Tricks: transform and animation
 Shay Howe Tutorial: Transforms
 DeSandro: Intro to CSS 3D transforms
Tools
 CSSREFLEX: Transform Generator
 WestCiv: 2D/3D Transform Tool
Examples
 Flipping content demos
 Viget: About page
CSS3 Transitions
• Allow property changes in CSS values to occur smoothly over a
specified duration
• Browser support
• Shay Howe Tutorial: Transitions and Animations
• MDN: Using CSS transitions
• Examples
 SplinterGroup: hover over client tiles
 Viget: hover over team avatars
 Nature Conservancy: hover over photo contest winners
CSS3 Animations
Complex method for animating certain properties of an element
Browser support
References
 MDN: Using CSS animations
 A List Apart: UI Animation and UX: A Not-So-Secret Friendship
 A List Apart: Web Animation at Work
Examples
 CodePen: 15 Inspiring Examples of CSS Animation on CodePen
 Creative Bloq: 22 stunning examples of CSS3 animation
Star Wars and CSS Animation
 The Original
 The Force Awakens
Vendor Prefixes
•
For some newer, not yet standardized, features in CSS3, browsers may
provide their own experimental and proprietary solutions
•
Browsers add support at different times and may use different versions
of the draft specification.
•
These are “in progress” versions, that will eventually be replaced, and
all browsers will use the same syntax
•
In the interim, these proprietary properties have vendor prefixes
Prefix
Organization
Browsers
-ms-
Microsoft
Internet Explorer
-moz-
Mozilla Foundation
Firefox
-o-
Opera Software
Old versions of Opera
-webkit-
Open source (was Apple)
Chrome, newer versions of Opera
“CSS isn't easy”
Bert Bos, CSS co-inventor, Maintainability essay
•
“CSS stops short of even more powerful features that programmers use
in their programming languages: macros, variables, symbolic constants,
conditionals, expressions over variables, etc. That is because these
things give power-users a lot of rope, but less experienced users will
unwittingly hang themselves; or, more likely, be so scared that they won't
even touch CSS. It's a balance. And for CSS the balance is different than
for some other things.”
Dan Cederholm, web designer and author
•
“Learning CSS isn't easy. Understanding what each property does, how
the cascade works, which browser supports what, the selectors, the
quirks, and so forth.”
•
“The original architects of CSS were concerned with adoption. They
(rightfully) wanted as many people as possible creating websites. They
wanted CSS to be powerful enough to style web pages and separate
content from presentation, while being easy to understand and use. I can
certainly respect that. At the same time, we have work to do, and that
work is getting more complicated, more nuanced,and more challenging to
maintain and to future-proof.”
Inheritance
Styled HTML elements pass down certain style properties to
the elements they contain
•
Advantage: fewer rules to write
•
Disadvantage: have to keep track of inherited properties
•
Some properties inherit, and others do not
•
One way to find out: look it up
 Example: CSS Color property
Inheritance and assigning text color
h1 {
color: red;
border-bottom: 1px solid red; }
h2 {
color: red;
margin-left: 20%; }
p{
font-size: medium;
font-family: sans-serif;
margin-left: 20%; }
<p> text color is inherited from <body>
<body> text color is not defined by the
above style sheet, so the browser's
default user agent style sheet is
used
Source: LWD, Chapter 11
When Style Sheets Cascade, and Conflict
• With multiple sources of style information, there may be multiple
style rules for the same element – which rule is applied?
• Style information “cascades” down until it is overridden by a style
rule with more weight.
• Style sheet hierarchy assigns different weights to different
sources of information (increasing order)






Browser default settings ('user agent' style sheet)
Linked external style sheets (add with <link> element)
Imported style sheets (add with @import function)
Embedded style sheets (add with <style> element)
Inline style information (don't do this!)
Rules marked !important
• Rule order conflicts: “last one listed wins”
 within style rules
 among external style sheets
Specificity
• When style rules conflict, more specific selectors have
more weight
• How CSS calculates specificity
 ID selectors are more specific than
 Class selectors, which are more specific than
 Contextual selectors, which are more specific than
 Individual element selectors
• Conflicting rules for <strong> element, which has more weight?
strong { color: red; }
h1 strong { color: blue; }
• More conflicts...
p { line-height: 1.2em; }
blockquote p { line-height: 1em; }
p.intro { line-height: 2em; }
Specificity
For more info
 MDN: CSS Specificity
 CSS Specificity: Things You Should Know
 CSS-Tricks: Specifics on CSS Specificity
Specificity Quiz
Summary
 Keep it simple!
 You need a basic understanding of how specificity works,
so when your rules don't, you know how to fix them
 Use developer tools !
Select 'Inspect Element'
from context menu
User agent
style sheet
This is what the Black Goose
web page looks like without a
style sheet.
All browsers have a default
user agent style sheet with
basic style rules for HTML
elements.
Black Goose Bistro with an
external style sheet