Web Concepts_Graphics and Color _skipped.pptx
clem2k10
3 views
35 slides
Aug 20, 2024
Slide 1 of 35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
About This Presentation
Web Concepts_Graphics and Color _skipped.pptx
Slide Content
Web Concepts IT4101
“WOW” Website Adding Style to a basic website
Graphics and Colour
Images
Graphic File Formats Image File Format Description GIF Graphics Interchange Format no color information is discarded when the image is compressed for line art and color graphics Popular use: GIF Transparency and GIF Animation JPG Joint Photographic Experts Group when the image is compressed, some color information is discarded, resulting in a loss of quality from the original image for photographs or continuous tone images PNG Portable Network Graphics royalty-free file format that is intended to replace GIF lossless format compresses bit images to smaller file sizes than GIF supports transparency and interlacing but not animation SVG Scalable Vector Graphics language for describing two-dimensional graphics using XML scalable to different display resolutions and are printable
GIF Transparency choose any one color in an image to appear as transparent in the browser
GIF Animation build animations consisting of multiple static images that play continuously, creating the illusion of motion
Interlacing & Progressive Display gradual display of a graphic in a series of passes as the data arrives in the browser GIF and PNG files use interlacing, while JPGs use progression
Finding Images for your Project Stock photo collections Digital cameras Scanner Public-domain web sites Clip art Create your own Remember to respect copyright laws!
Create your own image
Working with Images Image Element and Attributes Sizing keep dimensions small and appropriate to the size of the page Opacity Others : Removing the hypertext border Aligning text and images Floating images (left or right) Adding white space around images (margins)
Image element and Attributes < img > no closing tag attributes :
reserved size
Sample image sizes on a 1024 x 768 screen resolution
Opacity The opacity property lets you set the transparency of text or images The value is a percentage expressed as a decimal img {opacity: .75;}
Colors
Color Scheme Colors convey important meaning to the user Colors set the tone for the site
Primary and Secondary Colors
Tints and Shades
Color Combinations Complementary Analogous Monochromatic
Use Color Wisely Test your color choices on different devices Color can enhance the presentation of information Poor use of color distracts from your content
Working with Colors Color values Name RGB Red-Green-Blue 0-100% or 0-255 Hexadecimal Red-Green-Blue 00-FF HSL Hue-Saturation-Lightness H = 0-360 S and L = 0-100% /* color name */ p {color: blue ;} /* hexadecimal value */ p {color: #0000ff ;} /* RGB numbers */ p {color: rgb ( 0,0,255 );} /* RGB percentages */ p {color: rgb ( 0%,0%,100 % );} /*HSL values */ p {color: HSL ( 120, 100%, 50% );}
Color Names Recognized by Most Browsers
Background
Setting Page Background Color To set the page background color, use body as the selector The following rule sets a background color for the <body> element body { background- color : #c5f0ff;}
Specifying a Background Image The background-image property lets you specify which image to display To use an image in the background, you must specify the relative location of the image file in the style rule. Other CSS background properties control how the image is displayed
body {background-image: url (balloons.jpg );}
Specifying Background Repeat Controls tiling of background images body { background-image : url (sky.jpg ); background-repeat : repeat ; } background-image
Specifying Background Position The background-position property lets you use three types of values: percentage, length, or keywords
Positioning Repeating Background Images
Using Multiple Images in the Background 1 st on list appears in front 2 nd on list appears behind 1 2 1 2 1 2
Thank you! IT4101 – Web Concepts
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3
- Slides 35
- Age 468 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
31 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
28 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
24 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views