what to style? styles for elements establish consistency –styles for html or body become the...
Post on 18-Jan-2018
229 Views
Preview:
DESCRIPTION
TRANSCRIPT
What to Style?• Styles for elements establish consistency
– Styles for HTML or body become the default– Only create styles for pre-defined elements*
• Styles for classes are repeatable– Use it to set backgrounds and borders for
various elements– Use it to set text styles for different types of
emphasis• Styles for IDs are specific to that one
instance– An ID refers to 1 (and only 1) instance of an
element of a page.
Tiled Backgrounds• Create an image to be repeated in
Photoshop– Be sure it works as a background!– Use Filter -> Other -> Offset to ensure
random patterns blend at the edges• Make this the background
of the body element– Set background-image*– Default is tiled; can also set
different repeats and offsets
Gradient Backgrounds• Create a gradient background in Illustrator
– Dimensions should be that of the smallest device you are supporting
• Make it scale, without preserving aspect ratio– In a text editor, remove height & width
specifications– Add the following attribute:
preserveAspectRatio="none"• Make this the background
of the body element– Set background-image*– Make background-attachment
= fixed
Scaling ImagesAfter inserting an img into a div …•Remove explicit height & width values•Set new height and width values
– Use "100%" to fill the container– Use "auto" to maintain
aspect ratio– Use max-width and/or
max-height to limit scaling of the image
•Set as an img style if all images are to scale
Using Your Own FontsIf you used font-generating software …•Link to the .css file<link rel="stylesheet" href="CODEread_icon_font/style.css">
•Include as spans– Icon is shown as the class of a span<span class="icon-trash" />
– Text can appear after the icon<span class="icon-plus">icon-plus</span>
– A non-breaking space separates the icon from the textspan class="icon-star"> icon-star</span>
CSS Image SpritesAn image sprite is a collection of images saved as a single image•Create the image sprite
– Use a fixed width and height for each– Place different icons in a row; place alternate
states below them•Use as background images
– height & width represent size of each icon– background x & y offsets select the image– a:hover indicates change when hovering over
the icon
top related