Image Borders With CSS
The subject of this article is image framing on your web pages. Please review these methods to add emphasis and visual interest to your pages without increasing the page loading time. We provided some examples for image frames using CSS border & background-image properties.
Before we begin, you should read something about CSS if you don’t know what CSS is. You can search about it on Google or you can visit this LINK. I hope you will understand about CSS and syntax used in CSS files.
In this example, we will define styles just before we use them but you can define it in your main css file and call them from other pages. In this case, styles will work only in this page. If I want to use them on other pages, I need to define styles inside my mail css file (I will do it, off course).
Example
We placed the image inside a div tags and defined the css for this container as:
{border:#778888 1px solid; padding:10px; background:#eeeeee;width:150px;}
which means that the Background for this photograph is a light grey, and the frame itself has a 1 px border showing FeaturePics brand color #778888.
Complete code for this image is shown below:
|
You can experiment with different styles and good idea is to include them in you css file so you can call them wherever you want. You can find more about css on w3schools.
source Featurepics
image mangia (c)
