coding: Кастомный градиент поверх картинки

воскресенье, 9 февраля 2020 г.

Кастомный градиент поверх картинки

#css #svg


Как сделать такой угловой (белый) выступ на картинку? Я понимаю, что возможно придется
прибегнуть к SVG-картинке

Ответы

Ответ 1


Вроде бы все пожелания учтены 


  смотреть на полный экран


Родительский блок в нём два потомка , в первом потомке картинка и кнопка внутри которой
иконка youtube что бы можно было в дальнейшем повесить клик на открытие плеера, в другом
потомке тестовый текст и псевдоэлемент с градиентом под углом ... 



* {
  margin: 0;
  padding: 0;
  list-style: none;
  tet-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elem {
  width: 1024px;
  height: 320px;
  margin: 30px auto;
  display: flex;
}

.elem__block1 {
  position: relative;
  width: 60%;
  height: 100%;
}

.elem__block1 img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.elem__block1 button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 70px;
  height: 50px;
  border: none;
  outline: none;
  background: none;
}

.elem__block1 button .fa {
  font-size: 50px;
  color: red;
}

.elem__block2 {
  padding: 30px 20px;
  width: 40%;
  position: relative;
}

.elem__block2 p {
  font-size: 14px;
}

.elem__block2 li {
  padding: 4px 0;
}

.elem__block2 h2 {
  font-variant: small-caps;
}

.elem__block2 li span {
  padding-left: 10px;
  font-size: 18px;
}

.elem__block2 .fa {
  text-align: left;
}

.elem__block2:after {
  content: "";
  display: block;
  width: 150px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -150px;
  z-index: 13;
  background: linear-gradient(110deg, transparent 50%, white 51%);
}




  
    
    
  
  
    Lorem, ipsum. dollar 
    
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, aliquam.
    
    
      
        
        Lorem, ipsum dolor. 
      
      
        
        Lorem ipsum dolor sit. 
      
      
        
        Lorem, ipsum dolor. 
      
      
        
        Lorem ipsum dolor sit.
      
      
        
        Lorem, ipsum dolor.
      
    
  



Ответ 2


Углы можно сделать и с помощю css. Создаем :after. И даем ему подходящий бордер.



.cont{
  width: 100%;
  overflow: hidden;
  height: 100%;
}
.cont{
  width: auto;
  height: 180px;
}
.cont>img{
  width: 100%;
  height: auto;
}

.cont:after{
  content: '';
  position: absolute;
  top: 0;
  right: 3px;
  background: transparent;
  border-top: 188px solid transparent;
  border-right: 100px solid #FFFFFF;
  border-bottom: 0 solid transparent;

}

  



Ответ 3


UPD
CSS multiple backgrounds (developer.mozilla.org):

