View
5
Download
0
Category
Preview:
Citation preview
Slide 1
CSS for Presentation
Joan Boone jpboone@email.unc.edu
INLS 572Web Development
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 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 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 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
Recommended