Тема: Сайт на роботу
Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php
Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → Оцінка сайтів → Сайт на роботу
Для відправлення відповіді ви повинні увійти або зареєструватися
Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php
Дякую та я знаю там щось через запит медіа треба, але щось не виходить) працюю над цим.
Це було легко, ось може комусь треба... вказувати треба розмір h1 у vw тобто 7 vw наприклад і всі проблеми))
Не гарно
Такі сайти робили 15 років тому, схожий дизайн і сам сайт виглядають печерними
Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php
Шрифти жахливі, особливо там де "Історія газети" і "Наші реквізити".
Фон жахливий. Тягнути картинку 300 кб (1920 x 1080 px), щоб зробити розмитий фон, та ще й використовувати PNG, який призначений для збереження максимальної якості зображення, - це дуже погано. Для прикладу JPG дозволяє зтиснути ту картинку до 15 кб без помітної для людини втрати якості. Але у вашому випадку це можна було зробити чистим CSS
filter: blur(...);
, яке б зайняло кілька байт і зекономило б як мінімум 1 запит до сервера.
+ Перевіряйте свої творіння валідатором.
Zolin_777 написав:Добрий день, зробив сайт на роботу, тобто по роботі можете глянути і вказати на помилки або побажання до покращення https://ustinovka.pp.ua/index.php
Шрифти жахливі, особливо там де "Історія газети" і "Наші реквізити".
Фон жахливий. Тягнути картинку 300 кб (1920 x 1080 px), що зробити розмитий фон, та ще й використовувати PNG, який призначений для збереження максимальної якості зображення, - це дуже погано. Для прикладу JPG дозволяє зтиснути ту картинку до 15 кб без помітної для людини втрати якості. Але у вашому випадку це можна було зробити чистим CSSfilter: blur(...);
, яке б зайняло кілька байт і зекономило б як мінімум 1 запит до сервера.
+ Перевіряйте свої творіння валідатором.
Дякую що підсказали з фоном, так дійсно довго раніше грузило, зараз поставив як ви посовітували jpg а що зі шрифтами? подивіться зараз якщо не важно .... тільки кеш почистіть а то воно забиває зразу, я чистю після кожного заливу щоб подивитися зміни...
Ок. Бачу ви виправили деякі помилки і використали гарніші шрифти.
Залишилось майже нічого :
Під "Наші реквізити" bolder (тег <b>) - зайвий.
І щось зробити з фоном.
Ну і з input'ами якось порішати.
+ Ваша картинка втратила якість надто помітно. Я прикріпив сюди оптимізовану версію, можете використовувати. Але все одно колись це доведеться переробити на чистий CSS.
Стосовно оптимізації зображень :
Є такі програми "OptiPNG", "JpegTran", "Optimized JPEG".
Ок. Бачу ви виправили деякі помилки і використали гарніші шрифти.
Залишилось майже нічого :
Під "Наші реквізити" bolder (тег <b>) - зайвий.
І щось зробити з фоном.
Ну і з input'ами якось порішати.+ Ваша картинка втратила якість надто помітно. Я прикріпив сюди оптимізовану версію, можете використовувати. Але все одно колись це доведеться переробити на чистий CSS.
Стосовно оптимізації зображень :
Є такі програми "OptiPNG", "JpegTran", "Optimized JPEG".
Дякую, я взяв вашу картинку, а що за тег <b> ? не робити так жирним а зробити через css? теж варіант, я ще підпилюю код доводжу до красоти ахах) я думаю фон з чистого css буде важкувато написати а і з інпутами порішав)
що за тег <b> ? не робити так жирним а зробити через css?
я думаю фон з чистого css буде важкувато написати
Осьо зробив спеціально для вас :
:root {
--bg-circle-width: 400px;
--bg-circle-height: 300px;
--bg-circle-distance: 30px;
--bg-circle-blur: blur(80px);
--bg-shadow-spread: 0px;
--bg-shadow-horizontal-distance:
calc((var(--bg-circle-width) + var(--bg-circle-distance)) * 0.866 + var(--bg-shadow-spread));
--bg-shadow-vertical-distance:
calc((var(--bg-circle-height) + var(--bg-circle-distance)) / 2);
}
.bg::before,
.bg::after {
content: "";
display: block;
width: var(--bg-circle-width);
height: var(--bg-circle-height);
position: fixed;
left: calc(50% - (var(--bg-circle-width) / 2));
z-index: -1;
border-radius: 50%;
filter: var(--bg-circle-blur);
}
.bg::before {
background-color: #D2EA22;
top: calc(50% - var(--bg-circle-height) - (var(--bg-circle-distance) / 2));
box-shadow:
calc(0px - var(--bg-shadow-horizontal-distance))
var(--bg-shadow-vertical-distance)
0px
var(--bg-shadow-spread)
#F5C07E;
}
.bg::after {
background-color: #4DC3EB;
top: calc(50% + (var(--bg-circle-distance) / 2));
box-shadow:
var(--bg-shadow-horizontal-distance)
calc(0px - var(--bg-shadow-vertical-distance))
0px
var(--bg-shadow-spread)
#8BF473;
}
Переваги :
1) Не потребує змін в розмітках html.
2) Кастомізабельне.
Завантажте архів і відкрийте у браузері.
(оновлений архів тут)
По моєму дуже подібно.
Zolin_777 написав:що за тег <b> ? не робити так жирним а зробити через css?
Zolin_777 написав:я думаю фон з чистого css буде важкувато написати
Осьо зробив спеціально для вас :
:root { --bg-circle-width: 400px; --bg-circle-height: 300px; --bg-circle-distance: 30px; --bg-circle-blur: blur(80px); --bg-shadow-spread: 0px; --bg-shadow-horizontal-distance: calc((var(--bg-circle-width) + var(--bg-circle-distance)) * 0.866 + var(--bg-shadow-spread)); --bg-shadow-vertical-distance: calc((var(--bg-circle-height) + var(--bg-circle-distance)) / 2); } .bg::before, .bg::after { content: ""; display: block; width: var(--bg-circle-width); height: var(--bg-circle-height); position: fixed; left: calc(50% - (var(--bg-circle-width) / 2)); z-index: -1; border-radius: 50%; filter: var(--bg-circle-blur); } .bg::before { background-color: #D2EA22; top: calc(50% - var(--bg-circle-height) - (var(--bg-circle-distance) / 2)); box-shadow: calc(0px - var(--bg-shadow-horizontal-distance)) var(--bg-shadow-vertical-distance) 0px var(--bg-shadow-spread) #F5C07E; } .bg::after { background-color: #4DC3EB; top: calc(50% + (var(--bg-circle-distance) / 2)); box-shadow: var(--bg-shadow-horizontal-distance) calc(0px - var(--bg-shadow-vertical-distance)) 0px var(--bg-shadow-spread) #8BF473; }
Переваги :
1) Не потребує змін в розмітках html.
2) Кастомізабельне.
Завантажте архів і відкрийте у браузері.
По моєму дуже подібно.
Те що ви написали такий код дуже вражає, але він працює чомусь повільніше, завантажується значно швидше а от при прокручуванні сторінки лагає, що на ноутбуці, що на телефоні.... нажаль( хотя на телефоні ваший варіант значно гарніше виглядає, можете перевірити самі, сайт повисить з вашим кодом до обіду десь) дякую я все таки змінив фон на картинку а то лаги були дуже серйозними....
він працює чомусь повільніше ...
при прокручуванні сторінки лагає, що на ноутбуці, що на телефоні ...
лаги були дуже серйозними....
Я і подумати не міг, що твориться в Chrome (дійсно лагає), бо перевіряв у Firefox v57.0.1 (там все працює ідеально).
Але є один трюк проти лагів :
-webkit-transform: translate3d(0, 0, 0);
.bg::before,
.bg::after {
/* ... */
-webkit-transform: translate3d(0, 0, 0);
}
Попробуйте оновлений архів. Мені цікаво чи на смартфоні будуть лаги.
Zolin_777 написав:він працює чомусь повільніше ...
при прокручуванні сторінки лагає, що на ноутбуці, що на телефоні ...
лаги були дуже серйозними....Я і подумати не міг, що твориться в Chrome (дійсно лагає), бо перевіряв у Firefox v57.0.1 (там все працює ідеально).
Але є один трюк проти лагів :
-webkit-transform: translate3d(0, 0, 0);.bg::before, .bg::after { /* ... */ -webkit-transform: translate3d(0, 0, 0); }
Попробуйте оновлений архів. Мені цікаво чи на смартфоні будуть лаги.
▼офтопік
Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?
Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)
Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?
Тут мені треба подумати-попробувати.
Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)
Тут можна підкрутити. І ОС немає значення, лише версія браузера.
Але швидше ніж через 4 години мене не чекайте.
Zolin_777 написав:Так на смартфоні чомусь все одно лаги є...як їх прибрати не знаєте?
Тут мені треба подумати-попробувати.
Zolin_777 написав:Тільки що побачив що на windows xp з chrome не завантажується фон взагалі, тільки два круга без розмивання без нічого)) надіюсь ця ос себе вже віджила, але хотілося б щоб на всіх однаковісінько працювало)
Тут можна підкрутити. І ОС немає значення, лише версія браузера.
Але швидше ніж через 4 години мене не чекайте.
Добре у мене є час) як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)
Ще раз оновив архів. Цього разу за основу були взяті файли, які висіли на сайті 3 години назад.
:root {
--bg-before-width: 90px;
--bg-before-height: 3px;
--bg-circle-radius: 24vh; /* or 160px; */
--bg-circle-distance: 30px;
--bg-circle-blur: blur(80px);
--bg-shadow-horizontal-distance:
calc((var(--bg-circle-radius) * 2 + var(--bg-circle-distance)) * 1.08);
--bg-shadow-vertical-distance:
calc(var(--bg-circle-radius) + (var(--bg-circle-distance) / 2));
--bg-shadow-spread:
calc(var(--bg-shadow-vertical-distance) - var(--bg-circle-distance));
}
.bg::before {
content: "";
display: block;
width: var(--bg-before-width);
height: var(--bg-before-height);
position: fixed;
left: calc(50% - (var(--bg-before-width) / 2));
top: calc(50vh - (var(--bg-before-height) / 2));
z-index: -1;
border-radius: 50%;
background-color: transparent;
filter: var(--bg-circle-blur);
backface-visibility: hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);
box-shadow:
0 Calc(0px - var(--bg-shadow-vertical-distance))
0px var(--bg-shadow-spread) #D2EA22, /* ^ */
0 var(--bg-shadow-vertical-distance)
0px var(--bg-shadow-spread) #4DC3EB, /* v */
calc(0px - var(--bg-shadow-horizontal-distance)) 0
0px var(--bg-shadow-spread) #F5C07E, /* < */
var(--bg-shadow-horizontal-distance) 0
0px var(--bg-shadow-spread) #8BF473; /* > */
}
Попробуйте на смартфоні і на старих браузерах.
На старих браузерах (які не підтримують filter:blur) фон має бути просто білий.
Якщо на смартфоні знов буде лагати, тоді я не знаю, робіть як хочете.
як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)
Ви про що ?
Zolin_777 написав:як думаєте якщо все грамотно зробити сайт зможе сам себе окупати?)
Ви про що ?
Ну я планую додати функцію додавання оголошень в газету через сайт, щоб люди не їхали до нас і не приходили... а все через сайт... хотя як тоді сайт окупиться.... щось я не про те задумався ахах
Ну я планую додати функцію додавання оголошень в газету через сайт, щоб люди не їхали до нас і не приходили... а все через сайт... хотя як тоді сайт окупиться.... щось я не про те задумався ахах
На сайт можна прикріпити оплату через різні сервіси (наприклад paypal).
В питаннях про отримання прибутків з мене порадник ніякий.
Zolin_777 написав:Ну я планую додати функцію додавання оголошень в газету через сайт, щоб люди не їхали до нас і не приходили... а все через сайт... хотя як тоді сайт окупиться.... щось я не про те задумався ахах
На сайт можна прикріпити оплату через різні сервіси (наприклад paypal).
В питаннях про отримання прибутків з мене порадник ніякий.
ну добре) дякую з фон для сайту, я навіть ваші коментарі прибирати не буду чи міняти на свої, хай люди знають героя))
Той коментар був вставлений лише для того щоб ви точно знали де закінчується ваш код і починається дописаний. Можете видаляти і змінювати все що захочете. Я не предендую на авторство.
І на майбутнє : весь код, який я кидаю на цей форум можна змінювати, поширювати, і робити що завгодно, якщо там не сказано інше.
Для відправлення відповіді ви повинні увійти або зареєструватися