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
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
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.
