CSS for Presentation Joan Boone jpboone@email.unc.edu Slide 1 - - PowerPoint PPT Presentation

Slide 1

CSS for Presentation

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

Slide 2

Topics

Part 1: Overview, Box Model Part 2: Borders Part 3: Gradients

Slide 3

CSS for Presentation

Originally (1996-2001)...

• Focus of CSS was on fonts, color, and tables
• Minimum features were supported to encourage use

More recently (CSS3), the focus has been on visual and interaction features

• Borders (border-radius, box-shadow, border-image)
• Gradients (linear, radial)
• Backgrounds (background-size, background-origin)
• Filter Effects
• 2D/3D Transforms (translate, rotate, scale, skew)
• Transitions (change style for a given duration)
• Animations (can replace JavaScript, Flash)

Slide 4

Learning CSS

How To Learn CSS by Rachel Andrew (January 2019) Useful summary with good links to related resources

• Language Fundamentals
• Selectors, more than just class
• Inheritance and cascade
• The Box Model
• Normal Flow
• Formatting Contexts
• Being in and out of flow
• Layout
• Responsive Design
• Fonts and Typography
• Transforms and Animation

Slide 5

CSS Box Model

• Every element in a web document is represented as a rectangular box.

Each box has 4 parts: content, padding, border, and margin that can be styled with CSS properties.

• Content area contains the real content of the element.
• Padding area adds space around the content.
• Border area surrounds the padding and content. Borders have width,

style, and color attributes.

• Margin area adds space outside the border to separate the element

from its neighbors

References: w3schools CSS Box Model MDN Intro to CSS basic box Model

Slide 6

Margins vs. Padding: Managing Space

• The margin and padding properties allow you to control the

amount of space around and between elements

• Understanding the Box Model is very helpful when trying to

specify the desired margins and padding

• References: w3schools CSS Margins and CSS Padding

Source: Margin vs. Padding by Kunal Sarkar

Slide 7

Using Browser Developer Tools to view the Box Model

• Both Chrome and Firefox (and other browsers) have built-in Developer Tools that

allow you to view the details of a web page just as your browser views it.

• You can right-click on the page, and a context menu will display. Select Inspect

(Chrome) or Inspect Element (Firefox), to display the page Inspector tool.

Chrome Firefox

Chrome DevTools Firefox Developer Tools

Slide 8

Box Model in Chrome DevTools

Selected element: <h2> CSS rules from the user agent style sheet – these are the default rules applied by the browser. Box Model for <h2> element

Slide 9

Exercise: How to reduce the space between heading and paragraph?

Slide 10

Topics

Part 1: Overview, Box Model Part 2: Borders Part 3: Gradients

Slide 11

CSS Borders – where used?

Design showcase

Slide 12

CSS Basic Borders

Properties: border-width, border-style, border-color

Reference: w3schools: CSS Borders .banner { display: block; margin-left: auto; margin-right: auto; max-width: 70%; border-style: double; border-width: .5em; border-color: orange;} NOTE: border-style must be specified,

• therwise, color and width have no effect.

footer { font-size: .8em; padding: 1%; border-top: .2em solid orange; text-align: center; } nc-national-parks-border.html

Slide 13

CSS Borders with Rounded Corners using the border-radius property

footer { font-size: .8em; padding: 1%; border: .3em solid orange; border-radius: 1.2em; text-align: center;

}

References: w3schools: CSS border-radius and MDN: border-radius

Shorthand for border-width border-style border-color

Slide 14

More borders...

Dribbble.com Designers

Slide 15

Using border-radius to create an avatar/profile image

CodePen: Quick Border Radius on IMG

Original image Image with

border-radius:20px;

Image with added

border: 5px solid #b58e19;

Slide 16

Many ways to specify border-radius

• MDN web docs: border-radius illustrates the many variations
• Fancy Border Radius is a useful tool for creating different shapes

SILS Graduates

Kate Moran

User Experience Specialist Nielsen Norman Group

Curt Arledge

User Experience Designer Viget

border-radius: 100px / 60px; border-radius: 51% 49% 54% 46% / 0% 100% 0% 100%;

Slide 17

CSS clip-path property

Creates a clipping region that defines what part of an element is shown.

• Parts inside the region are shown; parts outside are hidden
• Alternative to Fancy Border Radius
• Caniuse: Browser support

Tool: Clippy - a tool for making CSS clip-paths How to...

• CSS-Tricks: clip-path
• MDN: CSS clip-path
• w3schools: CSS clip-path

clip-path: ellipse(50% 45% at 50% 50%); nc-national-parks-clip-path.html

Slide 18

CSS box-shadow property

• Adds shadow effects around the edges of an element
• Specified by X and Y offsets, blur and spread radius, and color
• Often used in card layouts and buttons to suggest elevation

box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38);

nc-national-parks-box-shadow.html

How to...

• MDN: box-shadow
• w3schools:

CSS box-shadow Property

• Modern CSS Solutions:

Expanded Use of 'box-shadow'

Slide 19

Topics

Part 1: Overview, Box Model Part 2: Borders Part 3: Gradients

Slide 20

CSS Gradients...then and now

Mid-2000s Around 2012, emergence of minimalism and flat design

• No shadows, textures, highlights, depth, 3D
• Examples: SILS, FedEx, Viget, Google Material Design
• NN/g: Flat Design: Its Origins, Its Problems, ...
• NN/g: Flat Design Best Practices

“One of the biggest usability issues introduced by flat design is the lack of signifiers on clickable elements.”

Today

• UX Planet: Gradients in UI Design
• Smashing: Using Gradients in User Experience Design
• Examples: Behance Gradient 2.0, CSS-Tricks

Slide 21

CSS Gradients...many uses

Text Logos Backgrounds Borders

Slide 22

CSS Gradients

CSS gradients

• Provide smooth transitions from one color to another
• Can be used anywhere you would use an image, such as backgrounds
• Dynamically generated by the browser

Types

• Linear gradients change colors along a line (horizontal, vertical, diagonal)
• Radial gradients spread outward in a circular or elliptical shape from a center

point

References

• MDN: Using CSS gradients, w3schools: CSS Gradients
• David Walsh: CSS Gradient Text
• CSS-Tricks: Gradient Borders in CSS

Tools

• Generate a CSS Color Gradient
• uiGradients: Beautiful colour gradients
• WebGradients, CoolHue, Grabient

Slide 23

Linear Gradient Example

background-color: #d9b38c; background-image: linear-gradient(to bottom right, #d9b38c, #f2e6d9);

nc-national-parks-bg-gradient.html