Плавні переходи кольору: css gradient
Відео: CSS3 linear-gradient background tutorial HTML5 Linear Gradient Parameters
Природна колірна гамма зазвичай рівномірно-плавна. Але навіть на ідеально рівних поверхнях одного суцільного кольору утворюються природні колірні переходи. Завжди ненавмисне падіння сонячних променів або штучного освітлення, а також зміна кута зору дає нерівномірні і унікальні відтінки.
Дві точки зору, спрямовані на один і той же предмет, сприймають його колір відповідно різниці їх кутів бачення і співвідношення з кутами падіння інших променів на оглядається поверхня.
Психологічні ефекти колірних переходів
Колір викликає не тільки фізичні відчуття і залежить не тільки від часу і положення в просторі. Зображення дерев, будинків, гір та інших предметів в перевернутому положенні викликають відчуття відображення в водної гладі або на іншій поверхні.
Абсолютно чорні паралельні лінії на ідеально білої поверхні стіни, кожна пряма по всій довжині збільшується в товщині пропорційно до природного зменшення товщини лінії при погляді на стіну - все це викличе відчуття у глядача, що приміщення має горизонтальну стелю.
Одне зображення, на якому нанесені два, і кожне з них зміщене один щодо одного на відстань між очима, дає просторовий ефект обсягу, якщо розфокусувати погляд.
Якщо плакат досить великий і межі переходу в реальну дійсність виконані ідеально, то зображене на плакаті буде сприйматися настільки природно, що потрібні відтінки кольору, свідомість дивиться підключить автоматично.
Сайт, а перш за все, його дизайн і колірна схема мають важливе значення і доповнюють логіку ресурсу, його діалог, виробляють належний психологічний ефект на відвідувача.
Відео: Серія 8 Градієнт гель-лаком (омбре, деграде)
Плавні переходи за допомогою CSS
Градієнти створюються за допомогою функцій linear-gradient () і radial-gradient (). У першому випадку плавну зміну кольору відбувається по лінії, в другому випадку - по еліпсу або колу. CSS gradient можна встановлювати в властивості background, background-image, border-image, list-style-image. Накладаючи елементи один на одного, визначаючи їх прозорість можна формувати приголомшливі відтінки кольору і створювати унікальні переходи.
Слід, однак, враховувати, що колірний перехід не завжди може бути плавним. Деякі варіанти поєднання кольорів, значення прозорості, оформлення фону сторінки можуть дати небажані, ступінчасті ефекти.
Правила запису CSS background gradient
Градієнт є плавний перехід від одного кольору до іншого. При цьому можна використовувати кілька кольорів. Вказівка лінійного варіанту (CSS linear gradient) може бути різноманітним:
Першим параметром йде кут нахилу або сторона області, потім слідують кольору. Не обов`язково використовувати тільки два кольори, можна намалювати всю веселку. Застосовуючи властивість прозорості opacity можна отримувати ефекти накладення.
Вибір кольору, генератори кольору
Творча частина роботи дизайнера, розробника сайту в останні роки спростилася. Стали практичними і доцільними прямокутні форми, що містять мінімум інформації, мінімум функцій, максимум сенсу і психологічну установку продати товар, надати послугу, особливо відзначити знижки, якість і / або істотні відмінності від конкурентів.
Однак навіть в такому жорсткому регламенті і умовах створення сучасних веб-ресурсів знаходиться місце для творчості і виразне бажання деяких розробників робити агресивну, цільову роботу з кольором, що відображає зміст текстового контенту і стиль обраного діалогу. CSS gradient став частіше застосовуватися.
Відео: GoToWeb - Відеокурс Html і Css, урок 25, радіальний градієнт на CSS
кольорові рішення "Гугла" і "скайпу", Зокрема, мали ефект і послідовників, проте, в останні пару років активна складова веб-дизайну почала шукати нові форми, нові колірні рішення і пробувати ненав`язливу динаміку плавних форм.
В інтернеті з`явилося багато онлайн-ресурсів (CSS gradient generator), які значно спрощують роботу з вибору потрібних кольорів: angrytools, flatonika, generatecass і ін. З їх допомогою можна зекономити час на підбір потрібних кольорів, продумати лінію переходів і накладень.
Динамічна колірна схема
Традиції, що лежать в основі створення веб-ресурсів, зробили непорушним правило: структура, зміст і діалог сайту з клієнтом - компетенція розробника, яка реалізує волю власника (замовника). Зовнішній вигляд сайту, його дизайн також традиційно відноситься до того, що не визначається клієнтом.
Відео: Уроки по CSS / CSS3. Частина 16. Градієнти
Тим часом, кількість різноманітних пристроїв зростає, а в родинах кожного виду з`являються різні перспективні екземпляри, що мають суттєві відмінності, не стільки в передачі кольору, скільки в дозволі і формах видимій області браузера.
Різноманітність браузерів і використовуваних версій також створює проблеми в адекватному відображенні можливостей CSS gradient.
У сукупності оцінюючи ці обставини і приклади деяких перспективних робіт, можна стверджувати, що зовнішній вигляд сайту тільки в дефаултном стані - компетенція розробника і / або власника ресурсу. Тільки коли клієнт вперше відвідує ресурс, він може мати можливість оцінити дизайн сайту. Якщо клієнт вважав за доцільне запам`ятати сайт і використовувати його в своєму повсякденному житті, то його бажання мати інструменти для управління зовнішнім виглядом і функціоналом цілком обгрунтовано.
Таке перенесення центру ваги вигідний розробнику: зникає необхідність займатися реалізацією кросбраузерністю, тестувати сайт на різних пристроях в різних операційних системах.
Більш того, тенденція дозволить створити загальну базу даних по фактичної реалізації можливостей CSS правил на різних пристроях. Це тільки початок, але його потенціал має велике значення.
