Alternatives to website images

In researching my last post about optimising images I was looking through some forum comments and saw some commenters debating whether or not you could create a good looking website with no images. I think a beautiful website without any images might be a bit much to ask (who wants to do without a cute logo image after all) but using some clever CSS you can cut down on the images that you have to use and still have a very attractive site.

Icons

My favourite library for CSS based icons is Font Awesome. The advantage of Font Awesome over images isn’t only the time saved downloading an icon image; Font Awesome icons are vectors that will scale to any size without any decrease in the quality of the image.

To use it you will need to link the Font Awesome code to your website. The getting started page contains installation instructions for various frameworks.

Icons can be added to your site using the <i> tag; e.g. <i class=”fa fa-camera”></i> produces . The examples page shows the different ways that Font Awesome can be used to replace icon images in a website.

Buttons

Buttons can be enhanced using CSS with solid or gradient backgrounds, sharp or rounded edges, shadow effects and animations.

Example


HTML
<input type="button" class="my_button" value="Fancy Button">

CSS
button {
padding: 20px;
padding-left: 40px;
padding-right: 40px;
color: white;
background: linear-gradient(to bottom, #8844C6 0px, #6E32A5 100%) repeat-x scroll 0% 0% #6E32A5;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 6px;
}

Circles

Circles can be used with text, icons or on their own to add decorative elements to a website. to create a circle create a square sized DIV and set the border-radius value to at least half the length/width of the DIV.

Example

Circle


HTML
<div id="my_circle">Circle</div>

CSS
#my_circle {
display: block;
width: 100px;
height: 100px;
background-color: maroon;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}

Hexagons

Hexagons are very trendy at the moment. Creating a hexagon in CSS requires the use of the before and after selectors on a div. I could give you an example of how this is done but you will save a lot of time if you generate the CSS at csshexagon.com.

Decorative text

Back in the bad old days if you wanted to use a font that wasn’t part of a small group of accepted fonts you had to add this as an image. Now web fonts give you a huge selection of fonts to use without having to worry about the end user having them installed on their machine. Find your source of fonts, I am a fan of Google Fonts. Once you have selected a font you will need to add the CSS for the font into your website and use the font-family property to apply to the text. Web fonts can create their own performance issues however so it is best to stick to only using a small number of fonts.

Add to the <link href=’https://fonts.googleapis.com/css?family=Kaushan+Script’ rel=’stylesheet’ type=’text/css’> to the <head> tag of your html.

Use
font-family: ‘Kaushan Script’, cursive;
to apply this font to your text

This text can be enhanced further by using more CSS

Example

Fancy Text


HTML
<div id="fancy_text">Fancy text</div>

CSS
#fancy_text {
font-family: 'Kaushan Script', cursive;
font-size: 50px;
font-weight: bold;
text-shadow: 1px 1px 3px #888;
color: maroon;
}

CSS is very powerful and each iteration brings out new ways to visually enhance your site. While I believe images on websites aren’t really going anywhere (Instragram and Pinterest show that people really like looking at pretty pictures) you can speed up your website and get sharper results by getting rid of any unnecessary images.

Sarah Wallis

About the author: Sarah Wallis
A creative at heart with a degree in Computer Science, my passion is to create beautiful, functional websites to enhance and expand my client's business. I love working with WordPress, Photoshop and Dreamweaver and I can never learn enough new CSS. When not at the computer I love crochet, reading classic novels and jogging very slowly.

Next Post

How wide should my website be?

In researching my last post about optimising images I was looking through some forum comments and saw some commenters debating whether or not you could create a good looking website with no images. I think a beautiful website without any images might be a bit much to ask (who wants to do without a cute logo image after all) but using some clever CSS you can cut down on the images that you have to use and still have a very attractive site. Icons My favourite library for CSS based icons is Font Awesome. The advantage of Font Awesome over […]

Continue Reading
Alternatives to website images - sarahwallis.id.au