A selection of interesting CSS recipes "Naked Fridays # 3"

Hello, dear reader of Habr!
Today we’ll talk about gradient borders, blending modes, and how to make a standard menu icon more rationally. And we will rediscover the old css-property visibility and consider the new media expression @Supports.

Pure CSS Gradient Borders

Finally, we have moved into a new era. An era in which you can use beautiful gradients instead of boring monochrome borders.



This is done relatively simply:

.gradient-block-vertical {
    border-top: 20px solid orange; /*задаем верхнюю и нижнюю границы*/
    border-bottom: 20px solid red;
    background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%); /*задаем 2 линейных градиента*/
    background-position: 0 0, 100% 0; /*задаем этим градиентам размеры*/
    background-size: 20px 100%; /*помещаем их по краям блока*/
    background-repeat: no-repeat; /*забываем отменить повторение фотнового изображения*/
}

With a horizontal gradient, we do the same:

.gradient-block-horizontal {
    border-left: 20px solid #5c5fa5;
    border-right: 20px solid #893f60;
    background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to right, #5c5fa5 0%, #893f60 100%);
    background-position: 0 0, 0 100%;
    background-size: 100% 20px;
    background-repeat: no-repeat;
}

But to create a diagonal gradient you have to tinker a bit and introduce pseudo-elements:

.gradient-block-diagonal:before,
.gradient-block-diagonal:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}
.gradient-block-diagonal:before {
    background-position: 0 0, 0 100% ;
    background-repeat: no-repeat;
    background-size: 100% 20px;
    background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to left, #5c5fa5 0%, #893f60 100%);
}
.gradient-block-diagonal:after {
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 20px 100%;
    background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to top, #5c5fa5 0%, #893f60 100%);
}

Here we set only the dimensions for the block itself, no boundaries. After that we hang on a horizontal and vertical gradient for each pseudo-element. You can feel the code here .

UPD User Aingis offered a more optimized version of the properties of the background-clip and background Used-origin . Example

Someday, in the bright future (when the whole world abandons IE10 and lower), we will be able to use the border-image property intended for this . Something like this:

.gradient-block {
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); /*указываем фоновое изображение/градиент*/
    border-image-slice: 1; /*задаем для него внутреннее смещение*/
}

Menu icon without background images

Remember how often you had to add a standard menu icon to a page, in a common people called “hamburger”?

Typically, this icon simply inserts a background image. But these are just 3 rectangular stripes, is there really no better way? There are at least 3.

1. Shadow.

.shadow-icon {
  position: relative;
}
.shadow-icon:after {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100%;
  width: 100%;
  box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}

The solution is simple, although not too obvious. Just set 3 rectangular shadows, each with a different offset.

2. The gradient.

.gradient-icon {
    background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

It is still simpler here: draw 3 stripes with a gradient.

3. The symbol is UTF-8.
Just copy and paste the ☰ character (Unicode number: U + 2630, HTML code: ☰). Obviously, this is the simplest and most concise method. However, flexibly configure it will not work. In fact, you can only configure the color, as well as specify the font and change its size.

An example of using all three methods .

These are not the only methods for creating such an icon. To do this, you can use SVG, a suitable icon font, or it is commonplace to use borders in conjunction with pseudo-elements.

CSS layer blending modes

Another good news: recently Firefox and Safari support blending modes similar to blending modes in Photoshop.
They are also under flags, but they already work in Chrome and Opera. This means that full support will soon be included in these browsers. Therefore, you can begin to use them for non-critical functionality. For example, to stylize hover effects. You have a unique opportunity to do this one of the first, adding gloss to your site.

For example, like this:


or like this:


There are a lot of options for using and styling. A person with good taste (unlike the author) can create really chic effects.

The code for all this beauty is quite simple:

/*Стили для фонового блока, в котором лежит изображение*/
.blend {
    background: #fff; /*цвет для фонового элемента*/
}
.blend:hover {
    background: #000;
}
/*Непосредственно */
.blend img {
    mix-blend-mode: darken; /*режим наложения*/
}

You can enable mix-blend-mode display in Chrome and Opera by using the flags:
chrome: // flags / # enable-experimental-web-platform-features
opera: // flags / # enable-experimental-web-platform-features

Example .
I recommend reading more about blending modes here .

And how to find out if the browser supports mix-blending-mode, and what kind of strange media expression is in the example, read below.

@Supports

CSS finally introduced the new media expression @supports , which was sorely lacking. As you might guess from the name, it
serves to determine the properties supported by the browser. So far, not all browsers support it, but it is already quite suitable for checking non-critical functionality.

@supports (display: flex) {
	div { display: flex; }
}
/*Можно проверять и префиксы*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
    section {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    	float: none;
    }
}

Visibility: visible

What do you think will happen if a block with the visibility: visible property is placed in a visibility: hidden block ?

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}

It would seem that the parent should override the descendant property and make it invisible. But this is not so at all. The parent block will hide everything except the child.



You can try it yourself.

It seems to me that this feature can be interestingly beaten in the page interface when interacting with the user.

That's all for today. We hope this collection will be useful to someone. See you soon.