From the author: Welcome to our blog about website building. Any site has something that usually makes it memorable and stands out from the rest. Usually this is the site header. CSS allows you to make it the way you want.

Website header - what it is like

It's amazing how much can depend today on just the design of a web resource. But what especially separates a web resource from others? As a rule, this is the site header with a corporate logo and unique design. Usually this is how people remember some kind of Internet project. This is very well remembered in people's memory.

For example, if you see a white letter “B” on a blue background, you probably immediately conclude that this is an icon for the VKontakte social network. And everyone immediately associates the image of a carrier pigeon with Twitter. All this became possible because these sites had just such images in the headers and people remembered them very well.

Okay, that was a bit of a thought, now let's get straight to the technical part.

How can you design a website header in CSS?

In general, hats are different. Based on their width, they can be divided into two groups: those aligned to the center and those that span the entire width of the web page.

Previously, the header was made the same way as any other block - the usual div tag was given the required identifier, after which all the necessary content went into it, and then all this was formatted. Today it is already customary to typeface in a different way. Especially for creating a site header in HTML5, a paired tag has appeared - header. Its use is encouraged, it allows browsers to understand what this part of the template is and what it does. By the way, if you want to learn the basics of HTML5, then you have a direct route to ours, where you can watch lessons on this technology.

Therefore, to create a simple header, just write the following code in html:

Of course, nothing will appear on the page yet - we still need to add content to it and design it. But let's, for example, make a block that spans the entire width of the screen, and also decorate it a little.

