An online markdown blog and knowledge repository.
Notes taken from Ducketts HTML and CSS book while skimming Chapters on HTML Images, CSS Color and Text.
Images can add interest to your website. The book suggests the following [Duckett, pg.97]
Be relevant Convey information Convey the right mood Be instantly recognizable Fit the color palette
Stock photos are available, usually for a price, from many sources, Duckett suggests a few:
Configure your website with separate folder(s) for the site images.
<img src="url" alt="text for screen readers"
title="text to display when hovered over (tooltip)"
height="" width="" />
Note: Either height or width is helpful, but using both or neither could cause unexpected results.
Note^2: More commonly, dimensions of an image are defined in CSS.
Block-level elements following an <img> element will always appear on a new line.
When <img> is within a block-level element, inline elements will flow around the image.
Note: AVOID using align properties with settings: left, right, top, middle, or bottom.
Use the following formats:
Use a sensible image size:
Same dimensions of the target dimensions within the website.
Set the units of measurement to the screen:
Commonly used tools, and those suggested by the author, in no particular order [Duckett, pg.108]
Adobe Fireworks Pixelmator PaintShop Pro Paint.net Photoshp Pixlr SplashUp Ipiccy
Adobe Photoshop has tools to create animated GIFs.
Animated GIFs are made of strung-together static images.
Animated GIFs can increase the time it takes for a web page to load fully.
Usually reserved for simple animations, not high-quality images or motion effect.
Transparent GIFs:
"If the transparent part of the image has straight edges and it is 100% transparent (that is, not semi-opaque), you can save the image as a GIF (with the transparency option selected)." [Duckett, pg.118]
Transparent PNGs:
"If the transparent part of the image has diagonal or rounded edges or if you want a semi-opaque transparency or a drop-shadow, then you will need to save it as a PNG." [Duckett, pg.118]
Note: Not all browsers, especially older ones, fully support transparent PNGs.
Use the following elements to enclose images and caption them:
<figure>
<figcaption>
Older browsers ignore these tags but will still display the content within and around them.
Color is another "grabber" feature of a web page - it can really get the attention of your users.
Several ways to specify colors:
rgb(105, 220, 78)#07a85cThese color specifiers can be applied to:
<h1> or content.<body>, <section> or <p>.Colors are displayed on computer monitors by using a color or hue, and saturation and brightness:
Color: RGB, Hex, or Color Name Hue: An alternate to Color; think of the colors of a rainbow.
Saturation: The amount of grey that is in the color.
Brightness: The amount of black that is in the color.
Contrast: Text can become illegible in low-contrast styling arrangements. Ensure the contrast is high enough to make the content stand out without being too "strong" for the message or theme of the website.
Opacity: New in CSS3, it can be set using a value between 0.0 and 1.0, or using a 4th setting in rgb(r, g, b, opacity).
HSL is composed of:
HSLA includes one more:
HSL and HSLA Usage:
body {
background-color: hsl(0, 0%, 78%);
}
p {
background-color: hsla(0, 100%, 100%, 0.5);
}
Work Around For Old Browsers: Since the final element setting will take precedence, and older browsers do not recognize the opacity setting in the RGB property specification, enter the backward-compatiby rgb(r, g, b) setting first, followed by the newer rgb(r, g, b, opacity) setting, the latter of which will be applied by newer browsers, and ignored by older ones.
Two groups of properties for controlling text style:
Controlling fonts and styles of text directly impact the beauty of your website.
@font-face: Allows picking a non-installed font by identifying a src url for the typeface.One and only one of these:
Used when adding text near an 'img' tag. Moves text up or down within the box neighboring another element.
Indents the first line of text.
Accepts px units.
There are four properties to set on this rule, e.g. [Duckett, pg.288]:
p.one {
//
text-shadow: 1px 1px 0px #000000;
}
Note: Possible browser support problems with this rule.
:first-letter, :first-line
These 'pseudo-elements' apply to the first-letter of a line or the first-line of a block of text.
Usage:
p.pOne: first-letter{
font-size: 2em;
}
:link, ':visited
Usage:
a:link {
color: blue;
}
a:visited {
color: red;
}
:hover, :active, :focus
Define what happens to elements with certain user actions.
Existence: Attribute matcher element[string]: p[class] selects all p elements with a 'class' attribute.
Equality: Matches element[comparer] selects elements with 'attribute=string'.
Space: Matches elements that contain a space-separated word element[attribute ~= string].
Prefix: Matches attribute by starting string element[attribute ^= "string"].
Substring: Matches attribute by substring element[attribute *= "string"].
Suffix: Matches attribute with ending value element[attribute $= "string"].