Values, Units, and Colors by Eric A. Meyer

By Eric A. Meyer

Nearly every little thing you do with CSS consists of devices for settling on the glance and formatting of your website parts. With this concise advisor, you’ll the best way to paintings with an array of units—including measurements and keywords—that assist you outline colour, textual content, distance among components, position of exterior documents, and different values.

This ebook includes chapters from the approaching fourth version of CSS: The Definitive Guide. for those who buy both the print or the publication version of Values, devices, and Colors, you’ll obtain an important at the complete Definitive advisor while it’s published. Why wait in the event you can the best way to use devices and different key CSS3 positive aspects correct away?

  • Use RGB or HSL values to combine your individual colours, and designate the measure of opacity
  • Learn easy methods to follow worldwide keyword phrases brought in CSS3
  • Use string values to wrap a series of textual content characters in costs
  • Describe margins, letter spacing, and different houses, with both fastened or relative size devices
  • Understand how quantity, integer, and percent values vary
  • Explore CSS3 unit forms for describing reveal solution
  • Use time values for transitions and animations

Show description

Read or Download Values, Units, and Colors PDF

Similar web design books

Video systems in an IT environment: the basics of networked media and file-based workflows

Audio/Video (AV) structures and knowledge know-how (IT) have collided. it's being leveraged to create compelling networked media and file-based workflows. Video structures in an IT setting has helped millions of execs in broadcast, put up and different media disciplines to appreciate the major features the AV/IT "tapeless” convergence.

Visual Web Developer 2005 Express Edition For Dummies

Visible net Developer exhibit version is a inexpensive, entry-level model established round pre-built tasks that new builders can simply installation and customise for his or her personal websites Explains the right way to harness "drag-and-drop" instruments that construct at the acclaim for ASP. web, supplying net designers a simple creation to the hot Microsoft visible Studio 2005 Framework indicates amateur internet builders step-by-step the way to create strong ASP.

WordPress For Dummies, 7th Edition

It kind of feels as if the area revolves round web content and blogs nowadays, and with WordPress For Dummies, seventh version you could sign up for the joys! This easy-to-read publication is choked with the knowledge you want to navigate the area of WordPress, and all the content material is up-to-date to maintain you up to the mark with the newest updates.

Aptana RadRails: An IDE for Rails Development

A entire consultant to utilizing RadRails to advance your Ruby on Rails initiatives in a certified and efficient demeanour. Aptana RadRails is an built-in improvement atmosphere for Ruby on Rails initiatives. outfitted on best of the well known Eclipse platform, RadRails offers all of the instruments you must create an entire Rails program from a unmarried interface, permitting you to target the inventive a part of the advance as your IDE looks after the mechanics.

Extra info for Values, Units, and Colors

Sample text

