Changing the header image

There are many different header images and designs available to edit and use. Styles for the default header image or Kubrick WordPress theme, and any theme based on that theme, are more complex to make changes than those on classic themes. styles are found within the styles in header.php "head" section, as well as in styles.css. To change just the image header links, open your template's header.php file and look for styles like this:

#header ( background: url("/images/wc_header.jpg") no-repeat bottom center; ) #headerimg ( margin: 7px 9px 0; height: 192px; width: 740px; )

NOTE: Using bloginfo is only possible when the style is used in conjunction with the main template file. WordPress template tags will not work in a style sheet (style.css). To move this style into the style sheet, change the template tag to the actual URL from the header image.

To change the file, replace "kubrickheader.jpg" with the name of the new graphic you uploaded to your site to replace it. If it is in a different directory, change by replacing the bloginfo() tags with the specific address of the graphical location.

If you are using an image that is the same size, then simply replace the image. If it's a different size, fill in the height and width of the image in the next section called #headerimg. If you don't know and don't use Windows, view the folder where the image is located on your computer in Thumbnail view. Click the "View > Thumbnail" button from the Windows Explorer menu. In Thumbnail view mode, find your image and hold down the mouse button. A small note ball will appear with a list of sizes. Use this information in styles. Otherwise, just right-click on the graphic file and select "Properties" and this should give you the file size and dimensions.

With the header image in place, it's time to tackle the rest of the headers. Open the style.css style sheet file and notice the following:

• header
• headerimg
• description

Your theme may or may not have all of these, but the default theme has all of them in different places in the stylesheet. All or some of these may need to have the attributes changed to change the appearance of your header. When resizing header images or header art, be sure to resize other structural CSS selectors, such as content or sidebar, to match the changes in header size.

Image header specification

The header image that fits into the default WordPress theme is around 192 x 740 pixels. When replacing a header in any WordPress theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to change other structural elements of the web page to accommodate the header size.

If you are changing the theme of an entire site, the width of the overall page or content area should be taken into account by the size of the header image. The two most common screen sizes are 1024x768 and 800x600 pixels. However, wide monitors are gaining momentum and web designers now need to prepare for screen widths of 1280x1024 and 1600x1200.

If you set your website to "float", located in the middle of the browser window with space on both sides, then you can set your header width to whatever you want. When designing a theme with flexible or "elastic" screen widths, the width of the header becomes important.

If you're using an image header that can be repeated, and you're using elastic width, you can set styles in the repeat header to fill the space:

#header ( background: url("/images/kubrickheader.jpg") repeat-x top left; )

This will cause the header image to repeat horizontally from the top left corner to the end. You can customize this behavior to whatever background position you want according to your technical and design needs.

Header art

A new term that has appeared in the field of web design is Artificial header(header art). These are header images that are typically hand-drawn using combinations of colors, shapes, symbols, imagery, and text. Creating such a title can be difficult and take up a lot of the author's time. Although free Artificial Headers exist, some sites sell their own handmade Artificial Headers. While a photograph can be one of a kind and convey the desired visual style, a handmade headline is easier to match with other web page colors and is generally more aesthetically pleasing due to its distinctive nature.

Choosing ready-made header art has some advantages. the artists have done the work and all you need to do is choose the design that best suits your site. And the graphic is ready to use, already sized and saved as a small file size.

