Textured Border in CSS
The border attribute of the style sheets can vary in color and width, but it was not expected to give it a texture. However, only a CSS rule is required to add this graphic effect...
The rule applies to the fieldset tag designed to show a border, and we'll add it a texture.
We could do the same with a layer, but the advantage of fieldset is, at least in Firefox, to get round corners.
The principle is to assign a texture to the whole fieldset and insert into it another fieldset (for rounded edges) or a div, whose background is the same as that of the page.
<fieldset>
<fieldset class="inner">
... text ...
</fieldset>
</fieldset>You can embedd a title in the border as in the demo.
<fieldset style="width:500px">
<span class="btitle">Titre</span>
<fieldset class="inner">
... text ...
</fieldset>
</fieldset>The stylesheet will set the margins. For rounded corners, we add this attribute:
-moz-border-radius:8px;
border-radius:8px;To have a white background in WYSIWYG editing mode, you can use to the background a 1 pixel white image.
.inner
{
background:url(white.gif);
}Case of an image
In the case of an image, the rounded corners are not desirable for the inner frame, so we change the style of the <fieldset> or use a <div> as below:
<fieldset class="wood" style="width:276px">
<div class="imgback" style="padding:0;height:400px;width:258px" border="0" >
<img src="images/20.jpg" />
</div>
</fieldset>It is necessary to specify the width of the outer frame (wood) and also the size of the inner frame (imgback), this, taking into account the margins.
Textured Border Demonstration
Example with a text:
Embedding a title:
Example with an image:
Code with title:
<fieldset class="wood" style="width:276px">
<span class="ititle">Buildings</span>
<div class="imgback" style="padding:0;height:400px;width:258px"
border="0" >
<img src="images/20.jpg" />
</div>
</fieldset>