html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Повторяющийся зубчатый фон на CSS



Давно на хабре не было постов про CSS и я решил восполнить этот пробел. Сегодня мы учимся готовить зубчатый фон используя только средства CSS и никаких изображений!

Важные требования к такому забору:

  • Никаких изображений!
  • Он должен спокойно тянуться по горизонтали
  • Обязательно должен поддерживать неравномерный фон у подложки
  • Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.

Что ж, приступим.

Наш зубчатый край будет состоять из двух наслаивающихся друг на друга градиентов в виде треугольников.



background-image:
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%);    /* 50.5%, иначе угол будет не острый */
background-repeat: repeat-x, repeat-x;
background-position: 10px 0, 10px 0;  /*  начинаем не с обрезанного угла  */
background-size: 20px 20px, 20px 20px;


Чтобы скрыть все неприятные моменты снизу просто наложим поверх сплошной цвет.

border-top: 10px solid transparent;  /*  подготовим место под зубчики  */
background-image:
        linear-gradient(lightblue, skyblue),  /*  общий фон блока, всегда идёт первым перекрывая всё что под ним  */
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%);
background-repeat: repeat, repeat-x, repeat-x;
background-position: 0 0, 10px 0, 10px 0;
background-size: auto auto, 20px 20px, 20px 20px;
background-clip: padding-box, border-box, border-box;  /*  обрезаем края у общей заливки  */
background-origin: padding-box, border-box, border-box, border-box, border-box;  /*  позиционируем зубцы относительно верхней границы, а фон относительно внутреннего отступа  */


Ну вот и готово. Осталось добавить такие же зубцы снизу.

border-top: 10px solid transparent;
background-image:
        linear-gradient(lightblue, skyblue),
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to top right, transparent 50.5%, skyblue 50.5%),
        linear-gradient(to top left, transparent 50.5%, skyblue 50.5%);
background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%;
background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
background-clip: padding-box, border-box, border-box, border-box, border-box;
background-origin: padding-box, border-box, border-box, border-box, border-box;


Не забываем про фоллбэк:

background-color: lightblue;
background-color: hsla(0, 0%, 0%, 0);


В итоге мы получили блок с зубцами который можно растягивать сколько угодно. Псевдоэлементы не задействованы, их можно использовать, к примеру, для добавления таких же зубцов по бокам.

Демо
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • slavakraynov
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции