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

INLS 572 Web Development CSS for Presentation Joan Boone jpboone@email.unc.edu Slide 1

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

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 3

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 4

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 5

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 6

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 7

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

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

Topics Part 1: Overview, Box Model Part 2: Borders Part 3: Gradients Slide 10

CSS Borders – where used? Design showcase Slide 11

CSS Basic Borders Properties: border-width, border-style, border-color .banner { display: block; margin-left: auto; margin-right: auto; max-width: 70%; border-style: double; border-width: .5em; border-color: orange;} footer { font-size: .8em; padding: 1%; border-top: .2em solid orange; text-align: center; } NOTE: border-style must be specified, otherwise, color and width have no effect. Reference: w3schools: CSS Borders nc-national-parks-border.html Slide 12

CSS Borders with Rounded Corners using the border-radius property footer { font-size: .8em; padding: 1%; Shorthand for border: .3em solid orange; border-width border-radius: 1.2em; border-style text-align: center; border-color } References: w3schools: CSS border-radius and MDN: border-radius Slide 13

More borders... Dribbble.com Designers Slide 14

Using border-radius to create an avatar/profile image Image with Image with added Original image border-radius:20px; border: 5px solid #b58e19; CodePen: Quick Border Radius on IMG Slide 15

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 border-radius: 100px / 60px; Curt Arledge User Experience Designer Viget border-radius: 51% 49% 54% 46% / 0% 100% 0% 100%; Slide 16

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 17

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 • How to...  MDN: box-shadow  w3schools: CSS box-shadow Property  Modern CSS Solutions: Expanded Use of 'box-shadow' box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38); nc-national-parks-box-shadow.html Slide 18

Topics Part 1: Overview, Box Model Part 2: Borders Part 3: Gradients Slide 19

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 20

CSS Gradients...many uses Borders Backgrounds Logos Text Slide 21

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 22

Linear Gradient Example background-image: background-color: #d9b38c; linear-gradient(to bottom right, #d9b38c, #f2e6d9); Slide 23 nc-national-parks-bg-gradient.html