СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

Как сделать геометрический фон на сайт?

"Как сделать геометрический фон на сайт?" Найдено давно, в сети.
Когда-то хотел себе поставить вот такой геометрический сменяемый фон . Чтож... это время пришло!

Подробно о геометрическом фоне

  1. Геометрический фон(по умолчанию)
  2. Скачать
  3. Геометрический фон(dwweb.ru)
  4. Подключение к сайту геометрического фона...

  1. Геометрический фон(по умолчанию)

    Смотрим геометрический фон по умолчанию.

    Для того, чтобы сделать такой геометрический фон на странице нам потребуется:

    css

    Нам потребуется css:

    jquery

    Еще нам потребуется подключить jquery

    jquery code

    Подключаем скрипт :

    Запускаем скрипт...

    <script>
    $(function() {
    materialBackground.start();
    });
    </script>

    Теперь... соберем всю страницу для геометрического фона:

    Код простой страницы для геометрического фона.

    <!DOCTYPE html>

    <html lang="ru">

    <head>

    <meta charset="UTF-8">

    <title>material_background_default</title>

    <script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://dwweb.ru/__a-data/__all_for_scripts/__examples/jquery/sluchaynyiy_geometricheskiy_fon/material-background-styles.css">

    </head>

    <body>

    <div id = "material-background"></div>

    <script src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/jquery/sluchaynyiy_geometricheskiy_fon/material-background-scripts.js"></script>

    <script>

    $(function() {

    materialBackground.start();

    });

    </script>

    </body>

    </html>

    Скачать material_background_default:

    Скачать material_background_default


  2. Геометрический фон(dwweb.ru)

    Я немного решил позволить вольностей с полученным геометрическим фоном из интернета...

    Теперь... достаточно подключить два скрипта.

    Теперь... подключить jquery - вы можете даже не подключаться... можете брать данный скрипт с нашего сайта

    <script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>

    Далее... нужно подключить лишь второй скрипт(аналогично, что и с первый скриптом... можете брать с нашего сайта.) :

    <script src="https://dwweb.ru/js/geometric_background_dw.js"></script>

    В скрипт добавлено плавное появление, см. class slowly

    Насыщенность заднего фона - "body:after" - сейчас "opacity: 0.8;"

    + блок "example" для примера текста...

    Соберем весь геометрически фону:

    <!DOCTYPE html>

    <html lang="ru">

    <head>

    <meta charset="UTF-8">

    <title>Пример веб-страницы</title>

    <script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>

    <script src="https://dwweb.ru/js/geometric_background_dw.js"></script>

    <style>

    .example {

    font-family: system-ui;

    background: #8f8f8f59;

    color: white;

    text-align: center;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 464px !important;

    height: 100px;

    border: 1px solid #747474;

    transform: translate(-50%,-50%);

    min-width: 320px;

    text-transform: uppercase;

    font-weight: 100;

    font-size: 30px;

    line-height: 94px;

    box-shadow: 0 10px 20px -5px rgb(0 0 0 / 40%);

    }

    </style>

    </head>

    <body>

    <div class="example">

    material-background

    </div>

    </body>

    </html>

    Результат геометрического заднего фона:

    Скачать текст_ссылки


  3. paragraph_material_background_on

    Подключение к сайту геометрического фона...

    Ну и давайте подключим "геометрический фон"(мой вариант) к странице прямо здесь:

    Некоторые блоки выглядят не очень, но ведь это всего лишь пример!

    Все тоже самое, что и во втором пункте.

    Как включать выключать геометрический фон?

    Сверху вы увидели, как включать/отключать "геометрический фон"... давайте разберем этот вариант...

    Опять нам надо ...подключить jquery

    Форма html :

    <form method="post">
    <input name="on" type="submit" value="Включить на всей странице" class="width_100">
    </form>

    <form method="post">
    <input name="off" type="submit" value="Отключить" class="width_100">
    </form>

    Php :

    В теге head

    <?
    if($_SESSION[background])
    {
    echo '<script src="https://dwweb.ru/js/geometric_background_dw.js"></script>';
    }
    ?>

    Php до тега <!DOCTYPE>

    <?
    function refresh(){ return (exit('<meta http-equiv="refresh" content="0; url=">'));}
    if ($_POST[on])
    {
    $_SESSION[background] =1; refresh();
    }

    if ($_POST[off])
    {
    $_SESSION[background] =''; refresh();
    }
    ?>

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
геометрический фон
Как сделать геометрический фон на сайт?

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb