Downloaded 18 times
Uploaded byShawn Calvert
Images on the Web
The document discusses CSS concepts like the cascade, inheritance, and specificity. It explains that the cascade resolves conflicts between multiple CSS rules by prioritizing rules based on their source. Styles can be inherited from parent elements or made more specific. Images can be integrated into webpages and styled with CSS. The document provides guidelines for optimizing image size, format, and quality for the web.
More Related Content
Images on the Web
- 1. REVIEW / WEBIMAGES 22-3376 Web Design 2 // Columbia College Chicago
- 2.
- 3. The Cascade Inheritance Specificity
- 4. The Cascade The“cascade” part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements. For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will “trump” the other.
- 5. Client (user) stylesheet Linked (external) stylesheet Embedded (internal) stylesheet Inline (internal) Styles high importance low importance
- 6. Inheritance & Specificity As a designer, your goal is to set an overall global consistent style, then add in more specific styles as needed. You can control how and where your styles are applied to your HTML by managing their inheritance and specificity.
- 7. Inheritance Most elementswill inherit many style properties from their parent elements by default. A parent is a containing element of a child. HTML! <body> <div> <ul> <li></li> </ul> </div> </body> relationship! parent of site! parent of ul and li, child of body! parent of li, child of div and body! child of ul, div, and body! !
- 8. Inheritance body makethe paragraph 16px, Verdana, red p make the paragraph blue 16px, Verdana, blue
- 9. Not all propertiesare inherited
- 10.
- 12.
- 17. Tutorial ! 2-two-col-centered/ bootstrap
- 19. Images can beintegrated into your site as html <img> elements or pulled in from your css. Images on the Web How are images being used in the following sites?
- 20. Images can beintegrated into your site as html <img> elements or pulled in from your css. How are images being used in the following sites?
- 31. Beyond the technicalconsiderations, how do images create or influence the experience? ! What are the considerations you take into account before using an image in your designs?
- 40. Rules for usingweb images
- 41. 1 Save imagesin the right format 2 Save images at the right size 3 Measure images in pixels
- 42. What is the“right size”? With the growing use of responsive design techniques and faster connections, it is becoming less crucial for designers to have their images perfectly sized to their box. The basic guideline is to have (just) enough pixels for your images to look great, however you are using them.
- 43.
- 44. Screen image formats Print image formats
- 45. jpg jpgs arefor images, like photographs, that have a lot of colors and gradations. It uses “lossy” compression, meaning that you can reduce the size of the image by reducing the quality of the image detail. colors transparency? 24-bit: millions no
- 46. What is imagedetail? Image quality is detail; the quality of the original capture can be accessed by how much actual live detail was recorded, pixel-by-pixel. The more you compress your jpgs, the more of these pixel-by- pixel details you making the same (blowing out). The result of too much compression is jpg artifacts and posterization.
- 49.
- 50. Tutorial ! 3-images, Save for Web
- 51. png-24 There aretwo kinds of png images: 24-bit (png-24) and 8-bit (png-8). png-24 is a great format because it supports alpha transparency, which allows you to have images with transparent shadows, anti-aliasing, etc, and color underneath will show through. There is no support for png-24 in ie6 (there is a workaround). colors transparency? 24-bit: millions yes (alpha transparency)
- 52.
- 53. png-8 png-8 isan 8-bit image format, meaning that it supports up to 256 colors. It supports binary transparency, meaning that pixels are either on or off – they have no transparency. This translates to jaggy edges (which you have to then plan for and work around). You can reduce the color index (aka color table) to contain only the colors you need, resulting in very small image sizes. gif files are saved in “index” color mode. colors transparency? 8-bit: 256 colors yes (binary transparency)
- 55. Should I usepng or jpg? For photos, you almost always go with jpg, because pngs will usually be much larger. For icons, backgrounds, tiles, etc, that need transparency, use png-24.
- 57. Tutorial ! 3-images, png-24
- 58. gif gif ifthe workhorse for icons and vector graphics (like logos) that don’t need alpha transparency. Like png-8, it uses binary transparency. You can reduce the color index (aka color table) to contain only the colors you need, resulting in very small image sizes. gif files are saved in “index” color mode. colors transparency? 8-bit: 256 colors yes (binary transparency)
- 60. Tutorial ! 3-images, png-24
- 61. Tutorial ! 4-bootstrap ! image techniques: background images, sprites, tiled backgrounds