про css

Управління розмірами - тема важлива, і щоб максимально використовувати можливості SVG, потрібно добре розуміти як все працює.

Почну здалеку. Не так давно я приєдналася до HTML Академії в якості наставника. Крім того, що наставництво допомагає впорядкувати свої знання, воно дивним чином стимулює розробку різних корисних штук, тому що в процесі з'являються цікаві завдання, вирішення яких можна зручно автоматизувати.

Зацікавилася питанням: як найкраще верстати логотипи на сайті? Як правильно і чому? Картинкою або фоном? Як логотип буде виглядати при друку? Як забезпечити доступність для скрінрідеров і як зробити підказки для пошукових систем?

pattern - це елемент, який можна використовувати в качеcтве заливки або обведення. Вміст паттерна може бути найрізноманітнішим: фігури, символи, текст або растрові зображення - у будь-якому поєднанні.

Грала з кодами, виявила дивовижне: виявляється, всередині CSS-властивості background можна використовувати інші CSS-властивості, наприклад, box-shadow. outline. transform і навіть ще один background.

Чесно кажучи, бульбашки у мене вийшли майже випадково, коли мені треба було як слід вивчити градієнти і я експериментувала з їх можливостями. І я сама до цих пір не дуже розумію, як так вийшло, використовуючи тільки SVG - векторний формат, - зробити такий невагомий мильна бульбашка.

У SVG не працюють звичні CSS-фони, для заливок тут є свої конструкції: для градієнтів це елементи linearGradient і radialGradient - лінійний і радіальний градієнти відповідно.

Нещодавно мені довелося налагоджувати дуже примхливий скрипт, в якому, по відчуттях, відбувалися якісь паранормальні явища. Щоб знайти проблему, знадобилося вивести в консоль браузера велика кількість налагоджувальної інформації.

SVG-маски - це дуже багата тема. У SVG є два способи обрізати один елемент за допомогою іншого: це clip-path і mask. Clip-path для обрізки використовує тільки контури фігур, ігноруючи заливки і обведення, з масками все набагато цікавіше: в них враховуються і заливки, і обведення, і яскравість вмісту.

У Firefox починаючи з 39-ї версії з'явилися цікаві CSS-властивості, які дозволяють управляти поведінкою прокручуваного контенту.

SVG дивовижна технологія, не в останню чергу завдяки своїм оригінальним підводних каменів. Якщо ви почали працювати з SVG - нудно точно не буде.

Парочка свіжих проблем була виявлена ​​при взаємодії SVG з Angular, причому вони виникали тільки в Firefox. Я вирішила описати проблеми і їх рішення тут: собі на пам'ять, іншим на користь.

У минулому пості всім було трохи незрозуміло: чому б не визначати браузер існуючими способами і навіщо відмовлятися від JS-бібліотек? Питання цілком закономірні, але у мене була причина шукати спосіб зробити SVG-фолбек без зовнішніх залежностей: потрібно було рішення для grunt-плагіна.

Якось у мене виник цікавий питання. Є рішення для заміни інлайнового SVG на фонові картинки в браузерах, де інлайновий SVG не підтримується. Воно побудоване на допущенні, що на сторінці є потрібний нам клас .ie8. по якому SVG-елементам включаються фонові зображення.

Очевидний недолік методу полягає в тому, що ми повинні окремо подбати про те, щоб потрібний нам клас був - при генерації сторінки на сервері або ж визначивши браузер за допомогою JS.

Не так давно в Firefox 32 включили підтримку mix-blend-mode. a в Chrome 37 - CSS shapes. тобто можливість управляти формою, по якій текст буде обтікати елемент. Обидві технології виглядають дуже цікаво, так що я вирішила спробувати їх у дії, заодно з'ясувавши як буде виглядати сторінка в браузерах, де вони не підтримуються.

В черговий раз зустрівшись з тими ж граблями, я все-таки вирішила описати суть проблеми та шляхи її вирішення. Йтиметься про те, як змусити старі браузери розуміти і відображати SVG-елементи - хоча б марною блок заданих розмірів.

В один прекрасний день перед нами (мною і моїми колегами) постало завдання обробити велику кількість SVG-іконок. Вихідні дані: три десятка безбарвних SVG-зображень (їх кольору задаються потім через CSS) і завдання зробити з них PNG + CSS фолбек для старих браузерів.

В процесі експериментів з анімованими SVG-масками. мені довелося як слід розібратися з алгоритмами CSS-анімації.

