This lesson is published today Chris Coyier, and we could not leave it undetected. The method described in it, you can apply cool, not only as the title of a section or article, but also in the band "bread crumbs". We have translated it by adding some of the comments made by readers of CSS-Tricks. Chris liked here these arrows on the site header socket Adobe:
Panel titles consist of two parts. In the left contains the inscription is, and the right - a reference to the relevant section or resource. Now let's look at how it was done. First, there is used nespraytovoe image:
This means an additional request to the HTTP-alone titles. And, even worse, for: hover-effect of using a separate image. Therefore, a further HTTP-request to load the second image at a time when you are summing the first mouse to the title.
We can do all this without any images. This is how it will look:
The demo and source files from Chris.
Layout header is only a name with a link:
HTML
<div class="module">But the basic style for the title, with reference to the right, the original color of the white line and the line defined by border:
<h2>Community <a href="#">Blue</a></h2>
<!-- stuff in module -->
</div>
CSS
Now you only do on-line corner of the arrow, using the method described in the article, CSS triangles,whose essence is that we create a region with zero height and width, and the actual size is the width border. Thus, in our case, the right border is painted, and the upper and lower - clear, get a triangle.The only amendment to that article is that instead of transparent should apply the value of rgba (0,0,0,0), otherwise we will have a problem with anti-aliasing in Firefox. The fact that transparent - it's like rgba (0,0,0,0), that is, transparent black, we finally get ugly gray streaks that are visible in Firefox.We also need to specify the value of rgba (255,255,255,0), that is, transparent white, and everything goes. Apply using the ubiquitous pseudo-elements
CSS
The main difference between our titles from the source with Adobe is that those diagonally imposed gradient. In our case this is not possible, because you can not create a gradient with the help of our CSS-method. But even this does not mean that it is impossible to apply the gradient above and below the triangle, just make sure that in places touching the fill color of the triangle has been uniform.
Another display option on the gradient of such a link-arrow gives us Enrique Moreno. In his method, you can bring up the gradient and the triangle:
On the demo page , Chris added options with multiple colors and different transition, which, incidentally, will not work properly in Opera as well as examples of stylish two-layer triangle marker on the left of the title - again, looking much prettier in Firefox Opera because of the soft smoothing its borders, as we wrote in the article How browsers render different values of CSS border-style
Much here we must refine "a file" for specific purposes. Still, we hope this article will come in handy at work, or come across a new design ideas. The original can be found on the CSS tricks
.module h2 {
background: #ccc;
padding: 0 0 0 10px;
font-size: 16px;
/* Thickness of the bar more easily achieved with line-height
since padding would push link inward. */
line-height: 2;
}
.module h2 a {
float: right;
position: relative;
text-decoration: none;
color: #333;
padding: 0 10px;
border-left: 5px solid white;
}
Now you only do on-line corner of the arrow, using the method described in the article, CSS triangles,whose essence is that we create a region with zero height and width, and the actual size is the width border. Thus, in our case, the right border is painted, and the upper and lower - clear, get a triangle.The only amendment to that article is that instead of transparent should apply the value of rgba (0,0,0,0), otherwise we will have a problem with anti-aliasing in Firefox. The fact that transparent - it's like rgba (0,0,0,0), that is, transparent black, we finally get ugly gray streaks that are visible in Firefox.We also need to specify the value of rgba (255,255,255,0), that is, transparent white, and everything goes. Apply using the ubiquitous pseudo-elements
CSS
.module h2 a:before,
.module h2 a:after {
content: "";
position: absolute;
/* Pushed down half way, will get pulled back up half height of triangle
ensures centering if font-size or line-height changes */
top: 50%;
width: 0;
height: 0;
}
.module h2 a:before {
left: -12px;
/* Triangle */
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
/* Pull-up */
margin-top: -8px;
}
.module h2 a:after {
/* Smaller and different position triangle */
left: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #a2d6eb;
margin-top: -6px;
}
The main difference between our titles from the source with Adobe is that those diagonally imposed gradient. In our case this is not possible, because you can not create a gradient with the help of our CSS-method. But even this does not mean that it is impossible to apply the gradient above and below the triangle, just make sure that in places touching the fill color of the triangle has been uniform.
Another display option on the gradient of such a link-arrow gives us Enrique Moreno. In his method, you can bring up the gradient and the triangle:
On the demo page , Chris added options with multiple colors and different transition, which, incidentally, will not work properly in Opera as well as examples of stylish two-layer triangle marker on the left of the title - again, looking much prettier in Firefox Opera because of the soft smoothing its borders, as we wrote in the article How browsers render different values of CSS border-style
Much here we must refine "a file" for specific purposes. Still, we hope this article will come in handy at work, or come across a new design ideas. The original can be found on the CSS tricks
.jpg "value of dotted")
.jpg "value of dashed")
.jpg "value of double")