The vagaries of length units, however, far from being bugs, are an interesting problem for any author to tackle. These units all have their advantages and drawbacks, depending upon the circumstances in which they’re used. Summary | 27 28 | Values, Units, and Colors rgb(138,43,226) rgb(165,42,42) rgb(222,184,135) rgb(95,158,160) rgb(127,255,0) rgb(210,105,30) rgb(255,127,80) rgb(100,149,237) rgb(255,248,220) rgb(220,20,60) rgb(0,255,255) rgb(0,0,139) brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue rgb(255,228,196) bisque blueviolet rgb(245,245,220) beige rgb(0,0,255) rgb(240,255,255) azure blue rgb(127,255,212) aquamarine rgb(0,0,0) rgb(0,255,255) aqua rgb(255,235,205) rgb(250,235,215) antiquewhite blanchedalmond rgb(240,248,255) aliceblue black RGB Decimal Color name rgb(0%,0%,55%) rgb(0%,100%,100%) rgb(86%,8%,24%) rgb(100%,97%,86%) rgb(39%,58%,93%) rgb(100%,50%,31%) rgb(82%,41%,12%) rgb(50%,100%,0%) rgb(37%,62%,63%) rgb(87%,72%,53%) rgb(65%,16%,16%) rgb(54%,17%,89%) rgb(0%,0%,100%) rgb(100%,92%,80%) rgb(0%,0%,0%) rgb(100%,89%,77%) rgb(96%,96%,86%) rgb(94%,100%,100%) rgb(50%,100%,83%) rgb(0%,100%,100%) rgb(98%,92%,84%) rgb(94%,97%,100%) RGB Percentage hsl(240,100%,27%) hsl(180,100%,50%) hsl(348,83%,47%) hsl(48,100%,93%) hsl(219,79%,66%) hsl(16,100%,66%) hsl(25,75%,47%) hsl(90,100%,50%) hsl(182,25%,50%) hsl(34,57%,70%) hsl(0,59%,41%) hsl(271,76%,53%) hsl(240,100%,50%) hsl(36,100%,90%) hsl(0,0%,0%) hsl(33,100%,88%) hsl(60,56%,91%) hsl(180,100%,97%) hsl(160,100%,75%) hsl(180,100%,50%) hsl(34,78%,91%) hsl(208,100%,97%) HSL #00008B #00FFFF #DC143C #FFF8DC #6495ED #FF7F50 #D2691E #7FFF00 #5F9EA0 #DEB887 #A52A2A #8A2BE2 #0000FF #FFEBCD #000000 #FFE4C4 #F5F5DC #F0FFFF #7FFFD4 #00FFFF #FAEBD7 #F0F8FF Hexa-decimal #0FF #00F #000 #0FF Short Hex Color Equivalence Table Color Equivalence Table | 29 RGB Decimal rgb(0,139,139) rgb(184,134,11) rgb(169,169,169) rgb(0,100,0) rgb(169,169,169) rgb(189,183,107) rgb(139,0,139) rgb(85,107,47) rgb(255,140,0) rgb(153,50,204) rgb(139,0,0) rgb(233,150,122) rgb(143,188,143) rgb(72,61,139) rgb(47,79,79) rgb(47,79,79) rgb(0,206,209) rgb(148,0,211) rgb(255,20,147) rgb(0,191,255) rgb(105,105,105) rgb(105,105,105) Color name darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey rgb(41%,41%,41%) rgb(41%,41%,41%) rgb(0%,75%,100%) rgb(100%,8%,58%) rgb(58%,0%,83%) rgb(0%,81%,82%) rgb(18%,31%,31%) rgb(18%,31%,31%) rgb(28%,24%,55%) rgb(56%,74%,56%) rgb(91%,59%,48%) rgb(55%,0%,0%) rgb(60%,20%,80%) rgb(100%,55%,0%) rgb(33%,42%,18%) rgb(55%,0%,55%) rgb(74%,72%,42%) rgb(66%,66%,66%) rgb(0%,39%,0%) rgb(66%,66%,66%) rgb(72%,53%,4%) rgb(0%,55%,55%) RGB Percentage hsl(0,0%,41%) hsl(0,0%,41%) hsl(195,100%,50%) hsl(328,100%,54%) hsl(282,100%,41%) hsl(181,100%,41%) hsl(180,25%,25%) hsl(180,25%,25%) hsl(248,39%,39%) hsl(120,25%,65%) hsl(15,72%,70%) hsl(0,100%,27%) hsl(280,61%,50%) hsl(33,100%,50%) hsl(82,39%,30%) hsl(300,100%,27%) hsl(56,38%,58%) hsl(0,0%,66%) hsl(120,100%,20%) hsl(0,0%,66%) hsl(43,89%,38%) hsl(180,100%,27%) HSL #696969 #696969 #00BFFF #FF1493 #9400D3 #00CED1 #2F4F4F #2F4F4F #483D8B #8FBC8F #E9967A #8B0000 #9932CC #FF8C00 #556B2F #8B008B #BDB76B #A9A9A9 #006400 #A9A9A9 #B8860B #008B8B Hexa-decimal Short Hex 30 | Values, Units, and Colors RGB Decimal rgb(30,144,255) rgb(178,34,34) rgb(255,250,240) rgb(34,139,34) rgb(255,0,255) rgb(220,220,220) rgb(248,248,255) rgb(255,215,0) rgb(218,165,32) rgb(128,128,128) rgb(0,128,0) rgb(173,255,47) rgb(128,128,128) rgb(240,255,240) rgb(255,105,180) rgb(205,92,92) rgb(75,0,130) rgb(255,255,240) rgb(240,230,140) rgb(230,230,250) rgb(255,240,245) rgb(124,252,0) Color name dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen rgb(49%,99%,0%) rgb(100%,94%,96%) rgb(90%,90%,98%) rgb(94%,90%,55%) rgb(100%,100%,94%) rgb(29%,0%,51%) rgb(80%,36%,36%) rgb(100%,41%,71%) rgb(94%,100%,94%) rgb(50%,50%,50%) rgb(68%,100%,18%) rgb(0%,50%,0%) rgb(50%,50%,50%) rgb(85%,65%,13%) rgb(100%,84%,0%) rgb(97%,97%,100%) rgb(86%,86%,86%) rgb(100%,0%,100%) rgb(13%,55%,13%) rgb(100%,98%,94%) rgb(70%,13%,13%) rgb(12%,56%,100%) RGB Percentage hsl(90,100%,49%) hsl(340,100%,97%) hsl(240,67%,94%) hsl(54,77%,75%) hsl(60,100%,97%) hsl(275,100%,25%) hsl(0,53%,58%) hsl(330,100%,71%) hsl(120,100%,97%) hsl(0,0%,50%) hsl(84,100%,59%) hsl(120,100%,25%) hsl(0,0%,50%) hsl(43,74%,49%) hsl(51,100%,50%) hsl(240,100%,99%) hsl(0,0%,86%) hsl(300,100%,50%) hsl(120,61%,34%) hsl(40,100%,97%) hsl(0,68%,42%) hsl(210,100%,56%) HSL #7CFC00 #FFF0F5 #E6E6FA #F0E68C #FFFFF0 #4B0082 #CD5C5C #FF69B4 #F0FFF0 #808080 #ADFF2F #008000 #808080 #DAA520 #FFD700 #F8F8FF #DCDCDC #FF00FF #228B22 #FFFAF0 #B22222 #1E90FF Hexa-decimal #F0F Short Hex Color Equivalence Table | 31 RGB Decimal rgb(255,250,205) rgb(173,216,230) rgb(240,128,128) rgb(224,255,255) rgb(250,250,210) rgb(211,211,211) rgb(144,238,144) rgb(211,211,211) rgb(255,182,193) rgb(255,160,122) rgb(32,178,170) rgb(135,206,250) rgb(119,136,153) rgb(119,136,153) rgb(176,196,222) rgb(255,255,224) rgb(0,255,0) rgb(50,205,50) rgb(250,240,230) rgb(255,0,255) rgb(128,0,0) rgb(102,205,170) Color name lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine rgb(40%,80%,67%) rgb(50%,0%,0%) rgb(100%,0%,100%) rgb(98%,94%,90%) rgb(20%,80%,20%) rgb(0%,100%,0%) rgb(100%,100%,88%) rgb(69%,77%,87%) rgb(47%,53%,60%) rgb(47%,53%,60%) rgb(53%,81%,98%) rgb(13%,70%,67%) rgb(100%,63%,48%) rgb(100%,71%,76%) rgb(83%,83%,83%) rgb(56%,93%,56%) rgb(83%,83%,83%) rgb(98%,98%,82%) rgb(88%,100%,100%) rgb(94%,50%,50%) rgb(68%,85%,90%) rgb(100%,98%,80%) RGB Percentage hsl(160,51%,60%) hsl(0,100%,25%) hsl(300,100%,50%) hsl(30,67%,94%) hsl(120,61%,50%) hsl(120,100%,50%) hsl(60,100%,94%) hsl(214,41%,78%) hsl(210,14%,53%) hsl(210,14%,53%) hsl(203,92%,75%) hsl(177,70%,41%) hsl(17,100%,74%) hsl(351,100%,86%) hsl(0,0%,83%) hsl(120,73%,75%) hsl(0,0%,83%) hsl(60,80%,90%) hsl(180,100%,94%) hsl(0,79%,72%) hsl(195,53%,79%) hsl(54,100%,90%) HSL #66CDAA #800000 #FF00FF #FAF0E6 #32CD32 #00FF00 #FFFFE0 #B0C4DE #778899 #778899 #87CEFA #20B2AA #FFA07A #FFB6C1 #D3D3D3 #90EE90 #D3D3D3 #FAFAD2 #E0FFFF #F08080 #ADD8E6 #FFFACD Hexa-decimal #F0F #0F0 #789 #789 Short Hex 32 | Values, Units, and Colors RGB Decimal rgb(0,0,205) rgb(186,85,211) rgb(147,112,219) rgb(60,179,113) rgb(123,104,238) rgb(0,250,154) rgb(72,209,204) rgb(199,21,133) rgb(25,25,112) rgb(245,255,250) rgb(255,228,225) rgb(255,228,181) rgb(255,222,173) rgb(0,0,128) rgb(253,245,230) rgb(128,128,0) rgb(107,142,35) rgb(255,165,0) rgb(255,69,0) rgb(218,112,214) rgb(238,232,170) rgb(152,251,152) Color name mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen rgb(60%,98%,60%) rgb(93%,91%,67%) rgb(85%,44%,84%) rgb(100%,27%,0%) rgb(100%,65%,0%) rgb(42%,56%,14%) rgb(50%,50%,0%) rgb(99%,96%,90%) rgb(0%,0%,50%) rgb(100%,87%,68%) rgb(100%,89%,71%) rgb(100%,89%,88%) rgb(96%,100%,98%) rgb(10%,10%,44%) rgb(78%,8%,52%) rgb(28%,82%,80%) rgb(0%,98%,60%) rgb(48%,41%,93%) rgb(24%,70%,44%) rgb(58%,44%,86%) rgb(73%,33%,83%) rgb(0%,0%,80%) RGB Percentage hsl(120,93%,79%) hsl(55,67%,80%) hsl(302,59%,65%) hsl(16,100%,50%) hsl(39,100%,50%) hsl(80,60%,35%) hsl(60,100%,25%) hsl(39,85%,95%) hsl(240,100%,25%) hsl(36,100%,84%) hsl(38,100%,85%) hsl(6,100%,94%) hsl(150,100%,98%) hsl(240,64%,27%) hsl(322,81%,43%) hsl(178,60%,55%) hsl(157,100%,49%) hsl(249,80%,67%) hsl(147,50%,47%) hsl(260,60%,65%) hsl(288,59%,58%) hsl(240,100%,40%) HSL #98FB98 #EEE8AA #DA70D6 #FF4500 #FFA500 #6B8E23 #808000 #FDF5E6 #000080 #FFDEAD #FFE4B5 #FFE4E1 #F5FFFA #191970 #C71585 #48D1CC #00FA9A #7B68EE #3CB371 #9370DB #BA55D3 #0000CD Hexa-decimal Short Hex Color Equivalence Table | 33 RGB Decimal rgb(175,238,238) rgb(219,112,147) rgb(255,239,213) rgb(255,218,185) rgb(205,133,63) rgb(255,192,203) rgb(221,160,221) rgb(176,224,230) rgb(128,0,128) rgb(255,0,0) rgb(188,143,143) rgb(65,105,225) rgb(139,69,19) rgb(250,128,114) rgb(244,164,96) rgb(46,139,87) rgb(255,245,238) rgb(160,82,45) rgb(192,192,192) rgb(135,206,235) rgb(106,90,205) rgb(112,128,144) Color name paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray rgb(44%,50%,56%) rgb(42%,35%,80%) rgb(53%,81%,92%) rgb(75%,75%,75%) rgb(63%,32%,18%) rgb(100%,96%,93%) rgb(18%,55%,34%) rgb(96%,64%,38%) rgb(98%,50%,45%) rgb(55%,27%,7%) rgb(25%,41%,88%) rgb(74%,56%,56%) rgb(100%,0%,0%) rgb(50%,0%,50%) rgb(69%,88%,90%) rgb(87%,63%,87%) rgb(100%,75%,80%) rgb(80%,52%,25%) rgb(100%,85%,73%) rgb(100%,94%,84%) rgb(86%,44%,58%) rgb(69%,93%,93%) RGB Percentage hsl(210,13%,50%) hsl(248,53%,58%) hsl(197,71%,73%) hsl(0,0%,75%) hsl(19,56%,40%) hsl(25,100%,97%) hsl(146,50%,36%) hsl(28,87%,67%) hsl(6,93%,71%) hsl(25,76%,31%) hsl(225,73%,57%) hsl(0,25%,65%) hsl(0,100%,50%) hsl(300,100%,25%) hsl(187,52%,80%) hsl(300,47%,75%) hsl(350,100%,88%) hsl(30,59%,53%) hsl(28,100%,86%) hsl(37,100%,92%) hsl(340,60%,65%) hsl(180,65%,81%) HSL #708090 #6A5ACD #87CEEB #C0C0C0 #A0522D #FFF5EE #2E8B57 #F4A460 #FA8072 #8B4513 #4169E1 #BC8F8F #FF0000 #800080 #B0E0E6 #DDA0DD #FFC0CB #CD853F #FFDAB9 #FFEFD5 #DB7093 #AFEEEE Hexa-decimal #F00 Short Hex 34 | Values, Units, and Colors RGB Decimal rgb(112,128,144) rgb(255,250,250) rgb(0,255,127) rgb(70,130,180) rgb(210,180,140) rgb(0,128,128) rgb(216,191,216) rgb(255,99,71) rgb(64,224,208) rgb(238,130,238) rgb(245,222,179) rgb(255,255,255) rgb(245,245,245) rgb(255,255,0) rgb(154,205,50) Color name slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen hsl(39,77%,83%) hsl(300,76%,72%) hsl(174,72%,56%) hsl(9,100%,64%) hsl(300,24%,80%) hsl(180,100%,25%) hsl(34,44%,69%) hsl(207,44%,49%) hsl(150,100%,50%) hsl(0,100%,99%) hsl(210,13%,50%) HSL rgb(60%,80%,20%) rgb(100%,100%,0%) rgb(96%,96%,96%) hsl(80,61%,50%) hsl(60,100%,50%) hsl(0,0%,96%) rgb(100%,100%,100%) hsl(0,0%,100%) rgb(96%,87%,70%) rgb(93%,51%,93%) rgb(25%,88%,82%) rgb(100%,39%,28%) rgb(85%,75%,85%) rgb(0%,50%,50%) rgb(82%,71%,55%) rgb(27%,51%,71%) rgb(0%,100%,50%) rgb(100%,98%,98%) rgb(44%,50%,56%) RGB Percentage #9ACD32 #FFFF00 #F5F5F5 #FFFFFF #F5DEB3 #EE82EE #40E0D0 #FF6347 #D8BFD8 #008080 #D2B48C #4682B4 #00FF7F #FFFAFA #708090 Hexa-decimal #FF0 #FFF Short Hex About the Author Eric A.

Turn Turns, of which there is one in a full circle. This unit is mostly useful when animating a rotation and you wish to have it turn multiple times, such as 10turn to make it spin ten times. ) Angles | 25 Table 3. 283rad 1turn Angle units are mostly used in 2D and 3D transforms, though they do appear in a few other places. Note that angle units are not used in HSL colors, where all hue angle values are always degrees and thus do not use the deg unit! ) Time values are most often used in transitions and animations, either to define durations or delays.

If that value is raised to, say, 50%, then the hue angle will become very important, because it will control what sort of color you see. Consider the same set of values that we saw before, but all set to 50% saturation, as illustrated on the right side of Figure 13. It can be instructive to take the 16 color keywords defined in HTML4 (Table 1) and plot them against a hue-and-lightness wheel, as shown in Figure 14. The color wheel not only features the full spectrum around the rim, but also runs from 50 percent lightness at the edge to 0 percent lightness in the center.

Download PDF sample

Rated 4.32 of 5 – based on 24 votes