Views
1 month ago

design3

186 The Principles of

186 The Principles of Beautiful Web Design Here’s the CSS I used to create those scary borders: img.uglybox { border-top: 20px groove #ff1100; border-right: 16px dotted #66ee33; border-bottom: 8px outset #00aaff; border-left: 12px double #ff00ff; } Thankfully, applying different CSS border properties to a single image doesn’t have to be scary. The awesome power of borders can be used just as well for good as they can for evil. One graphic edge effect that designers often want to apply to the images in their designs is a subtle drop shadow or inset or groove to add dimension. I mentioned in Chapter 3 that CSS3 could be used to create drop shadows, but sometimes the effect you’re going for is a little simpler and more subtle—like the one Claire Campbell employs on her site. In the figure below, you can see a real, working CSS digital clock. It was made by creatively manipulating CSS borders. Figure 5.35. Subtle groove on Claire's clock While image effects like the ones I’ve described in this section are useful, our ability to enhance HTML images will be greatly enhanced by some of the new features of CSS3. A great example is the final demo from Natalie Downe’s 24 ways article, “Going Nuts with CSS3 Transitions.” 23 The demo for the tutorial, seen in Figure 5.36, uses CSS3 animation, drop shadow, and rotation/scale transforms to make a standard photo gallery look like a pile of Polaroid photos tossed onto a table. 23 http://24ways.org/2009/going-nuts-with-css-transitions

Imagery 187 Figure 5.36. Natalie Downe’s CSS3 Polaroid images with captions It’s an exciting time for web design and development; the example above represents just a tiny sliver of the new styling options in CSS3. For a full breakdown of the border properties specifically, I recommend checking out Estelle Weyl’s Border Properties, Values, and Browser Support 24 page at The Standardista. The main goal with all these display effects is to bring more attention to the images in our content, whether it’s done with creative overlays, simple border properties, or new CSS3 effects. The most important point to remember is that borders and effects should enhance the images they surround, not drown them out. Avoid adding effects that call more attention to themselves than to the photo they’re highlighting. Application: The Finishing Touches In the last chapter we nailed down the details of the different aspects of the KRG website. We'd decided on our typefaces to create a consistent, inviting atmosphere for Carrie’s clients. So now it's time to refine the imagery. The main content of the site is laid out in a blog-style format, but the home page has a sliding gallery, with news, events, and product announcements that cycle through without the user ever having to scroll. 24 http://www.standardista.com/css3/css3-border-properties

  • 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 200 and 201: 184 The Principles of Beautiful Web
  • Page 204 and 205: 188 The Principles of Beautiful Web
  • Page 206: 190 The Principles of Beautiful Web
Layout and Design - In Easy Steps
Boot Camp
QUICK START GUIDE FOR CLUB WEBSITES
The Complete Guide to a High Converting Website
30 ways to create amazing web experiences on tablets
Download PDF - Shop.org
Web Site Design & Usability Testing - HIPNet
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference
How to build a department web site (starter pack) - University of ...
NewZapp-Factsheet-Email-Building-Best-Practice-Designers
A Kick-Ass Guide to Building an Awesome Website
ESL Essay Writing and Formatting Rules in 2018