Зміст
Використовуючи код CSS, ви можете створити смугастий фон для веб-сторінки без використання графіки. Цей ефект використовує рівні градієнта CSS з кількома перервами кольорів, а також властивість фонового розміру, щоб зробити вектор градієнта повторюється по екрану. Найкращий спосіб зробити це - почати з суцільного кольору тла і зробити одну з ваших прозорих смуг для виділеного кольору. Користувачі, які відвідують вашу сторінку за допомогою старих веб-браузерів, побачать суцільний колір.
Інструкції
-
Відкрийте файл стилів CSS у Notepad або у програмі редагування коду. Додайте це правило до кінця файлу:
html {висота: 100%; }
Це правило дозволяє заповнити весь фон веб-сторінки градієнтною смугою, яку він буде створювати.
-
Встановіть колір тла для сторінки в межах "html {}", щоб забезпечити базовий колір смуг і стандартний для старих веб-переглядачів:
html {висота: 100%; фоновий колір: чорний; }
-
Додайте наступний код у свій типовий "html {}", щоб створити ефект горизонтальної смуги:
background-image: лінійний градієнт (прозорий 50%, білий 50%);
Вона створить два колірних розриви, перший з яких буде прозорим, а другий - білим. Кожне переривання кольору займає 50% від простору градієнта на екрані. Відрегулюйте ширину смужок, змінивши відсоткові значення.
-
Додайте до першого розриву кольору значення нуль і розділіть його комою:
Фон-зображення: лінійний градієнт (0, прозорий 50%, чорний 50%);
Це дозволить розташувати смуги вертикально, а не розміщувати їх горизонтально.
-
Дублюйте властивість background-image і його значення в новому рядку. Робіть це двічі, створивши три рядки з однаковим кодом. Додайте префікс "-moz" до лінійного градієнта в одній з повторюваних рядків коду. Додайте префікс "-webkit" до іншого дублюючого рядка:
background-image: лінійний градієнт (0, прозорий 50%, білий 50%); background-image: -moz-лінійний градієнт (0, прозорий 50%, білий 50%); background-image: -webkit-лінійний градієнт (0, прозорий 50%, білий 50%);
-
Обмежте градієнт до певної кількості пікселів, встановивши фоновий розмір у наступному рядку вашого коду CSS:
розмір фону: 20px;
Змініть кількість пікселів фонового розміру, щоб змінити розмір градієнта. Через постійне повторення градієнта ширини сторінки, кожне повторення буде відповідати набору смуг на екрані.
Інструкції
Повідомлення
- Деякі старі браузери не підтримують градієнти CSS3. Якщо ви хочете відображати смуги для всіх типів браузерів, використовуйте умовні коментарі, щоб включити таблицю стилів з повторюваним графіком.