Css3 повторення градієнта

Відео: GoToWeb - Відеокурс Html і Css, урок 24, Лінійний градієнт на CSS

Існує багато CSS3 функцій, які значно змінюють дизайн сайту, і робиться це в кілька рядків. Одна з таких функцій - це CSS3 градієнти. Хто проходив тест на цю тему у мене на сайті, тоді знає що там був такий питання. І деякі відповіли на нього невірно. До появи CSS3 щоб зробити фон за допомогою градієнта, необхідно було використовувати зображення, але сьогодні ми можемо обійтися і без них, а лише використовуючи деякі нововведення CSS3.

Тест про який я згадував в описі знаходиться тут: Тест CSS3. Стандарт оформлення HTML документів

Реальний приклад роботи ви можете побачити і завантажити нижче:

Подивитися прімерСкачать

Як використовувати? (Просте повторення градієнта)

Синтаксис дуже схожий на визначення простого лінійного або радіального градієнта, але при цьому ще використовується ще одне слово-приставка на початку і вказуються кольорів і напрямок повторення. Щоб повторювати лінійний градієнт потрібно використовувати властивість repeating-linear-gradient, а щоб повторювати радіальний потрібно використовувати функцію repeating-radial-gradient:

123456789

/ * Лінійний * /.gradient {background: repeating-linear-gradient(0deg, # f9f9f9, #cccccc 20px)-}/ * Радіальний * /.gradient {background: repeating-radial-gradient(50% 50%, circle, # f9f9f9, #cccccc 20px)-}

(Створення шаблону для повторень)

Повтор зображення, наприклад, найчастіше використовується при створенні фону. Це робиться для прискорення завантаження сторінки. Для прикладу ми також напишемо невеликий код, який буде імітувати зошит в лінійку.

Відео: HTML5 and CSS3 beginners tutorial 30 - linear gradient

HTML частина

Для цього нам потрібен лише один і ніяких зображень, тільки CSS3:

12

lt;div class="Gradient five"gt;lt;/divgt;

CSS3 частина

12345678910

.gradient {width: auto-height: 500px-margin: 0 50px-background: -webkit-repeating-linear-gradient( 0deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px)-background: -moz-repeating-linear-gradient( 0deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px)-background: -o-repeating-linear-gradient( 0deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px)-background: repeating-linear-gradient( 0deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px)-background-size: 100% 21px-}

Остання властивість означає що градієнт буде розтягуватися на всю сторінку і повторюватися через 21 піксель. Щоб властивість працювало в різних браузерах ми використовуємо спеціальні префікси ( «- webkit», «-moz», «-o»).

А для створення двох смужок зліва ми використовуємо псевдоелемент : before :

123456789

.gradient: before {content: ""-display: inline-block-height: 500px-width: 4px-border-left: 4px double # FCA1A1-position: relative-left: 30px-}

висновок

CSS3 ще більше спрощує життя веб-розробника і дизайнера. Все менше і менше зображень, а значить більше швидкість завантаження сторінки. Я впевнений, залишилося недовго чекати коли все браузери зможуть повноцінно підтримувати дану технологію.

Успіхів!

джерело: https://hongkiat.com/blog/css3-repeating-gradients/