Slide 1

CSS for Presentation

Joan Boone jpboone@email.unc.edu

INLS 572Web Development

Slide 2

Part 1: Overview, Box Model

Part 2: Borders

Part 3: Gradients

Slide 3

CSS for PresentationOriginally (1996-2001)...

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

More recently, 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 CSSHow 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 Web Docs: 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 (not the image), and a context menu will display. Select Inspect from Chrome or 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

Part 1: Overview, Box Model

Part 2: Borders

Part 3: Gradients

Slide 11

CSS Borders – where used?

Slide 12

CSS Basic BordersProperties: border-width, border-style, border-color

Reference: w3schools: CSS Borders

.banner { display: block; margin-top: 3%; margin-left:auto; margin-right: auto; width: 90%; border-style: double; border-width: .5em; border-color: #dc1515;}

NOTE: border-style must be specified, otherwise, color and width have no effect.

footer { border-top: solid #dc1515 .1em; font-size: .8em; text-align: center; padding: 2%;}

Slide 13

CSS Borders with Rounded Corners using the border-radius property

footer { border: .2em solid #dc1515; border-radius: 1em; font-size: .8em; text-align: center; padding: 1%; margin: 1% 10%;}

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

Shorthand for border-width border-style border-color

Slide 14

More borders...

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 MoranSenior UX Specialist

Nielsen Norman Group

Curt ArledgeUX Strategy Director

Viget

border-radius: 100px / 60px;

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

Slide 17

CSS clip-path propertyCreates 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

Clippy: a tool for making clip-paths

How to...• CSS-Tricks: clip-path• MDN Web Docs: CSS clip-path• w3schools: CSS clip-path

woodpecker-clip-path.html

.banner { display: block; margin-left: auto; margin-right: auto; width: 90%; clip-path: ellipse(50% 45% at 50% 50%);}

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

woodpecker-box-shadow.html

How to... MDN Web Docs: box-shadow

w3schools: CSS box-shadow Property

Modern CSS Solutions: Expanded Use of 'box-shadow'

.banner { display: block; margin-top: 2%; margin-left: auto; margin-right: auto; width: 90%; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.9);}

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

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 GradientsCSS 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 Web Docs: 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: #ecf4b1; background-image: linear-gradient(to bottom right, #ecf4b1, #aebf32);

woodpecker-bg-gradient.html