Embellish the H1 tag in pure CSS

With a single CSS rule and without added tag, so all pages of the sites can be modified at once.

All demonstrations of this page use a single CSS rule and an image for the background.

Two display modes are possible.

The display:inline property aligns the container size, namely the H1 tag, to the content. Therefore the size of the background image will depend on the font size and the length of the text. In inline we can not set the dimensions with the width and height properties, but we can determine the height with padding, while line-height gives a margin to the surrounding text.

With the display: block property, the width of the container depends on the size of the page, it is therefore better suited with a texture than an image, because the pattern is repeated to fill the background when you enlarge the page. This mode also allow to center the title in the page.

The title of the current page is done with display: block while the following demonstrations use inline, except the 3D effect which requires that we precisely control the width and height of the backround.

The CSS code:

h1
{
  font-size: 32px;
  text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
  font-family:Arial, Helvetica, sans-serif;
  color: #090;
  padding:16px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:block;
  margin:16px;
  background-image:url(images/background-h1-wood.jpg);  
}

Using an image for the background

Using an image for all H1 tags of the site is possible if the image is wide enough to suit titles whose length varies depending on the page (this is not the case in this example).

Demonstration of H1 tag

To use a different image on each page, you must overwrite the background property of the H1 tag as below:

<h1 style="background-image:url(images/background-h1-city.jpg)">
    Demonstration of H1 tag
</h1>


The CSS code:
h1
{
  font-size: 32px;
  line-height: 150px;
  text-shadow: -1px -1px #fb6, 1px 1px #d60, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color: #FF9933; 
  padding:32px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
}

Medium size title 
The background is reduced depending on the size of the text, through the  display: inline property. It is necessary that the image chosen for the bottom is suitable to be so reduced.
Demonstration of H1 tag 
CSS code:
h1
{
  font-size: 24px;
  text-shadow: -1px -1px #eee, 1px 1px #888, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color:#ccc;
  padding:16px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
  line-height:92px;
  background-image:url(images/background-h1-metal.jpg);
}

Large size title 
We chose an image  wide enough to fit in with the text. The  line-height property controls the height  and properly display the image.
Demonstration of H1 tag 
 CSS code for a big font:
h1
{
  font-size: 48px;
  text-shadow: -1px -1px #9df, 1px 1px #49d, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color:#6bf;
  padding:24px 32px 32px 32px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
  line-height:150px;
  background-image:url(images/background-h1-wide.jpg);
}

3D effect 
The height and width of the container, the H1 tag are fixed here. The background image has a white border on the left and right, to allow a broader title that image, but it is a choice that depends on the current image, it could have been wider.
Demonstration of H1 tag 
CSS code for the 3D effect:
h1
{
  font-size: 48px;
  text-shadow: -1px -1px #f00, 1px 1px #a00, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color: #dd0000;
  padding:64px 0 0 0;
  margin:16px auto;
  font-weight:lighter;
  -moz-box-shadow:none;  
  -webkit-box-shadow: none;  
  box-shadow:none;  
  text-align:center;
  display:block;
  min-height:172px;
  min-width:800;
  max-height:172px;
  max-width:800px;  
  background-image:url(images/background-h1-tesla.jpg);
}

The background image is made with The Gimp, which has  transformation  in the plane function in three dimensions. If the title is wider than the background image it will be repeated and used as a tile. Do not forget to  add a white border to the image to give the size of the container.
In conclusion, block mode seems preferable, but it is better to use a texture or as in the example above, add white margins to the image, otherwise you must choose an image for each page depending on the length of title or adjust the properties to  the title and background. Moreover, unlike the inline mode, it helps center the tag in the middle of the page.
Note: For several demonstrations to coexist on the same page, we replaced the H1 tags with div with a style class, except for the title of the page. It makes no difference since all the properties of the tag are overloaded.








  © 2012-2022 Xul.fr