Views
4 months ago

design3

184 The Principles of

184 The Principles of Beautiful Web Design Figure 5.32. The creative portfolio of Wing Cheng If Wing incorporated the alternating page textures into the background of each portfolio item, the file size of each image would be much larger, and the site would have taken a very long time to load. Instead, there are just two different paper textures; one angled in at the bottom and one angled out. These are applied as 24-bit PNG background images on the div elements that contain each portfolio item. If she wants to add a new portfolio item, she only needs to shuffle the background images in the CSS, rather than having to recreate all the images for her entire portfolio. In this example, the portfolio images were the content, and they were enhanced by the 3D paper backgrounds placed behind them. Using Pure CSS to Enhance Images Applying a background or overlay is a great way to give your content images a unique and unified look. Of course, not all CSS-based image effects involve extra images. CSS borders provide myriad possible effects. As you may already know, the standard CSS2 borders have three properties—width, style, and color—which are controlled individually via the border-width, border-style, and border-color properties, and by the shorthand border property. The border-width and bordercolor properties are fairly self-explanatory. border-width sets the thickness of the border using either a CSS measurement (such as 1px or 0.5em) or a keyword (one of thin, medium, or thick). The border-color property takes a hexadecimal color value.

Imagery 185 The border-style property is where the developers of CSS got their creativity on. We have eight visual styles to choose from: dotted, dashed, solid, double, groove, ridge, inset, and outset—in addition to the invisible values, none and hidden. You can see these standard styles on display in Figure 5.33. Figure 5.33. The eight visible border styles as seen in four different browsers Even with these slight inconsistencies, each style is clearly distinguished and potentially useful. I use the word “potentially” because, depending on how they’re used, these borders can also be ugly. Just as good typography exists to complement text, a good border should complement the item it surrounds. Borders that are particularly large, or have a lot of color contrast, will distract viewers from the image to which you wish to draw more attention. You can take full advantage of borders’ ugly potential by specifying completely different borders for each side of a block. The ability to specify these values separately can be useful if you want a border on just one side of a block, or if you want to use different colors within the same border. But mixing different styles, colors, and thickness values around the same element or Figure 5.34. CSS can produce scary borders image usually only leads to trouble. As you can see from the scary monkey image in Figure 5.34, this approach can produce some fairly horrific results (though I admit that the toy itself fails to help matters).

  • Page 1:

    Summary of Contents Preface . . . .

  • Page 4 and 5:

    iv The Principles of Beautiful Web

  • Page 7 and 8:

    Table of Contents Preface . . . . .

  • Page 9 and 10:

    ix Color Scheme Designer 3 . . . .

  • Page 11:

    xi Creative Image Treatments . . .

  • Page 14 and 15:

    xiv bathroom with the work that we

  • Page 16 and 17:

    xvi Tips, Notes, and Warnings Hey,

  • Page 18 and 19:

    2 The Principles of Beautiful Web D

  • Page 20 and 21:

    4 The Principles of Beautiful Web D

  • Page 22 and 23:

    6 The Principles of Beautiful Web D

  • Page 24 and 25:

    8 The Principles of Beautiful Web D

  • Page 26 and 27:

    10 The Principles of Beautiful Web

  • Page 28 and 29:

    12 The Principles of Beautiful Web

  • Page 30 and 31:

    14 The Principles of Beautiful Web

  • Page 32 and 33:

    16 The Principles of Beautiful Web

  • Page 34 and 35:

    18 The Principles of Beautiful Web

  • Page 36 and 37:

    20 The Principles of Beautiful Web

  • Page 38 and 39:

    22 The Principles of Beautiful Web

  • Page 40 and 41:

    24 The Principles of Beautiful Web

  • Page 42 and 43:

    26 The Principles of Beautiful Web

  • Page 44 and 45:

    28 The Principles of Beautiful Web

  • Page 46 and 47:

    30 The Principles of Beautiful Web

  • Page 48 and 49:

    32 The Principles of Beautiful Web

  • Page 50 and 51:

    34 The Principles of Beautiful Web

  • Page 52 and 53:

    36 The Principles of Beautiful Web

  • Page 54 and 55:

    38 The Principles of Beautiful Web

  • Page 56 and 57:

    40 The Principles of Beautiful Web

  • Page 58 and 59:

    42 The Principles of Beautiful Web

  • Page 60 and 61:

    44 The Principles of Beautiful Web

  • Page 62 and 63:

    46 The Principles of Beautiful Web

  • Page 65 and 66:

    2 Chapter Color Whether you’re de

  • Page 67 and 68:

    Color 51 reason, it’s often used

  • Page 69 and 70:

    Color 53 Figure 2.5. Calming stones

  • Page 71 and 72:

    Color 55 Figure 2.7. These wind tur

  • Page 73 and 74:

    Color 57 Chromatic Value The measur

  • Page 75 and 76:

    Color 59 Figure 2.12. The tradition

  • Page 77 and 78:

    Color 61 thick that you’re unable

  • Page 79 and 80:

    Color 63 Another example of saturat

  • Page 81 and 82:

    Color 65 An Analogous Color Scheme

  • Page 83 and 84:

    Color 67 Figure 2.22. Blinksale’s

  • Page 85 and 86:

    Color 69 put off by the stark contr

  • Page 87 and 88:

    Color 71 Figure 2.27. Cross Cross C

  • Page 89 and 90:

    Color 73 Figure 2.30. The Bulls+Arr

  • Page 91 and 92:

    Color 75 Figure 2.34. The adventuro

  • Page 93 and 94:

    Color 77 Table 2.1. Counting from 1

  • Page 95 and 96:

    Color 79 Scheme Designer 3 works. U

  • Page 97 and 98:

    Color 81 Figure 2.39. Pictaculous C

  • Page 99 and 100:

    Color 83 Figure 2.41. A mood board

  • Page 101 and 102:

    3 Chapter Texture There are many we

  • Page 103 and 104:

    Texture 87 Figure 3.2. The A-Team b

  • Page 105 and 106:

    Texture 89 Figure 3.5. Geometric an

  • Page 107 and 108:

    Texture 91 Rounded Corners So we’

  • Page 109 and 110:

    Texture 93 Figure 3.10. Ithaca Even

  • Page 111 and 112:

    Texture 95 Figure 3.12. Speed Kids

  • Page 113 and 114:

    Texture 97 Figure 3.14. Perspective

  • Page 115 and 116:

    Texture 99 Figure 3.17. A clear and

  • Page 117 and 118:

    Texture 101 Although repetitious ba

  • Page 119 and 120:

    Texture 103 declaration background-

  • Page 121 and 122:

    Texture 105 Figure 3.25. Three repe

  • Page 123 and 124:

    Texture 107 Figure 3.27. Team Fanny

  • Page 125 and 126:

    Texture 109 said, just because you

  • Page 127 and 128:

    Texture 111 This site certainly fal

  • Page 129 and 130:

    Texture 113 Another notable example

  • Page 131 and 132:

    Texture 115 Figure 3.36. Minimalism

  • Page 133:

    Texture 117 Figure 3.38. The site d

  • Page 136 and 137:

    120 The Principles of Beautiful Web

  • Page 138 and 139:

    122 The Principles of Beautiful Web

  • Page 140 and 141:

    124 The Principles of Beautiful Web

  • Page 142 and 143:

    126 The Principles of Beautiful Web

  • Page 144 and 145:

    128 The Principles of Beautiful Web

  • Page 146 and 147:

    130 The Principles of Beautiful Web

  • Page 148 and 149:

    132 The Principles of Beautiful Web

  • Page 150 and 151: 134 The Principles of Beautiful Web
  • Page 152 and 153: 136 The Principles of Beautiful Web
  • Page 154 and 155: 138 The Principles of Beautiful Web
  • Page 156 and 157: 140 The Principles of Beautiful Web
  • Page 158 and 159: 142 The Principles of Beautiful Web
  • Page 160 and 161: 144 The Principles of Beautiful Web
  • Page 162 and 163: 146 The Principles of Beautiful Web
  • Page 164 and 165: 148 The Principles of Beautiful Web
  • Page 166 and 167: 150 The Principles of Beautiful Web
  • Page 168 and 169: 152 The Principles of Beautiful Web
  • Page 170 and 171: 154 The Principles of Beautiful Web
  • Page 172 and 173: 156 The Principles of Beautiful Web
  • Page 174 and 175: 158 The Principles of Beautiful Web
  • Page 176 and 177: 160 The Principles of Beautiful Web
  • Page 178 and 179: 162 The Principles of Beautiful Web
  • Page 180 and 181: 164 The Principles of Beautiful Web
  • Page 182 and 183: 166 The Principles of Beautiful Web
  • Page 184 and 185: 168 The Principles of Beautiful Web
  • Page 186 and 187: 170 The Principles of Beautiful Web
  • Page 188 and 189: 172 The Principles of Beautiful Web
  • Page 190 and 191: 174 The Principles of Beautiful Web
  • Page 192 and 193: 176 The Principles of Beautiful Web
  • Page 194 and 195: 178 The Principles of Beautiful Web
  • Page 196 and 197: 180 The Principles of Beautiful Web
  • Page 198 and 199: 182 The Principles of Beautiful Web
  • Page 202 and 203: 186 The Principles of Beautiful Web
  • Page 204 and 205: 188 The Principles of Beautiful Web
  • Page 206: 190 The Principles of Beautiful Web
Boot Camp
Layout and Design - In Easy Steps
Download PDF - Shop.org
30 ways to create amazing web experiences on tablets
QUICK START GUIDE FOR CLUB WEBSITES
Visual Design for Library Websites - WebJunction
PDF Specimen Booklet - Fontworks UK Ltd
How to build a department web site (starter pack) - University of ...
Visual Design and Web Site Usability
Responsive Email Design Guide - e-Dialog
Mobile First