![]() This has to be an image file because we're using fancy type and also a graphic of an apple in place of the a. Let's use the Good Food logo as an example. This basically means that you can save your image with a transparent background. GIF images (and also PNG) support 1-color transparency. If you need any level of transparency in your image, you must use either a GIF or a PNG. The GIF and PNG formats also both support transparency. Common examples of these types of images are logos, logotypes, and illustrations without gradients. The GIF and PNG image formats are ideal for images with flat colors (no gradients) and hard edges. File size for GIF and PNG images is generally related to the number of colors used. They store a minimized color palette in the image file and keys to where those colors should be located in the image. The GIF and PNG image formats use what is called "index-color". A larger pixel size will always result in a larger file size.Įxamples of images that should be saved in the JPG format: File size is directly related to the actual size (in pixels) of the image. When saving images in the JPG format, you can choose the level of compression to balance the file size and image quality. If transparency is needed in the background of your image, you must choose a different format. The JPG format is not capable of saving any transparencies. ![]() Think of a JPG as a highly compressed photograph. The JPG format does a very good job of compressing images with lots of colors and gradations in colors. The JPG image format was designed to efficiently store and compress realistic images and artwork (both in color and greyscale). Each of these file formats are designed with a specific purpose in mind, so it is important to understand the differences when we use them in our websites. There are three file formats for graphics used on the web: JPG, GIF, and PNG. This is especially important when using background images. Make sure there is sufficient contrast when using text in graphics so they are legible.Make graphics accessible with alternate text.This diminishes search engine indexing, accessibility, etc. Graphics should never be used for text content, except if a header necessitates including a logo.Avoid annoying images, animations, gratuitous effects - they get old fast without purpose.Graphics should help focus visitor’s attention on what’s important on the page.Large (file size) graphics add load time to a page - avoid.Web graphics should fit in with the purpose, organization and style of the site.Our sites are usually quite boring without the use of graphics. Create Visual Structure - clarify information hierarchy (think typography and hierarchy here).Visual/Aesthetic Appeal - maintains visitor interest and attention. ![]() If that sounds like something that might work well on one of your projects, then check out some examples of what it can do here: fullPage.js examples.Back to Class Five page » Web Graphic Formats Purpose ![]() With fullPage you’d be able to integrate the different CSS background animations we’ve just looked over here, maybe putting a different one on each page. Don’t know yet what I’m talking about? Just check out these 20 examples of one-page websites and your doubts will disappear. You know the type – as you scroll, you move to the next page, rather than scrolling down just a little bit. Your browser does not support the video tag.įullPage helps you build full page sites – where you split your webpage into chunks, each taking up the full size of the user’s browser. One such library I recommend you check out is fullPage.js. That way, we don’t have to wait until we reach mastery to start making really cool stuff. It’s pretty amazing what you can come up with when you’ve mastered your craft! But one of the cool things about front-end web development is that we can use code snippets, libraries, and CSS frameworks made by people much more skilled than us. How they’ve done it, is to apply all their CSS to the html element. Here abxlfazl khxrshidi has gone a step further, and made this CSS animated background of a car (one that’s gonna get pulled over very soon by the looks of it!), with no div at all!Ĭheck for yourself, the HTML box is empty, apart from comments. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |