СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (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();
    }
    ?>

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
геометрический фон
Как сделать геометрический фон на сайт?
jquery background geometric
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.0171 секунд. Подробнее