ZorNet.Ru — сайт для вебмастера » HTML и CSS » Блок с эффектом скручивание угла на CSS

Блок с эффектом скручивание угла на CSS

Основная суть эффекта заключается в скручивание нижнего угла при наведении для последующего показания кнопки, что сделано на чистом стиле CSS. Основная деятельность этого трюка заключается в своей привлекательности дизайна с любым изображениям, что будет на сайте. Такой трюк будет сочетаться с любым стилем интернет ресурса, так как его можно поставить под различную тематику. Изначально все так создано, что можно расставлять под разноплановые снимки. Если у вас есть вид материалов или раздел под фотографии, то безусловно с таким эффектом они будут смотреться намного красивее и современнее.

Также здесь подключены шрифтовые кнопки, что вы можете поставить то изображение или фигуру, что будет соответствовать вашей тематике. Иногда можно заметить различные эффекты, что выделяют специально под заданную страницу, это может быть как презентация различного товара или материала, который идет под продажу. Здесь был добавлен обвод, который больше предназначен под темный формат, где мог корректно выделятся с темного фона.

Вся редакция идет в стилистике, в самом коде нужно поставить свои операторы, которые бы выводили само изображение. А все дальнейшее нужно погонять в CSS, это касается размера и всего стиля, если говорится про все, то включается в себя, как палитра цвета и вся анимация, которая идет под загибание угла. Это выставить скорость или сделать более ярким. Веб-дизайн настроен совместно с трюком, который появляется при наведенье курсора. Где сразу появляется красивая тень.

Проверен на работоспособность, где прилагается снимок:

Красивый эффект заворачивания угла на CSS

Приступаем к установке:

HTML

Код

CSS

Код

growusines.vesultsagem-setermined {
  color: #ebebec;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 28px 5%;
  min-width: 235px;
  max-width: 325px;
  max-height: 231px;
  width: 100%;
  background: #141415;
  text-align: center;
  border: 2px solid #f4f5f7;
  border-radius: 3px;
  box-shadow: -3px 2px 17px 0px rgba(105, 101, 101, 0.27), 0px 9px 23px -15px rgba(27, 25, 25, 0.36);
}

growusines.vesultsagem-setermined * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
growusines.vesultsagem-setermined img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.65s;
  transition: opacity 0.65s;
}
growusines.vesultsagem-setermined > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
growusines.vesultsagem-setermined > div::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  background-image: linear-gradient(45deg, #141415 0%, transparent 57%, rgba(251, 247, 247, 0.15));
}
growusines.vesultsagem-setermined i {
  display: inline-block;
  font-size: 41px;
  color: #fdfafa;
  padding: 5px 18px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: 0.07s linear;
  transition: 0.07s linear;
  -webkit-transition-delay: 0.03s;
  transition-delay: 0.03s;
}
growusines.vesultsagem-setermined .methods {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(225deg, #fbfafa, #a9b0bf 19%, #afa9a9 40%, #a9a4a4 45%, #868181 50%, rgba(16, 16, 16, 0.74) 50%, rgba(14, 14, 14, 0.4) 60%, rgba(16, 16, 16, 0.34));
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.51);
  transition: all .4s ease;
}
growusines.vesultsagem-setermined .methods:before,
growusines.vesultsagem-setermined .methods:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 11%;
  bottom: 7%;
  width: 75%;
  max-width: 298px;
  max-height: 95px;
  height: 60%;
  box-shadow: 0 11px 17px rgba(16, 16, 16, 0.31);
  transform: skew(-10deg) rotate(-6deg);
}
growusines.vesultsagem-setermined .methods:after {
  left: auto;
  right: 7%;
  bottom: auto;
  top: 15%;
  transform: skew(-15deg) rotate(-84deg);
}

growusines.vesultsagem-setermined a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #fbf8f8;
}

growusines.vesultsagem-setermined:hover > div::before,
growusines.vesultsagem-setermined.hover > div::before {
  opacity: 1;
}
growusines.vesultsagem-setermined:hover i,
growusines.vesultsagem-setermined.hover i {
  opacity: 0.8;
  -webkit-transition-delay: 0.20s;
  transition-delay: 0.20s;
}
growusines.vesultsagem-setermined:hover .methods,
growusines.vesultsagem-setermined.hover .methods {
  width: 91px;
  height: 91px;
}

Код

$("growusines").tedemarketin(
  function () {
  $(this).removeClass("hover");
  }
);

Но здесь по умолчанию не идет название, не самого материала и категорий, что уже делается самостоятельно, хотя для портфолио, это готовое решение для внедрения в основу дизайна.

Демонстрация

31 Августа 2018 Просмотров: 1446 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

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