Эффекты для изображений на html, css, js?

Question

[thehighhomie]

Как можно реализовать такое:

Я думаю на скрине все интуитивно понятно: есть слайдер, у него мини превьюшки внизу с картинками в стиле рисунков карандашами а при активном уже изображение нормальное.

Можно вообще такие манипуляции с изображениями делать на html, css, js?

Дополнительные картинки и замена их скриптами не нужна мне, так как хочу такие штуки научиться делать, если конечно так можно.

Answer 1

[xmoonlight]

1. Затемнение углов? Vignette ? можно.
2. Если полноцветные дома:

• без фона
  
• с фоном, который везде одинаковый
  
• фон есть отдельно
  

...можно.

Comments

[thehighhomie]

Вообще не то

[xmoonlight]

thehighhomie: я добавил пункт 2 - то?

[thehighhomie]

xmoonlight: как понять с фоном и без фона? тень фоном или что?

[xmoonlight]

thehighhomie: нет. фон - то, что вокруг дома находится: зелень, кусты, трава и т.д.

[thehighhomie]

xmoonlight: а, понял, хорошо, попробую. я думал просто может есть какой апи у js или свойства css которые позволят добавлять эффекты к изображениям.

[thehighhomie]

xmoonlight: пользуясь случаем, может вы мне подскажете еще как такие примерно фигуры через css transform реализовать если можно
интересует именно css так как svg плохо знаю а на канвасе не хочу.

[xmoonlight]

thehighhomie: https://developer.mozilla.org/en-US/docs/Web/CSS/t...

[xmoonlight]

thehighhomie: советую комбинировать SVG+CSS3 для лучших результатов без JS!

[thehighhomie]

xmoonlight: да видел я это все, только сложно самому все тут разрулить, хотел конечно пример увидеть)

[xmoonlight]

thehighhomie: а-а... халявщик?!)))) тут только поможет тебе изучение матриц преобразования - это математика. я тут - вряд ли смогу привести все возможные варианты....

[thehighhomie]

xmoonlight: ну ладно) спасибо) с математикой всегда не лады были

[xmoonlight]

thehighhomie: вот без прикола: советую просто нагуглить примеры нужные для конкретной задачи. И еще хотел спросить: почему к канвасу негатив?

[thehighhomie]

xmoonlight: ну я сомневаюсь что он для кнопок подойдет, там же на ховер если нужно будет кнопке стили поменять или эффекты, на актив, что то не очень хочется это все писать

[xmoonlight]

thehighhomie: ну так никто не мешает разделить канвас и сделать их несколько) Одна кнопка - один тэг canvas и всё)

[thehighhomie]

xmoonlight: так писать много)

[thehighhomie]

xmoonlight: должен же быть вариант где все проще)

[xmoonlight]

thehighhomie: ага, он есть) и каждый о нём узнает рано или поздно)