CSS only website headers

For having such nice header just add the following CSS rules to your H3 tags:



<h3> My section </h3>

Here are the CSS rules:

h3 {
background: #EDEDED;
padding: 5px 5px 5px 10px;
font-size: 1.3em;
font-family: "Times New Roman", Times, serif;
color: #818080;
font-weight: normal;
margin-bottom: 10px;
}

Another one:

h3 {
margin: 0 0 0.5em 0;
padding: 5px 5px 5px 10px;
font: normal 135%/1 arial,sans-serif;
letter-spacing: -0.03em;
clear: left;
color: white;
background: #A5CC7A;
}

h3 {
font: normal 255%/1 arial,sans-serif;
letter-spacing: -0.04em;
background: url(bgr.gif) repeat 0 0;
padding: 0.55em 0.1em 0.63em 1.1em;
color: #36a;
}

bgr.gif is a normal gif file(width=1px, height=100px; filled with gradient color).

h3 {
width:200px;
border-bottom:1px solid #E0EAF6;
color:#4C7599;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
font-size:18px;
text-decoration:none;
}

Next:

h3{
padding:6px 6px; 3px 6px;
border-bottom: dotted 1px #000000;
color: #487377;
background: #d0e4d0;
text-transform:lowercase;
font: 18px bold;
line-height: 0.8em;
}

h3 {
text-transform:uppercase;
font-size:1.6em;
font-family:arial,verdana,sans-serif;
background:black;
color:white;
width:200px;
letter-spacing: -0.1em;
}

If you want to control the width of the section just place
width: 200px; in the CSS code. by Nevyan Neykov

---

Create website logo in photoshop

Here is a quick way to design your own web page logos using Photoshop/Imageready:


1. Find a suitable image to use
2. Copy and paste it in Photoshop/Imageready.
3. Go to Image->Canvas size and resize the width to 600px.
4. Place the image on the left side of the canvas.
5. Select using single row selection the right part of the image.
6. Go to Edit->Define pattern.
7. Deselect, Create new layer and goto Edit->Fill->Use Pattern.
8. Erase/Smudge any part of the image layer until it blends correctly.
9. Use Gradient styling to the new layer to enhance the visual effect. Also if you want more clear initial image apply Filter->Artistic->Cutout to the photo at the beginning.

Finished examples:




by Nevyan Neykov

---