У минулій статті я розглядала дивні речі SVG-обведення, а також можливість зробити анімовані маски.

Так як трансформації в маски не анімуються в Firefox (31-я версія на момент написання статті), я продовжила експерименти з обведення.

Експериментуючи з SVG можна виявити багато дивних моментів. Отримати дивне при маніпуляціях з масштабуванням ще якось очікувано, але раптово сюрпризи піднесло властивість stroke-width.

Надихаюча презентація від Дмитра Барановського. You Do not Know SVG.

У пошуках що б ще такого зробити щоб їздило, я захотіла зробити прелоадери на SVG.

Вийшло здорово, хоча результат поки не сильно підходить для використання в реальному житті.

Попереднє рішення мені все-таки здається кілька надлишковим, а тут прийшов в голову ще один спосіб, на цей раз - з псевдоелементи і opacity.

На цьому тижні в Firefox 30 було включено за замовчуванням властивість background-blend-mode. Таким чином, Firefox став третім браузером, що підтримує це властивість (два інших - Opera і Chrome). Safari буде підтримувати це властивість в наступній версії, про плани IE мені нічого знайти не вдалося.

Продовжуючи цікавитися різними способами зробити іконки, вирішила пошукати що-небудь про підтримку @ font-face на мобільних пристроях.

Відомо, що кастомниє шрифти можуть працювати несподіваним чином. Якщо вони не підтримуються браузером або пристроєм, замість символів може з'явитися все що завгодно. В ідеалі - не буде нічого, але можуть бути й інші варіанти, аж до кольорових іконок непередбачуваного змісту.

Зовнішній вигляд SVG-елементам можна задавати як за допомогою CSS, так і за допомогою SVG-фільтрів, градієнтів і патернів - їх можна прописувати елементам прямо в коді або задавати також через CSS.

Стилі і скрипти можна задавати всередині SVG-файлу, але якщо ми хочемо, щоб одне і те ж зображення в різних умовах виглядало по-різному - стилі всередині файлу не годяться - потрібно, щоб векторне вміст було доступно для зовнішніх стилів.

Є кілька способів обрізати елемент по масці. Одні підтримуються всіма сучасними браузерами, інші підтримуються дуже погано, і користуватися ними ще можна. У деяких способах маскою може бути текст.

nth-child - один з моїх найулюбленіших селектор, тому що за допомогою нього можна робити кльові різнокольорові штуки збирати елементи списку в групи довільної довжини і робити з ними різні цікаві речі: від смугастих таблиць до цілих різнокольорових дизайнів, і все це без необхідності задавати додаткові класи або якось змінювати розмітку.

Стеки - це ще один спосіб організації SVG. Як спрайт, тільки краще - як якщо б ми могли використовувати use в CSS.

На жаль, спосіб дуже нерівномірно підтримується сучасними браузерами.

Адаптивний дизайн - популярна тема. Екрани давно вийшли за межі стандартних дозволів, і сайти можуть дивитися і на аксесуарах розміром з долоню, і на великих моніторах. Сайт повинен однаково добре виглядати незалежно від розміру пристрою і щільності пікселів. Для адаптації дизайну і контенту існує багато різних методик і технологій. Векторна графіка, SVG, по-моєму, одна з найбільш цікавих тем в цьому напрямку.

У SVG заливка і обведення мають багато різних цікавих опцій, які надають можливості набагато ширше того, що є в CSS.

path - більш складний варіант лінії. З його допомогою можна намалювати line. polyline. polygon. circle і rect. пруфлінк.

На відміну від polygon. фігура не замикається сама по собі, але це можна зробити за допомогою додаткового параметра.

SVG-фігури можна групувати, щоб зручно структурувати файл. Для цих цілей існує кілька ключових слів: g. defs і symbol. Елементи, групи елементів і символи можна використовувати повторно.

Писати SVG досить просто. Використовуються фігури: rect. polygon. circle. ellipse. а також line. polyline і path. Задаємо обрану фігуру, визначаємо її розміри і координати, потім додаємо фон і обведення.

SVG - це формат векторних зображень, заснований на XML.

SVG має масу переваг перед растровими зображеннями.

Якось стало цікаво чи можна зробити анімований зорепад використовуючи CSS (якщо бути точніше - Sass). Виявилося, що можна, причому в залежності від налаштувань результат також може бути схожий на заставку Windows "Крізь всесвіт".

Поєднання CSS-анімації, трансформацій і градієнтів може дати абсолютно дивовижні результати. Не впевнена, що подібне можна використовувати в реальних проектах, але виглядає досить ефектно.