header( width: 100%; background: #D8E3AB; height: 70px; )

In general, if everything is done correctly, then the block should be given some kind of class or even an identifier (since this is an important element of the web page), but for now we will simply refer to the element by tag.

The width: 100% property makes it so that our block will stretch to the full width, regardless of the screen size. If, however, the dimensions need to be somehow limited, use the additional max-width property, where the absolute size is written in pixels, upon reaching which the container will no longer expand.

Now we have just a strip in front of us, painted in the selected color. Usually the height is not specified - it is determined automatically based on the elements that will be in the header.

Task

Change the color of the title text and the background below it.

Solution

To change the background color below text, use the background universal property, which should be added to the h1 selector. The title color is changed using the color property, which is also added to this selector (Example 1).

Example 1: Header background color

HTML5 CSS 2.1 IE Cr Op Sa Fx

Law of the external world

The law of the external world methodologically deduces an intelligible world, although in officialdom the opposite is accepted.

The result of this example is shown in Fig. 1.

Rice. 1. Background color under text title

Please note that the size of the colored rectangle is affected not only by the size of the text, but also by the padding around it. Therefore, adjust the size of the background using the padding property, again adding it to the h1 selector.

You always want to attract attention to the headings on a website or blog, you want to make them beautiful and preferably with effects (for example, shadow, glow or 3D). Quite beautiful headings can be made in Adobe Photoshop, however, at the end they are images, which means their text cannot be read by search robots... What to do? There is an exit!

And indeed, when determining the relevance of your web page to certain search queries and assigning it a place in search results, headings play FAR from the last place. I would even say one of the most significant. It would be rather reckless to leave them in the form of a picture (although I once redesigned one website, the entire text of which on several pages was a picture... yes, yes, this happens too...).

You can, of course, forget about beauty and make the headlines ordinary, like everywhere else. But why, if there is a fairly simple way that will leave your headings in text format and can give them very beautiful and interesting effects? And today I will show you these techniques. I think that once you master these techniques, you will use them constantly. In a word, you’ll kill two birds with one stone: make your web design more impressive and the page’s relevance won’t do any harm.

Let's start!

Creating a 3D header

So, we will create effects directly when laying out the web page.

1. First you need to create a new html file, as well as a style sheet (css) file.

To show you how all this is done, I created an html file and named it “title.html” (if necessary, you can download all the source files for this lesson and view them in “sources”). Here is the source code of our html file:

3D Text Here

Shadow Title Here

Glow Text Here

Anaglyphic Text

This is an HTML5 document, a style sheet (css.css file) is connected to it, and inside the body tag there are only four headings of different calibers.

We will work with these headings. We don't need anything else in the html file.

2. As I already said, we need a style sheet file. We have already connected it, but if you have not created it, then create it.

I created a file called css.css and placed it in the same directory as the html file.

Before we start creating the 3D header, let's add some basic styling to the page to make it look a little more attractive.

Let's specify the height, width, color of the page, center it and set a dotted frame for the body tag.

Let’s also immediately align all our headings in the center.

Here is the code that needs to be written into the style sheet file:

Body(height:700px; width:90%; background-color:#069; margin:0 auto; border:1px dashed #000066; ) h1, h2, h3, h4(text-align:center;)

Launch the html file in your browser. The page will look like this:

3. Now let's start the transformation. We will turn the h1 heading into 3D text.

All this will happen all in the same style sheet file.

Place the following code below everything you have written so far in the css.css file:

H1(font-size:72px; color:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0; )

Now let's look at this piece of code. In the first two lines we set the font size and main color. But then the fun begins. Using the text-shadow property, we kind of create a shadow for the font, but not quite.

The fact is that after the colon, this property lists the following parameters: color, horizontal shift, vertical shift and blur.

What are we doing?

Firstly: we select a color close to the main one, but darker. In our example, the foreground color is white and the text-shadow color is gray (but not very dark). Here you need to experiment until you achieve the desired result.

Secondly: we gradually move (each time by 1 pixel) this shadow to the right and up. This is indicated by the following 2 parameters (1px -1px, 2px -2px, etc.).

Thirdly: we leave the blur to zero everywhere, because we simply don’t need it to create 3D text.

As a result, we get this picture:

In this example I settled on a 5px offset, but you can do more or less. It all depends on what result you want to achieve.

Also be sure to experiment with colors, trying to create a more natural look.

Create a header with a shadow

Creating a header with shadow is very simple. And we will achieve this with just a few lines of code.

Now we will work on the h2 heading.

First, you need to set its size and main color (I set the size exactly the same as the h1 header, but you, of course, design each header as you need).

After we have set the color and size, we will again use the text-shadow property. The first parameter is to specify the color; it needs to be darker (after all, it’s a shadow). The second and third parameters are horizontal and vertical shifts. My text is large, so I'll make them 5 pixels. And the last parameter is the blur radius. The shadow needs it, so we assign it a value of 4 pixels. As a result, the code will look like this:

H2(font-size:72px; color:#F90; text-shadow:#191919 5px 5px 4px; )

And it will look like this:

You can experiment with the parameters and still get different results. Consider the font size of your text, its color and what you want to achieve.

Create a header with a glow

This is also simple. Here we will work with the h3 heading.

The principle is the same: first we set the font size and its main color, and then use text-shadow.

Select the color of the glow. As you understand, it will be lighter than the main color of the title. The second and third parameters will be equal to zero (here we will not shift anything anywhere). But the blur radius needs to be larger (its size also depends on what kind of glow you want to get).

As a result, the code will be as follows:

H3(font-size:72px; color:#333; text-shadow:#fff 0 0 20px; )

And our title with glow will look like this:

Header with stereo effect

It can also be called anaglyph text. It can be compared to glasses for watching a 3D movie.

I won’t torment you... As they say: it’s better to see once than to listen to a long description.

The effect is very interesting and in principle it is not difficult to create.

Let's start. Here we will be working with an h4 header.

1. First, let's set the size for the header. I'll make it the same as the rest of the headers in our example.

Now we need to position the header element. Let's set the position property to relative. This means that the element's position will be set relative to its original location.

Now let's give it a color. We will do this in rgba format. If you have not yet come across this definition of color, then do not be alarmed. It's simple: the first three parameters in brackets will determine the color (rgb format), and the last parameter will determine the degree of its opacity. In our example, this value will be 0.5 (that is, 50%).

Here is the code for all of the above:

H4(font-size:72px; position:relative; color:rgba(0,0,102,0.5); )

2. Now comes the fun part. We'll create a pseudo element for our h4 element. To do this, you will need to register it in the style sheet as h4:after.

This pseudo element will have several interesting properties. For example, property content, in which you need to write exactly the same text as the h4 heading.

The pseudo element must be positioned absolutely (position:absolute).

Its color needs to be set to the opposite color of the h4 element. That is, if h4 has a blue color, then the pseudo element will have a red color. And the opacity is still 50%.

And also, we will adjust the position of the pseudo element using the left and top properties. We need to make sure that the pseudo element, which duplicates the h4 element in its content, is positioned a little to the right and below (now you will see everything for yourself). Here the settings will be individual and will depend on the font size, font type and the desired effect.

Here's the code for all of the above:

H4:after( content:"Anaglyphic Text"; position:absolute; left:361px; top:2px; color:rgba(255,0,0,0.5); )

And here is the effect of what we get:

That's all I wanted to teach you in this lesson.

Be sure to use this technique! Firstly: Beautiful, Secondly: all headlines are perfectly readable by search robots, Thirdly: Once you write the code, you can use the title on any web page of your site or blog, simply by declaring it in the html code.

If you liked this lesson, Write your comment(if you didn’t like it, too :)). It will be regarded as gratitude.

You can also share the lesson with your friends using social network buttons.

And of course, subscribe to blog updates (if you haven’t already). I promise a lot of useful and interesting things!

Have a good mood and see you again!

The purpose of this article is to consider different options for styling h1, h2 headings. The H1 tag is an important tag in the body of the page. As a rule, it contains the thematic title of the page. The H1 tag should stand out so that the user can easily understand what the page on your site is about. Therefore, this tag should be the highlight of your page. CSS styling of the H1 tag can be simple, but the main thing is to make sure that the font size is the largest among others on the page. And not only because it catches the user’s eye, it also plays a role in the relevance of the page, and therefore in optimization.

The H2 tag is a complementary tag and can be a semantic subdivision of H1. We will also consider options for styling it.

Below are examples and methods of CSS styling of h1, h2 headings.

Styling methodsh1,h2 headers

ExamplesCSSH1,H2

Styling methodsh1,h2 headers

We will consider ways to style h1, h2 tags when creating a feed. Let's look at two options for implementing a header in the form of a ribbon: Western and my version. I’ll say in advance that my method takes precedence, but if you have your own options (methods) for styling headings, I would be grateful if you share them in the comments.

Western way

It’s a good option, but I don’t really like the CSS way of implementing the feed. I found this method for creating a css h1 ribbon on one of the Western sites. This feed is implemented using pure CSS code, although cross-browser compatibility has suffered (in IE it looks like a simple block). Below is the style css source code.

H1.ribbon ( font-size: 16px !important; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; margin: 0 0 3em; ) h1.ribbon:before, h1.ribbon:after ( content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1; ) h1.ribbon:before ( left: -2em ; border-right-width: 1.5em; border-left-color: transparent; ) h1.ribbon:after ( right: -2em; border-left-width: 1.5em; border-right-color: transparent; ) h1. ribbon .ribbon-content:before, h1.ribbon .ribbon-content:after ( content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: - 1em; ) h1.ribbon .ribbon-content:before ( left: 0; border-width: 1em 0 0 1em; ) h1.ribbon .ribbon-content:after ( right: 0; border-width: 1em 1em 0 0; )

In HTML code, the h1 ribbon looks like this:

CSS styling of h1, h2 headers for the site

My way

As you can see, the CSS code is cumbersome to style just the h1 tag. Therefore, I propose my own way of creating such a tape. Cross-browser compatibility was tested on IE, FireFox, Opera, Chrome. Below is the css code and all source files.

H1 (height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;) h1 strong (height:67px; display:block; max-width:450px; margin-left:56px; padding -right:56px; background: url(ribbon_right.png) right top no-repeat;)

How to use it in HTML:

CSS H1 header for the site

Images:

The total weight of images is 750 bytes. The CSS code takes no more than two lines and weighs 236 bytes. I am pleased with the result, and everything is simple and clear, unlike the Western method, where the weight of the CSS code is 980 bytes. Although my and the Western version are identical in weight, it is much worse to understand the code than to process the image in Photoshop. It can be assumed that the loading speed of one css file is faster than three files (totally identical to the weight of one css file), but you can implement the background in the form of sprites, which will increase the loading speed of the site. Learn about increasing speed using CSS sprites.

Examples of CSS H1, H2

All examples will be implemented based on the principle of stylizing headings using my method (example, site).

CSS styling of H1 header

In this paragraph, we will focus on real examples of styling the h1 header. Examples, loudly said, since each site has a unique design. Let me give you one universal example of H1 styling. You already understand my idea of ​​stylizing the headings, I want to complement it by using transparency in the background-image, which can easily be done in Photoshop. See an example below.

Heading ( width:500px; background: #888;) h1 (height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;) h1 strong (height:70px ; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;)

Source pictures:

As you can see, the original images have translucency, and in the heading class, by changing the background value, you can achieve the following results:

CSS h1 + h2 (collaborative styling)

Styling h1 and h2 together is appropriate if you have an epilogue, or a small introduction to an article on your site, which can be placed in the h2 tag. For example:

H1– Styling h1, h2 headings;

H2– Learning to design h1, h2 headings using css.

This is my example, most likely you have your own idea of ​​how to design the website pages. The css h1 + h2 example is similar to the previous one, let’s look at the css code.

Left(height:100px; background: url(left.png) left top no-repeat;) .right( width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background : url(right.png) right top no-repeat;) h1 (color:#FFF; font-size:18px; padding:15px;) h2 (color:#CCC; font-size:16px; padding:5px;)

Source pictures:

Display:

The essence of joint (h1 + h2) styling of headings is similar to the previous example, only in this case div blocks are used.

CSS styling of H2 header

Styling the h2 header is not tricky. But, since our article concerns the styling of h1 and h2 headings, we will consider everything to the end.

As a rule, the h2 tag is used to highlight subparagraphs of an article or other material on the site. I would advise creating modest, discreet, but convenient h2 headings. I really like the idea of ​​how Wikipedia is organized. I advise you to create something similar. It's simple and convenient. For example:

H2 header styling example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Another subsection of your article

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Display:

Simple, convenient and cross-browser.

No matter what kind of website or web application is being developed, there is always a need to create styles for headings like h1 or h2. In this tutorial we will look at several effects that are applied to headings using pseudo elements.

Why are pseudo elements used? The answer is simple: no additional markup is needed.

HTML

Accept the lesson with humility

No special markings. A regular title indicating the class.

CSS

Body( width: 60%; margin: 50px auto; padding: 15px; position: relative; /*needed for header 4*/ z-index: 0; /*needed for header 4*/ border: 7px solid #cecece; border : 7px solid rgba(0,0,0,.05); background: #fff; background-clip: padding-box; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); ) h1( font-family: "Droid Sans", sans-serif; font-size: 22px; )

Note the declaration of background-clip: padding-box . It helps to get an interesting effect: a transparent frame for our container. The CSS background-clip property determines whether an element's background (color or image) will interact with underlying layers.

This simple and nice effect is achieved using the border property:

Headline1 ( border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px; )

Heading 2

This style can be achieved using the triangle method:

Headline2 ( border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; ) .headline2:before, .headline2:after( content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; ) .headline2:after( border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px; )

Heading 3

But this ribbon effect can also be used to design a title:

Headline3( position: relative; margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/ margin-right: -22px; padding: 15px; background: #e5e5e5; background: -moz-linear-gradient(# f5f5f5, #e5e5e5); background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background: -webkit-linear-gradient(#f5f5f5, #e5e5e5); background: -o-linear-gradient(#f5f5f5, #e5e5e5); background: -ms-linear-gradient(#f5f5f5, #e5e5e5); background: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box- shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; text-shadow: 0 1px 0 #fff; ) .headline3:before, .headline3:after( position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px solid transparent; ) .headline3:before( border-top: 6px solid #555; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; )

You can also create a great title using the box-shadow property:

Headline4( position: relative; border-color: #eee; border-style: solid; border-width: 5px 5px 5px 0; background: #fff; margin: 0 0 15px -15px; padding: 5px 15px; -moz-box -shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0 ,0,0,.3); ) .headline4:after ( content: ""; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); )