В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 21-06-2024! ×
Меню :
jquery (42)
js (246)



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

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
геометрический фон Как сделать геометрический фон на сайт? jquery background geometric
На сайте сейчас :
Ещё : Игра "пятнашки"
Угадай страну по флагу
dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.017879 секунд. Подробнее