Слой маска в верстке

#html #css #css3 #вёрстка #svg

Есть такой блок с картинкой, градиентом и окошком "сквозь" этот градиент (слой маска
в psd) + текст и кнопка внутри окошка:



Вопрос: Как реализовать подобное в адаптивной верстке, маской  SVG или любым другим
способом?

Пока нет идей. С маской, тогда с адаптивностью проблемы.

Код:



.img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.slider-right {
  width: 300px;
  height: 300px;
  border: 2px solid #fff;
  position: relative;
}

.slider-right .btn {
  position: absolute;
  left: 0;
  bottom: 20px;
   right: 0;
  margin: 0 auto;
  display: block;
  max-width: 150px;
}

.slider .container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.slider .container .row {
  height: 100%;
}

.slider {
  color: #fff;
  height: 500px;
}

.slider-inner {
  position: relative;
  width: 100%;
  
  background: rgba(21,91,50,1);
background: -moz-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(21,91,50,1)),
color-stop(100%, rgba(21,91,50,0)));
background: -webkit-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -o-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: -ms-linear-gradient(left, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
background: linear-gradient(to right, rgba(21,91,50,1) 0%, rgba(21,91,50,0) 100%);
}

  

  
  

    

      

        
Lorem ipsum dolor sit amet.
      
      

        

          Button
        
      
    
  




    

Ответы

Ответ 1

SVG маска, на которой нарисован белый квадрат с белой же тенью - как раз то, что Вы ищите






Ответ 2

Решение SVG + Mask - Filter

В этом решении для оформления фона не используются фильтры svg. 
Можно использовать свойства svg маски, как для окна, так и для фона. Комментарии
см. в коде.
Кнопка, изображение находятся внутри SVG, поэтому вёрстка адаптивна и не сломается
при любом размере дисплея гаджета.  



#rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}

g:hover {
cursor:pointer;
}





Маска + радиальный градиент

К маске добавляется градиент, что обеспечивает неравномерность прозрачности фона. 


          
          
        




#rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}
g:hover {
cursor:pointer;
}





Неравномерная окраска фона в любой цвет

Смотрите комментарии в коде:



#rect1 {
fill:#EA0000;
}

g:hover > #rect1 {
fill:green;
}

g:hover > #crc1 {
fill:#EA0000;
}

g:hover {
cursor:pointer;
}