Size: a a a

Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript

2019 September 18

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Роб
css фильтры работают не на свг-элементы
крутяк.  ага, интересно, че я раньше  про них не знала. я всегда накладывала новым слоем  с прозрачностью, а тут во сколько всего. они недавно появились что ли?
источник

Р

Роб in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
NinuX Lets
крутяк.  ага, интересно, че я раньше  про них не знала. я всегда накладывала новым слоем  с прозрачностью, а тут во сколько всего. они недавно появились что ли?
Давно. Хотя зависит от того, что для тебя давно. Может ты 10 лет верстаешь.
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
не))))))))))) я упоминания читала но на примере нигде не видела ни на одном сайте.
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
ообще картинки я  сразу готовлю какие мне надо в реакторе. а если они не мои или еще че, то делала затемнение через ргба.
источник

Р

Роб in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
NinuX Lets
ообще картинки я  сразу готовлю какие мне надо в реакторе. а если они не мои или еще че, то делала затемнение через ргба.
Это норм, но не всегда можно достигнуть нужного результата. В фильтре больше эфектов, чем просто изменение цвета.

Но в случае с тем парнем, думаю, вариант с наложением прозрачного блока выглядел бы ближе к макету.
источник

Р

Роб in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
(думаю, дизайнер так и сделал)
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
да, я перепробую фильтры, может,какие-то мне понадобятся и будут более красиво смотреть. Пока у меня идет градиентное затемнение  с углом, но мне именно так и надо было. А когда  буду другие вещи делать ( еще одну главную надо на сайте потом), может, там как раз и фильтр зайдет какой. Главное, чтоб мобила принимала, а то там бывают фокусы.КАк с фиксированной картинкой. НИхрена не работает.
источник

Р

Роб in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
NinuX Lets
да, я перепробую фильтры, может,какие-то мне понадобятся и будут более красиво смотреть. Пока у меня идет градиентное затемнение  с углом, но мне именно так и надо было. А когда  буду другие вещи делать ( еще одну главную надо на сайте потом), может, там как раз и фильтр зайдет какой. Главное, чтоб мобила принимала, а то там бывают фокусы.КАк с фиксированной картинкой. НИхрена не работает.
С фиксированной картинкой? Это ты сейчас про паралаксный бекграунд?
В спецификации ведь написано, что он сейчас работает с ограничениями)
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
тэкграунд атачменд фиксед кроме мозиллы в мобиле везде нет.
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
ну написано что не работает. но я сначал  увидела эту визуально. потом прочитала.)
источник

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
я все равно их почтив езде оставила. кроме одного места, где одна разбивалась на части без фиксации.
источник

Ni

Nemesidom in front of you in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Роб
(думаю, дизайнер так и сделал)
Скорее всего он там ещё multiply в режимах наложения слоёв поставил.
источник

Ni

Nemesidom in front of you in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
NinuX Lets
крутяк.  ага, интересно, че я раньше  про них не знала. я всегда накладывала новым слоем  с прозрачностью, а тут во сколько всего. они недавно появились что ли?
Так это тоже хорошее, кроссбраузерное решение.

Правда есть ещё лучше: просто в редакторе сделать картинку такой, какой она должна отображаться.
источник

Р

Роб in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Nemesidom in front of you
Так это тоже хорошее, кроссбраузерное решение.

Правда есть ещё лучше: просто в редакторе сделать картинку такой, какой она должна отображаться.
Больше мороки для клиентов, которые будут загружать эти фото. Варианты Нинух самый близкий к истине.
источник

Ni

Nemesidom in front of you in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Роб
Больше мороки для клиентов, которые будут загружать эти фото. Варианты Нинух самый близкий к истине.
Всё зависит от задачи на самом деле.

Если речь идёт о статических картинках, порой лучше преобразовать картинку к нужному виду, если речь идёт о динамически загружаемых картинках, то можно уже прибегнуть к подобным фокусам (ну или обрабатывать их на бекенде).

Серебряной пули тут, впрочем, как и всегда ,нет.
источник

Ni

Nemesidom in front of you in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
К примеру, если мне не изменяет память, мне пока что пришлось только два раза использовать в продакшене background-blend-mode.

В целом в обоих случаях причина была одна: было большое количество фотографий уже залитых с белым фоном, а необходимо было положить их на серый фон.
источник
2019 September 19

NL

NinuX Lets in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
я нашла генератор фильтров. Хорошо. халявка))))))) https://www.cssfilters.co/
источник

С

Сергей in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
День добрый!
Есть список элементов, их нужно расположить столбцами с вертикальной сортировкой, а не горизонтальной:
1 4 7
2 5 8
3 6 9
Это я могу сделать  гридом:
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-auto-flow: column;
Но если клиент выведет больше элементов, они добавятся  новым столбцом, а не рядком.
1 4 7 *
2 5 8
3 6 9
а нужно как-то так
1 4 7
2 5 8
3 6 9
*

учитывая что с таким подходом для адаптивности при  смене количества элементов придется писать новые стили - решение не удачное.
Может можно сделать более адекватно?
источник

VK

Vlad Kupnyy in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Через js проверяй
источник

VK

Vlad Kupnyy in Веб-Технологи: UI/UX, Вёрстка, Фронтенд, Javascript
Щя подумаю одну сек
источник