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
Recommend
More recommend