У процесі вивчення JS вирішила написати малювалки CSS-анімації на основі box-shadow. Отримала море задоволення і дізналася багато нового.

Несподівано захопилася темою CSS-патернів і зробила кілька нових. Мене цікавило: чи можна зробити плавні хвилі і спіралі, чи вийде імітувати візерунок з кольорового паперу і як зробити поштову марку не використовуючи зображення.

Я довгий час використовувала для своїх демо jsbin.com. Схоже, занадто активно використовувала. У якийсь момент в процесі редагування коду Jsbin взагалі переставав відкриватися.

Можливості управління фонами через CSS в Cочетание з градієнтами дають абсолютно неймовірні можливості. Градієнтами можна намалювати майже все що завгодно від простих клітинок, смужок і кружечків до досить складних візерунків. Гратися можна до нескінченності.

Радіальні градієнти отрісовиваємих інакше, ніж лінійні. Якщо кольори лінійних розташовуються перпендикулярно лінії, яка задає напрям, то в радіальних кольору розходяться від заданого центру, а градієнт може приймати форму кола або еліпса.

CSS-градієнти дозволяють зробити фон з двох і більше кольорів, що плавно переходять з одного в інший. Вони з нами вже досить давно, і мають досить непогану підтримку браузерами. Більшість сучасних браузерів розуміє їх без префіксів, для IE9 і старше є Gradient Filter. також для IE9 можна використовувати SVG.

Мені хотілося зробити ефект променів, що розходяться на чистому CSS, без картинок.

Досить дивний варіант гри.

Border-image - властивість, яке дозволяє задавати фонове зображення для рамки елемента. Властивість заповнює рамку заданої картинкою, розподіляючи частини зображення таким чином, щоб кутові частини знаходилися в кутах рамки, а простору між ними заповнювалися іншими частинами зображення.

Ця властивість дозволяє легко робити неймовірні штуки, для яких раніше було потрібно від 3-х до 8-ми картинок і маніпуляції з розміткою.

З пізнавально-розважальною метою зробила електронний годинник.

Показує поточний час, змінюють колір, вміють пристосовуватися під розмір вікна браузера.

Здається, мені вдалося зробити більш вдале рішення задачі про гру Го.

У порівнянні з попередньою версією, кольору каменів змінюються по черзі, а вгорі дошки показується колір наступного каменю.

Всі CSS-селектори мають свою вагу, який визначає як взаємодіють однакові властивості, задані в різних місцях коду одного й того ж елементу.

Зацікавилася юнікодом, захотіла подивитися які символи в ньому є, і якось сама собою вийшла сторінка, на якій можна побачити більшість символів юникода: yoksel.github.io/unicode-table.

За допомогою CSS на сторінку можна додати елементи, неіснуючі в розмітці сторінки. Це робиться за допомогою псевдоелементів: before та: after. але не менш важливу роль в цьому відіграє властивість content.

Як відомо, градієнти не люблять анімований.

У пості представлені деякі ефекти на основі text-shadow.

text-shadow - це властивість, що описує тінь, що відкидається текстом.

Якось мені треба було зробити ієрархічне представлення структури проекту, для реалізації був обраний Css.

В CSS є достатньо способів звернутися до потрібних елементів.
У кожній новій специфікацією CSS додавалося щось нове, і тепер у нас є багато самих різних селекторів.

Цими вихідними сайт змінив не тільки дизайн, але і движок. Тепер це Jekyll - генератор статичних сторінок.

Якщо за допомогою z-index змінювати порядок накладення елементів один на одного, в деяких випадках можуть виникати проблеми через властивостей, що створюють новий контекст накладання.

Пара прекрасних штук з Codepen.io.

В уроці код для SASS, я спробувала зробити це простим CSS і використовуючи меншу кількість елементів.

Є два способи зробити ефект, як ніби елемент прострочили на швейній машинці: використовуючи псевдоелементи і за допомогою outline.

Властивість box-sizing дозволяє вказати як поводяться розміри блоку при наявності рамок і полів. Застосовуються до елементів, у яких задані розміри.

Мені дуже подобається можливість задавати кольори в коді декількома різними способами, в залежності від мети використання. Всього таких способів 7.

Проблема: якщо задати фон рядковим елементам, виходить ось так

Коли виникає необхідність зробити клітинки як в шкільному зошиті не використовуючи при цьому зображення, насамперед в голову приходять градієнти.

Властивість box-shadow дозволяє додати елементам одну або кілька тіней.