Now you’ve got a grasp of what’s going on with the coding and classes with the explanations from Part 1 and Part 2, I’ve taken the time to create some nice looking styled images for you!
All that is required of you is to insert code to your .css file and add a few classes to your image (as covered in Part 2). Yes, it really is that simple!
Example 1
This one is a simple yet elegant 1px border with padding and margins
Classes:
.imagestyle {margin:0 8px 8px 8px; padding:4px; border:1px solid #cccccc;}
.floatleft {float:left;}
.floatright {float:right;}
Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”
Example 2
This is a simple background fill with padding and margins
Classes:
.imagestyle {margin:0 8px 8px 8px; padding:4px; background: #eaeaea;}
.floatleft {float:left;}
.floatright {float:right;}
Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”
Example 3
This is a mix of example 1 and 2. A border with a background colour, padding and margins
Classes:
.imagestyle {margin:0 8px 8px 8px; padding:4px; background:#eeeeee;border: 1px solid #d9d9d9;}
.floatleft {float:left;}
.floatright {float:right;}
Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”
Example 4
Takes example 1 but with a dashed border
Classes:
.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px dashed#d9d9d9;}
.floatleft {float:left;}
.floatright {float:right;}
Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”
Example 5
Takes example 3 but with a light blue background
Classes:
.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc; background:#f0f6fb;}
.floatleft {float:left;}
.floatright {float:right;}
Image:
class=”imagestyle floatleft” OR
class=”imagestyle floatright”
I hope they help!
If you do have any questions,queries, tips or extras.. drop me a comment and I’ll do what I can to help.
Now we’ve got nice looking borders for our images why not go the extra mile and add a nice hover effect to those images that link to other websites and pages.. interested? .. Take me to Part 4!
If you liked our article don’t forget to share it with others!
Share The Love
Integrating the CSS classes, me likes =)
Cheerz!