In this example, the list_cats() template tag sets the category sheet to be sorted by ID into an unsorted sheet (

• ) has no dates or post counts, does not hide empty categories, uses the "description" category for the title in the link, does not show the descendants of the parent category, and excludes categories 1 and 33. It is in its own "categories" block. Please note that the link to the "home" page or main page of the bfla was added manually at the beginning of the sheet.
  • HOME

  ">

  To style this sheet, use #categorylist in style.css:

  #categorylist (font-size:12px; font-style:normal; text-transform:uppercase; ) #categorylist ul (list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; ) #categorylist li ( display: inline; padding: 0px 5px;) #categorylist a:link, #category a:visited (color:blue) #categorylist a:hover (color:red)

  The block will look like this: Here are some tips and information to help you choose and customize the header for your WordPress site.

  Pay attention to text placement and color. The color and placement of title text can be added or subtracted to your presentation. Here are some tips.

  • If you are using white text, make sure to set the background color in the header and/or headerimg to show the white text again if for some reason the image does not appear on the screen or the user's "show pictures" is turned off. This will allow your white text to still be visible.
  • If the image is the main feature or element, position the text so that it does not extend to the main subject of the image.
  • If the text is hard to read in relation to the occupancy of the graphics area, position the text in a less saturated image title area.
  • Make sure the text color is easy to see for all site visitors and doesn't clash with the colors of the title art. Fluorescent orange text on a lime green background is morbid.
  • Please be aware that some color differences and patterns in the title of your art may make the text letters in the overlaid text "disappear". The same applies if you insert text into the top art or title of the image.
  Make goals. A good title reflects the content of the site. Everything else should also meet expectations and be reflected in the Title. Therefore, the Title should reflect the content, purpose and idea of ​​the site. The title should attract the user’s attention and “force” him to stay on the site. A good title like the cover of a book or magazine. It should encourage people to stop and look closely, to read, to look more, to find something of value. It's a teaser aimed at getting their attention and saying, "There's something worthwhile here." The title should fit into the overall style.

  Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.

  Bold and eye-catching headers are reserved for bold websites, while soft and pastel-colored websites lend themselves to soft graphic headers. A site dedicated to punk rock and grunge bands should have a punk or grunge title. It's up to you, but do it consistently.

  Headlines don't always have to have pictures. Not all headlines have to be with photos and pictures. Sometimes words are more important whether they are against a washed color or a white background. A cluttered header makes the site even more cluttered. Avoid intrusive ads, cluttered navigation, unreadable text, long news feeds in the Header. The simpler the better. Follow accessibility standards in the Header. We've talked, but there's more you can do to make sure your headline meets accessibility standards. Use h1 tags then special programs that read text from the screen recognize it as a heading. Using Alt in links and images. Headings can be any height, but remember, content is king. The average header is less than 200 pixels in height, but headers range in height from very thin to half the page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content from the title. Think about “Site Personality”. The title is part of the site's identity; people need confidence that they are on the same site when they click a link to another page on the site. Think of the Headline and/or Artificial Headline as the “branding” of your site.

  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!

  : removed unnecessary h tags from the template elements, displayed the title of each article in the h1 tag, assigned h2 tags to announcements of posts in categories.

  Now, using h1-h6 tags, you can give your posts a clear structure that search engines love so much. But here’s the problem – the headline styles, to put it mildly, leave much to be desired.

  A simple big black font looks too boring. Bright colors are clearly asking for headlines.

  The title of the article in h1 just wants to be highlighted with some kind of line, frame, or even a beautiful background image with trimmed edges. It is also desirable that the heading of the next lower level have a slightly smaller font than the previous one.

  Do you want your website to be pleasing to the eye? Then let's learn how to assign styles to website headers.

  By tradition, we will work with the Twenty Eleven template. Below I'll list a few header styles that you can change to suit your tastes. In the meantime, let's immediately figure out where the heading styles are written in the template and where we will insert our code.
  

  Where in the template are heading styles displayed?

  Open "Appearance" - "Editor". Find the style sheet style.css. Find a block of text called /* =Global.

  It contains the lines:

  /* Headings */ h1,h2,h3,h4,h5,h6 ( clear: both; )

  These are the ones we will work with.

  We need to write the following instead of this code:

  /* Headings */ h1 (blah blah blah) h2 (blah blah blah) h3 (blah blah blah) h4 (blah blah blah)

  Instead of blah blah blah you will substitute your own values ​​for fonts, indents, gradients.

  If some value, for example, font size, does not work, then there is a style conflict. In this particular line, before the semicolon, you need to enter the magic word!important This word overrides the effect of styles from other parts of the document and forces this particular command to be executed.

  It will look like this:

  Font-size: 23px !important;

  In general, it was like this:

  Ready-made header styles for websites

  Header with framed background image

  This style uses a solid fill and an image for the header background. The CSS code is constructed correctly: the indents are indicated in percentages so that when the image is reduced, the title text does not merge with the background image. Fonts - Titillium Web (sans-serif), Muli (sans-serif).

  I made the headers here on the site based on this style.

  H1 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; color: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 0 5px rgba(53,86,129, 0.5), inset -285px 0 35px white; border-radius: 0 10px 0 10px; background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left; ) h2 ( margin: 1em 0 0.5em 0; font-weight: normal; position: relative; text-shadow : 0 -1px rgba(0,0,0,0.6); font-size: 28px; line-height: 40px; background: #355681; background: rgba(53,86,129, 0.8); border: 1px solid #fff; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; ) h3 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-size: 22px; line-height: 40px; color: #355681; text-transform: uppercase; border-bottom: 1px solid rgba(53,86,129, 0.3); ) h4 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 18px; line-height: 20px; color: #788699 ; font-family: "Muli", sans-serif; )

  I will bring the image used in the example to full size.

  Instead of the proposed picture, you can take any other, for example, an interesting texture.

  The address of the image is written in the line:

  Background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left;

  Please include the full URL of the image on your site. You can add a picture to the site through the media uploader without publishing it in the article. There in the download manager you can see the address of your new image.

  The text color can be changed to any other in the line

  Color: #355681;

  Header for a website with a dark design

  The face has a contrast of bright blue color and dark gray background. Fonts - Hammersmith One (sans-serif), Questrial (sans-serif).

  H2:after, h3:after, h4:after ( position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) h2:after ( background: #0AF; ) h3:after ( background: #3BF; ) h4:after ( background: # 6Cf; ) h1 ( font-size: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text- shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; color: #6Cf; ) h2 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 30px; line-height: 40px; ) h3 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 24px; line-height: 40px; font-family: "Questrial", sans-serif; ) h4 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba (0,0,0,0.4); position: relative; font-size: 18px; line-height: 20px; font-family: "Questrial", sans-serif; )

  Header on wood texture background

  Fonts - Scada (sans-serif), Carrois Gothic (sans-serif). The leaflet for the h2 heading is implemented through a font, and not through an image.

  H1 i, h2 i, h3 i, h4 i ( padding-right: 10px; color: #A8D13B; font-size: 0.8em; ) h2:after, h3:after, h4:after ( position: absolute; content: " "; height: 1px; border-radius: 2px; left: 0; bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); ) h2:after ( width: 100%; ) h3:after ( width: 75%; ) h4:after ( width: 50%; ) h1 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344 ; font-weight: normal; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 36px; line-height: 40px; font-family: "Carrois Gothic", sans-serif; ) h2 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; ) h3 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font- family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 24px; line-height: 40px; ) h4 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 18px; line-height: 20px; )

  Headings with bold font

  Simple and unobtrusive. Maybe this color scheme will give you some new idea.

  H1 ( margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif; font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); ) h2 ( margin: 1em 0 0.5em 0; color: #148773; font-size: 26px; line- height: 40px; font-weight: bold; font-family: "Josefin Sans", sans-serif; ) h3 ( margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px ; font-weight: 100; text-transform: uppercase; font-family: "Josefin Sans", sans-serif; letter-spacing: 1px; font-style: italic; ) h4 ( margin: 1em 0 0.5em 0; color : #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: "Josefin Sans", sans-serif; )

  Simple newspaper style headlines

  The style is perfect for a media website. No frills. Fonts – Ultra (sans-serif), Orienta (sans-serif).

  English source for these styles: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/

  Header in web 2.0 style

  The header is made in CSS alone without images. A translucent block overlays the main text. Color, background, size can be changed to your taste.

  If you use several elements with different degrees of transparency, you can color the title text with stripes or create a beautiful gradient.

  Example 1. Web 2.0 style header

  H3#example ( font: normal 27px tahoma; position: relative; background: #000; color: #0cf; padding: 10px 0px; ) h3#example span ( position: absolute; top: 29px; left: 0; width: 100 %; height: 15px; background: #000; /* the color of the overlay block must match the background color of the main block */ overflow: hidden; opacity: 0.45; filter: alpha(opacity=45); )

  However, this method has one drawback: the part of the text that is located under the translucent block cannot be selected with the cursor.

  Header with pattern

  Here, not a translucent block is superimposed, but a full-fledged image in PNG or GIF format. The picture can be any pattern. There should be only one color in the spectrum of the pattern - the background color.

  Example 2. Designing a header with patterns

  H3#example2 ( font: normal 27px tahoma; position: relative; background: #000; color: #0cf; padding: 10px 0px; ) h3#example2 span ( position: absolute; top: 15px; left: 0; width: 100 %; height: 30px; background: url(lines.gif); /* picture-pattern */ overflow: hidden; opacity: 0.60; filter: alpha(opacity=60);/ )

  In this example, the text is shaded, but you can give it any texture: metallic sheen, grain, gradient, floral pattern.

  Based on any of these styles, you can create your own unique headings. In conclusion, I will give a small table of the main properties of the text that may be useful to you.

  Properties	description
  font-size	text size
  font-family	text font
  text-align	text layout
  text-indent	Red line
  letter-spacing	letter spacing
  line-height	line spacing
  word-spacing	distance between words
  white-space	displays spaces between words
  font-variant	displaying text in large/small letters
  font-weight	letter thickness
  text-shadow	shadow around text

  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); )