Introduction to Graphic Design For The Web
In order to give your Web pages aesthetic appeal you need to learn how to appease your viewer with interesting design elements like images, background images, borders, shadows, gradients, transparency, transformation, images filters and image maps.
Graphic File Formats
Web browsers can support many digital media formats. Usually, if the computer your are using a Web browser on supports displaying a digital image type, the Web browser will also support the same formats. The Web browser is dependent on the Web server correctly defining the Multipurpose Internet Mail Extension (MIME) type assigned to the digital media being downloaded to the browser.
The commonly used image formats on the Web are Graphical Interchange Format (GIF) (pronounced "jiff"), JPEG (pronounced "jay peg"), portable network graphic (PNG) and Scalable Vector Graphics (SVG) files. GIF, Joint Photographic Experts Group (JPEG), and PNG files are bitmap images, meaning they are defined in pixels and are used for detailed photographic images, whereas SVG images are defined using geometric descriptions, making them better at scaling to larger or smaller views and are generally smaller in file size. The drawback to SVG images is that they a not as photo-realistic as bitmap images. GIF images are limited to 256 colors, support transparent colors and can be used to create animated images. JPEG files support 24-bit RGB, 16 million colors, but do not support transparency and allows for "lossy" comprehension. PNG images support 24-bit RGB colors and up to 32-bit RGBA colors which means it can support transparency and over 4 billion colors per pixel. By supporting the 24-bit and 32-bit RGB colors models, files tend to be quite a bit larger in files size when compared to the GIF and SVG
formats.
Because of the bandwidth limitations imposed by Internet Service Providers (ISPs) and data charges implemented by cellular communication providers, it is recommended that you consider your image formats and sizes wisely to offer your customers the best experience on your Website as possible.
Figure Boxes
Figure boxes are traditionally used in print design to set a group of elements apart from the main story. To provide similar capability in HTML5 the figure and figcaption elements were introduced as a way to handle images and captions in a way that you see them in books and magazines, as two content elements that can be joined together and treated as one for styling purposes. The HTML syntax looks like this.
<figure>
<img src="filename" alt="" />
<figcaption>This is caption text</figcaption>
</figure>
Background Properties
A figure element is a block element and all block elements can be styled using CSS background and border properties
background-image: url(url); //adds a url specified image as the background image of the element it is bound to.
background-repeat: can be specified using one of five values, repeat-x, repeat-y, no-repeat, round, space
background-attachment: can be specified using one of these three values, scroll, fixed, local
background-position: horiz vert; // default: top left; // horiz: left|center|right // vert: top|center|bottom
background-clip: possible types; padding-box (default), content-box, or border-box
background-origin: type; // content-box|padding-box|border-box
background-size: width height; // can use cover and contain as values
background (shorthand): color url(url) position / size repeat attachment origin clip
background: background1, background2 ...; // multiple backgrounds //added in reverse order of that listed in rule
Gradients
In addition to having solid colors and image backgrounds applied to them, figure elements can also have gradients applied. You can do this using the background-image property.
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction can be top to bottom (default), (left) to right, (top) to bottom, or at any angle you want to declare.
In addition to using the linear-gradient function, you can also utilize the repeating-linear-gradient function.
background-image:linear-gradient(green, blue);
View in browser.
Border Properties
The border property is shorthand for the following border properties:
border-width: which defines the thickness of the border line. You can assign any legal fixed or relative measurement value for a border's thickness.
border-style: which can be defined using one of four values, dotted, solid, double, or dashed.
border-color: border-color can be defined using any valid color model.
Borders can also be formatted individually by side by appending the side name to the border property, border-top, border-right, border-bottom, and border-left
You can shorthand the border property like this:
border: 1px solid red;
View in browser.
Shadows
Drop shadows can be attached to an element using the box-shadow property. The values used to define a shadow are the x-axis offset, the y-axis offset, the amount of blur you want applied, the spread, color, and the keyword inset which generates an inner shadow instead of the default outer shadow. The format for the shadow property is: box-shadow: x-offset y-offset blur spread color [inset].
box-shadow: 2px 2px 5px rgba(0,0,0,.4);
View in browser.
Transformations
The CSS transform property can be used to rotate, skew, and scale HTML elements. In order to transform an HTML element the transform property is assigned a function such as perspective, rotate, scale, skew, and translate.
perspective(n) defines a perspective view for a 3D transformed element.
The rotate function can define a 2D rotation like rotate(20deg) or a 3D rotation using this format rotate3d(x,y,z,angle) also the rotate function can have a specified angle of 3D rotation like the following: rotateX(angle), rotateY(angle), or rotateZ(angle).
transform: rotate(30deg);
View in browser.
transform: skewY(20deg);
View in browser.
transform: scaleY(150%);
View in browser.