div{
width:100%;
height:100vh;
background-color:#fff;
background: -webkit-linear-gradient(340deg,transparent 0,transparent 85%, #fff 85%,
#fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background: -o-linear-gradient(340deg,transparent 0,transparent 85%, #fff 85%, #fff),
url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background: linear-gradient(110deg,transparent 0,transparent 85%, #fff 85%, #fff),
url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
background-repeat: repeat-x, no-repeat;
background-size: 100% 100%, cover;
}




@charset "UTF-8";
html {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline;
}
html,
body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background-color: #fff;
  color: #2e2e2e
}

div {
  display:block;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background: -webkit-linear-gradient(340deg, transparent 0, transparent 85%, #fff
85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background: -o-linear-gradient(340deg, transparent 0, transparent 85%, #fff 85%,
#fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background: linear-gradient(110deg, transparent 0, transparent 85%, #fff 85%, #fff),
url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background-repeat: repeat-x, no-repeat;
  background-size: 100% 100%, cover;
}



  
  
  


  
  






(На скорую) Вариант с текстом:



@charset "UTF-8";
html {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 400;
  font-style: normal;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  font-stretch: normal;
  vertical-align: baseline;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  color: #2e2e2e;
}

body {
  margin: 0;
  position: relative;
  font-size: 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", Roboto, Helvetica,
Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga", "clig"
}

.rap {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  height: 100vh;
}

.box {
  display: block;
  width: 100%;
  height: 375px;
}

.img {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  background-color: #fff;
  background: -webkit-linear-gradient(340deg, transparent 0, transparent 562px, #fff
563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background: -o-linear-gradient(340deg, transparent 0, transparent 562px, #fff 563px,
#fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background: linear-gradient(110deg, transparent 0, transparent 562px, #fff 563px,
#fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg');
  background-repeat: repeat-x, no-repeat;
  background-size: 100% 375px, cover;
}

.txt {
  position: absolute;
  left: 600px;
  top: 0;
  display: block;
  width: 424px;
}

.txt div {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: justify;
}




  
  
  



  
    
    
    
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      
    
  





Ответ 4


НАШЕЛ РЕШЕНИЕ!!! Делается через 3 div-a! Может и не верное / На костылях написано...

Создаем 3 дива в ряд, средний не прописываем width, а просто увеличиваем padding
и в тот же момент пишем отрицательный margin и дальше переворачиваем блок с помощью
transform: skew(-20deg);. Блок, который должен быть сзади углового элемента - можно
добавить z-index: -1, чтобы элемент ушел на задний план, а тот элемент, что должен
быть сверху - z-index: 1



.how_we_do {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 55%;
}
.how_we_do .how_we_do_left {
  overflow: hidden;
  width: 60%;
  background: url("https://www.jonglaan.nl/.imaging/mte/jonglaan/og-image/dam/nieuws/europese-standaard-voor-tolheffing-in-transportsector.JPG/jcr:content/europese%20standaard%20voor%20tolheffing%20in%20transportsector.JPG")
center center no-repeat;
  background-size: cover;
}
.how_we_do .rotate {
  position: relative;
  padding: 150px;
  margin: -150px;
  background-color: white;
  transform: skew(-20deg);
}
.how_we_do .how_we_do_right {
  z-index: 1;
  width: 30%;
  padding-top: 2%;
  margin-right: 10%;
}
.how_we_do .how_we_do_right h1 {
  font-size: 40px;
  font-weight: 600;
}
.how_we_do .how_we_do_right h2 {
  font-size: 16px;
  font-weight: 400;
  color: #444;
  margin-bottom: 5%;
  line-height: 27px;
}
.how_we_do .how_we_do_right h3 {
  color: #444;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 3%;
}
.how_we_do .how_we_do_right h3 .icon_col {
  color: #23B684;
}



    

    
    
    
        
            Как мы работаем?
            Ut enim ad minima veniam, quis nostrum exercitationem
                ulla corporis suscipit laboriosam, nisi ut aliquid ex ea.

              Грузоперевозки
по всей России
              Быстрые и безопасные
грузоперевозки
              Самые низкие ставки
              Логистика и Доставка
              Упаковка
и Хранение

coding

Страницы

Поиск по вопросам

воскресенье, 9 февраля 2020 г.

Кастомный градиент поверх картинки

Ответы

Ответ 1

Lorem, ipsum. dollar

Ответ 2

Ответ 3

Ответ 4

Как мы работаем?

Ut enim ad minima veniam, quis nostrum exercitationem ulla corporis suscipit laboriosam, nisi ut aliquid ex ea.

Грузоперевозки по всей России

Быстрые и безопасные грузоперевозки

Самые низкие ставки

Логистика и Доставка

Упаковка и Хранение

Комментариев нет:

Отправить комментарий

Страницы

Поиск по вопросам

воскресенье, 9 февраля 2020 г.

Кастомный градиент поверх картинки

Ответы

Ответ 1

Lorem, ipsum. dollar

Ответ 2

Ответ 3

Ответ 4

Как мы работаем?

Ut enim ad minima veniam, quis nostrum exercitationem ulla corporis suscipit laboriosam, nisi ut aliquid ex ea.

Грузоперевозки по всей России

Быстрые и безопасные грузоперевозки

Самые низкие ставки

Логистика и Доставка

Упаковка и Хранение

Комментариев нет:

Отправить комментарий

воскресенье, 9 февраля 2020 г.