Эксперименты Will O The Wisp

Страница: « 1 … 6 7 8 9 10 … 19 »

Сообщений 71 страница 80 из 187

Поделиться7124.10.22 15:06

Автор: Deff
Жерар Депардье
Уважение: +3482
Достижения/подарки: 4 4
Наградные баллы: 122

Will O The Wisp
Ну оно нужно стиль через селектор не через класс, а через атрибут [alt]

img[alt="Smile"]{}

Портфолио https://forumd.ru/viewtopic.php?id=6184

Поделиться7224.10.22 15:44

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

Deff
не представляю как и почему, но оно решило работать
правда, забавным образом
как написано в хтмл-буке: Проверяйте. Возможны странности (с)

Поделиться7311.11.22 08:30

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

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

Код:

[html]
<style>
* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}
:active, :hover, :focus {
  outline: 0!important;
  outline-offset: 0;
}
::before,
::after {
  position: absolute;
  content: "";
}

.btn-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: 10px auto 35px;
}
.btn {
  position: relative;
  display: inline-block;
  width: auto; height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px 25px 15px;
  min-width: 150px;
}
  .btn span {         
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 0; left: 0;
    width: 100%;
    padding: 15px 20px;
    transition: 0.3s;
  }

/*--- btn-1 ---*/
.btn-1::before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}
.btn-1 span {
  color: rgb(255,255,255);
  border: 1px solid rgb(28, 31, 30);
  transition: 0.2s 0.1s;
}
.btn-1 span:hover {
  color: rgb(28, 31, 30);
  transition: 0.2s 0.1s;
}

/* 1.hover-filled-slide-down */
.btn.hover-filled-slide-down::before {
  bottom: 0; left: 0; right: 0; 
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-down:hover::before {
  height: 0%;
}

/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up::before {
  top: 0; left: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover::before {
  height: 0%;
}

/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left::before {
  top: 0; bottom: 0; left: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover::before {
  width: 0%;
}

/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
  width: 0%;
}

/* 5. hover-filled-opacity */
.btn.hover-filled-opacity::before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 1;
}
.btn.hover-filled-opacity:hover::before {
  opacity: 0;
}

/*--- btn-2 ---*/
.btn-2::before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}
.btn-2 span {
  color: rgb(28, 31, 30);
  border: 1px solid rgb(28, 31, 30);
  transition: 0.2s;
}  
.btn-2 span:hover {
  color: rgb(255,255,255);
  transition: 0.2s 0.1s;
}

/* 6. hover-slide-down */
.btn.hover-slide-down::before {
  top: 0; left: 0; right: 0; 
  height: 0%; width: 100%;
}
.btn.hover-slide-down:hover::before {
  height: 100%;
}

/* 7. hover-slide-up */
.btn.hover-slide-up::before {
  bottom: 0; left: 0; right: 0; 
  height: 0%; width: 100%;
}
.btn.hover-slide-up:hover::before {
  height: 100%;
}

/* 8. hover-slide-left */
.btn.hover-slide-left::before {
  top: 0; bottom: 0; right: 0; 
  height: 100%; width: 0%;
}
.btn.hover-slide-left:hover::before {
  width: 100%;
}

/* 9. hover-slide-right */
.btn.hover-slide-right::before {
  top: 0; bottom: 0; left: 0; 
  height: 100%; width: 0%;
}
.btn.hover-slide-right:hover::before {
  width: 100%;
}

/* 10. hover-opacity */
.btn.hover-opacity::before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 0;
}
.btn.hover-opacity:hover::before {
  opacity: 1;
}

/*--- btn-3 ---*/
.btn-3 {
  padding: 5px;
}
.btn-3 span {
  color: rgb(255, 255, 255);
  background-color: rgb(54, 56, 55);
}
.btn-3::before,
.btn-3::after {
  background: transparent;
  z-index: 2;
}

/* 11. hover-border-1 */
.btn.hover-border-1::before,
.btn.hover-border-1::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-1::before {
  top: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1::after {
  bottom: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1:hover::before,
.btn.hover-border-1:hover::after {
  width: 99%;
  height: 98%;
}

/* 12. hover-border-2 */
.btn.hover-border-2::before,
.btn.hover-border-2::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-2::before {
  bottom: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2::after {
  top: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2:hover::before,
.btn.hover-border-2:hover::after {
  width: 99%;
  height: 99%;
}

/* 13. hover-border-3 */
.btn.hover-border-3::before,
.btn.hover-border-3::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-3::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3::after {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3:hover::before,
.btn.hover-border-3:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   
}

/* 14. hover-border-4 */
.btn.hover-border-4::before,
.btn.hover-border-4::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4::before {
  bottom: 0; left: -1px;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4::after {
  top: 0; right: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover::before,
.btn.hover-border-4:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   
}

/* 15. hover-border-5 */
.btn.hover-border-5::before,
.btn.hover-border-5::after {
  width: 0%; height: 0%;
  opacity: 0;
}
.btn.hover-border-5::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}
.btn.hover-border-5::after {
  bottom: 0; left: 0px;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-5:hover::before,
.btn.hover-border-5:hover::after {
  width: 100%; height: 96%;
  opacity: 1;
}
.btn.hover-border-5:hover::before {
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */
}
.btn.hover-border-5:hover::after {
  transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s; 
} 

/*--- btn-4 ---*/
.btn-4 span {
  color: rgb(28, 31, 30);
  background-color: rgb(245,245,245);
}
.btn-4 span:hover {
  color: rgb(54, 56, 55);
}
.btn-4::before,
.btn-4::after {
  width: 15%; height: 2px;
  background-color: rgb(54, 56, 55);
  z-index: 2;
}

/* 16. hover-border-6 */
.btn.hover-border-6::before,
.btn.hover-border-6::after {
  top: 0;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6::before {
  right: 50%;
}
.btn.hover-border-6::after {
  left: 50%;
}
.btn.hover-border-6:hover::before,
.btn.hover-border-6:hover::after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-6 span::before,
.btn.hover-border-6 span::after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span::before {
  top: 0; left: 0;
  border-left: 2px solid rgb(54, 56, 55);
  border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span::after {
  top: 0; right: 0;
  border-right: 2px solid rgb(54, 56, 55);
  border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover::before,
.btn.hover-border-6 span:hover::after {
  width: 50%; height: 96%;
  opacity: 1;
  transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
}

/* 17. hover-border-7 */
.btn.hover-border-7::before,
.btn.hover-border-7::after {
  bottom: 0;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7::before {
  right: 50%;
}
.btn.hover-border-7::after {
  left: 50%;
}
.btn.hover-border-7:hover::before,
.btn.hover-border-7:hover::after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-7 span::before,
.btn.hover-border-7 span::after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span::before {
  bottom: 0; left: 0;
  border-left: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span::after {
  bottom: 0; right: 0;
  border-right: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover::before,
.btn.hover-border-7 span:hover::after {
  width: 50%; height: 96%;
  opacity: 1;
  transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
}

/* 18. hover-border-8 */
.btn.hover-border-8::before,
.btn.hover-border-8::after {
  bottom: 0;
  width: 15%;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-8::before {
  right: 50%;
}
.btn.hover-border-8::after {
  left: 50%;
}
.btn.hover-border-8:hover::before {
  width: 50%;
  transition: width 0.2s ease-in;   
}
.btn.hover-border-8:hover::after {
  width: 50%;
  transition: width 0.1s ease-in;   
}

.btn.hover-border-8 span::before,
.btn.hover-border-8 span::after {
  width: 0%; height: 0%;
  bottom: 0;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-8 span::before {
  left: 0%;
  border-left: 2px solid rgb(54, 56, 55);
  transition: height 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-8 span:hover::before {
  height: 96%;
  opacity: 1;
  transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-8 span::after {
  right: 0%;
  border-right: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
}
.btn.hover-border-8 span:hover::after {
  width: 99%; height: 96%;
  opacity: 1;
  transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
}

/* 19. hover-border-9 */
.btn.hover-border-9::before,
.btn.hover-border-9::after {
  bottom: 0;
  width: 15%;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-9::before {
  right: 50%;
}
.btn.hover-border-9::after {
  left: 50%;
}
.btn.hover-border-9:hover::before {
  width: 50%;
  transition: width 0.1s ease-in;   
}
.btn.hover-border-9:hover::after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-9 span::before,
.btn.hover-border-9 span::after {
  width: 0%; height: 0%;
  bottom: 0;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-9 span::after {
  right: 0%;
  border-right: 2px solid rgb(54, 56, 55);
  transition: height 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-9 span:hover::after {
  height: 96%;
  opacity: 1;
  transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-9 span::before {
  left: 0%;
  border-left: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
}
.btn.hover-border-9 span:hover::before {
  width: 98.5%; height: 96%;
  opacity: 1;
  transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
}

/* 20. hover-border-10 */
.btn.hover-border-10::before,
.btn.hover-border-10::after {
  left: 0%;
  height: 30%;
  width: 2px;
  transition: height 0.2s 0.35s ease-out;
}
.btn.hover-border-10::before {
  top: 50%;
}
.btn.hover-border-10::after {
  bottom: 50%;
}
.btn.hover-border-10:hover::before {
  height: 50%;
  transition: height 0.2s ease-in;   
}
.btn.hover-border-10:hover::after {
  height: 50%;
  transition: height 0.1s ease-in;   
}

.btn.hover-border-10 span::before,
.btn.hover-border-10 span::after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-10 span::after {
  bottom: 0; left: 0%;
  border-bottom: 2px solid rgb(54, 56, 55);
  transition: width 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-10 span:hover::after {
  width: 100%;
  opacity: 1;
  transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-10 span::before {
  top: 0%; left: 0%;
  border-top: 2px solid rgb(54, 56, 55);
  border-right: 2px solid rgb(54, 56, 55);
  transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;   
}
.btn.hover-border-10 span:hover::before {
  width: 98.5%; height: 96%;
  opacity: 1;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;   
}

/*--- btn-5 ---*/
.btn-5 span {
  color: rgb(28, 31, 30);
  border: 2px solid rgb(249, 211, 27);
  transition: 0.2s;
}
.btn-5 span:hover {
  background-color: rgb(245,245,245);
}

/* 21. hover-border-11 */
.btn.hover-border-11::before,
.btn.hover-border-11::after {
  width: 100%; height: 2px;
  background-color: rgb(54, 56, 55);
  z-index: 2;
  transition: 0.35s; 
}
.btn.hover-border-11::before {
  top: 0; right: 0;
}
.btn.hover-border-11::after {
  bottom: 0; left: 0;
}
.btn.hover-border-11:hover::before,
.btn.hover-border-11:hover::after {
  width: 0%;
  transition: 0.2s 0.2s ease-out; 
}

.btn.hover-border-11 span::before,
.btn.hover-border-11 span::after {
  width: 2px; height: 100%;
  background-color: rgb(54, 56, 55);
  z-index: 2;
  transition: 0.25s; 
}
.btn.hover-border-11 span::before {
  bottom: 0; right: -2px;
}
.btn.hover-border-11 span::after {
  top: 0; left: -2px;
}
.btn.hover-border-11 span:hover::before,
.btn.hover-border-11 span:hover::after {
  height: 0%;
}


</style>

<div class="btn-holder">
  <button class="btn btn-1 hover-filled-slide-down">
    <span>hover me</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-up">
    <span>hover me</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-left">
    <span>hover me</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-right">
    <span>hover me</span>
  </button>
  <button class="btn btn-1 hover-filled-opacity">
    <span>hover me</span>
  </button>
</div>
<div class="btn-holder">
  <button class="btn btn-2 hover-slide-down">
    <span>hover me</span>
  </button>
  <button class="btn btn-2 hover-slide-up">
    <span>hover me</span>
  </button>
  <button class="btn btn-2 hover-slide-left">
    <span>hover me</span>
  </button>
  <button class="btn btn-2 hover-slide-right">
    <span>hover me</span>
  </button>
  <button class="btn btn-2 hover-opacity">
    <span>hover me</span>
  </button>
</div>
<div class='btn-holder'>
  <button class="btn btn-3 hover-border-1">
    <span>hover me</span>
  </button>
  <button class="btn btn-3 hover-border-2">
    <span>hover me</span>
  </button>
  <button class="btn btn-3 hover-border-3">
    <span>hover me</span>
  </button>
  <button class="btn btn-3 hover-border-4">
    <span>hover me</span>
  </button>
  <button class="btn btn-3 hover-border-5">
    <span>hover me</span>
  </button>
</div>
<div class="btn-holder">
  <button class="btn btn-4 hover-border-6">
    <span>hover me</span>
  </button>
  <button class="btn btn-4 hover-border-7">
    <span>hover me</span>
  </button>
  <button class="btn btn-4 hover-border-8">
    <span>hover me</span>
  </button>
  <button class="btn btn-4 hover-border-9">
    <span>hover me</span>
  </button>
  <button class="btn btn-4 hover-border-10">
    <span>hover me</span>
  </button>
</div>
<div class="btn-holder">
  <button class="btn btn-5 hover-border-11">
    <span>hover me</span>
  </button>
</div>

[/html]

Поделиться7411.11.22 10:29

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

специальный эффект для картинок
попробуйте у себя!
за цвет до наведения отвечает цвет в outline, если удалить эту строку совсем, будет раздробленная картинка
в исходном варианте размер картинки никак не определен, но можно если очень хочется. самое главное не забыть указать точное положение img к которому хочется применить стиль, иначе такими будут все картинки

Код:

[html]
<style>
img {
  --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
  --m:
    left   var(--_i,0%) top    var(--_g),
    bottom var(--_i,0%) left   var(--_g),
    top    var(--_i,0%) right  var(--_g),
    right  var(--_i,0%) bottom var(--_g);
  -webkit-mask: var(--m);
          mask: var(--m);
  outline: 100vmax solid #b3c3d4;
  outline-offset: -100vmax;
  transition: .3s linear;
  cursor: pointer;
}
img:hover {
  --_i: 10%;
  outline-color: #0000;
}

</style>


<img src="https://i.pinimg.com/originals/76/07/7f/76077f86750d65c0674809fb338d2483.gif" alt="лисичка" style="width: 200px;">
<img src="https://i.pinimg.com/originals/74/c5/8e/74c58e7279783549bfb16aa872022c4c.gif" alt="совушка" style="width: 200px;">



[/html]

Поделиться7511.11.22 18:06

Автор: Gerda
технозомби
Уважение: +9803
Достижения/подарки: 8 16
Наградные баллы: 1612
Проверенный спец:
FD
FD

[html]
<style>
img.wotw-pics {
--_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
--m:
left var(--_i,0%) top var(--_g),
bottom var(--_i,0%) left var(--_g),
top var(--_i,0%) right var(--_g),
right var(--_i,0%) bottom var(--_g);
-webkit-mask: var(--m);
mask: var(--m);
outline: 100vmax solid #b3c3d4;
outline-offset: -100vmax;
transition: .3s linear;
cursor: pointer;
}
img.wotw-pics:hover {
--_i: 10%;
outline-color: #0000;
}

</style>

[/html]

круууто. над в каталог добавить.
где ты такую прелесть находишь?

Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться7611.11.22 18:47

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

Герда
кодепен листаю
по большей части ничего толком не работает, остальное нам не подходит для платформы, где-то просто убрать двойные стили
там сложно понять поиск, он дает одно и то же, но случайно потом всплывают хорошие темы. чаще всего они просто лежат у меня на тестах уже исправленные, потому концы не найти

вот модно в последнее время: галерея

Код:

[html]<style>
.gallery {
  --g: 8px;   /* the gap */
  --s: 400px; /* the size */
  
  display: grid;
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1/1;
  width: 400px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(var(--_x,0),var(--_y,0));
  cursor: pointer;
  z-index: 0;
  transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
  --_i: 1;
  z-index: 1;
  transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
  transform: translate(0,0);
}
.gallery > img:nth-child(1) {
  clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
  --_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
  clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: var(--g)
}
.gallery > img:nth-child(3) {
  clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
  --_y: var(--g)
}
.gallery > img:nth-child(4) {
  clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
  --_x: calc(-1*var(--g))
}
</style>

<div class="gallery">
  <img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
  <img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
  <img src="https://picsum.photos/id/211/400/400" alt="a small boat">
  <img src="https://picsum.photos/id/28/400/400" alt="a forest">
</div>
[/html]

Поделиться7711.11.22 18:48

Автор: Gerda
технозомби
Уважение: +9803
Достижения/подарки: 8 16
Наградные баллы: 1612
Проверенный спец:
FD
FD

[html]<style>
.gallery {
--g: 8px; /* the gap */
--s: 400px; /* the size */

display: grid;
border-radius: 50%;
}
.gallery > img {
grid-area: 1/1;
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: translate(var(--_x,0),var(--_y,0));
cursor: pointer;
z-index: 0;
transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
--_i: 1;
z-index: 1;
transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
transform: translate(0,0);
}
.gallery > img:nth-child(1) {
clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
--_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: var(--g)
}
.gallery > img:nth-child(3) {
clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
--_y: var(--g)
}
.gallery > img:nth-child(4) {
clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: calc(-1*var(--g))
}
</style>

<div class="gallery">
<img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
<img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
<img src="https://picsum.photos/id/211/400/400" alt="a small boat">
<img src="https://picsum.photos/id/28/400/400" alt="a forest">
</div>
[/html]

круть

Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться7811.11.22 19:00

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

Герда
и темы с svg фильтрами которые работают в хтмл

Код:

[html]<style>

.bg {
  position: absolute;
  margin: auto;
  cursor: pointer;
  top:0; bottom:0;
  left:0; right:0;
  width: 600px;
  height: 300px;
  background: url(https://i.pinimg.com/564x/2b/cd/f2/2bcdf2ce879e5b38680600120acdd86f.jpg) no-repeat center;
  background-size: contain;
}

.bg1 { filter: url('#heat'); }
.bg2 { filter: url('#parallax'); }
.bg3 { filter: url('#blur'); }

#label {
  position: absolute;
  margin: auto;
  top:0; bottom:0;
  left:0; right:0;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 100px;
  font-family: sans-serif;
  color: white;
  opacity: 0.3;
}
</style>
<script>

var filters = ['bg1', 'bg2', 'bg3'];
var labels = ['HEAT', 'PARALLAX', 'BLUR'];
var img = document.getElementById("img");
var lbl = document.getElementById("label");
var sel = 1;

img.onclick = function() {
  img.className = 'bg ' + filters[sel];
  lbl.innerHTML = labels[sel++];
  if (sel == 3) {
    sel = 0;
  }
}
</script>
<div class="bg bg1" id="img">
  <h1 id="label">Текст</h1>
</div>

<svg>
  <defs>
    <filter id="heat">
      <feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="3" result="warp">
      </feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="40" in="SourceGraphic" in2="warp">
        <animate attributeName="scale" dur="5s" values="0 ; 10 ; 30 ; 10 ; 0" 
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>
    
    <filter id="parallax">
      <feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="20" in="SourceGraphic">
        <animate attributeName="scale" dur="2s" values="0 ; 20 ; 0" 
        keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>
  </defs> 
  
  <filter id="blur">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="15,0">
        <animate attributeName="stdDeviation" dur="4s" values="0,0 ; 10,0 ; 0,1" 
        keyTimes="0 ;0.5; 1" repeatCount="indefinite"/>
      </feGaussianBlur>
    </filter>
  </defs>
</svg>[/html]

даже с конструктором https://fffuel.co/gggrain/

Поделиться7911.11.22 19:27

Автор: Automation Baby
Атаманша
Уважение: +8323
Достижения/подарки: 7 6
Наградные баллы: 1 085

Will O The Wisp
Я добавлю все три штуки, но уже завтра, наверное.

Поделиться8014.11.22 08:10

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

вижу по коду, что автор тот же, снова галерея

Код:

[html]
<style>
.gallery {
  display: grid;
  width: min(800px,100%); /* control the size here */
  margin: 50px auto;
  grid: repeat(4,1fr)/repeat(6,1fr); 
  aspect-ratio: 6/4;
}
.gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(30%);
  transition: .3s;
}
.gallery:hover img {
  filter: grayscale()
}
.gallery img:hover {
  filter: grayscale(0%)
}
.gallery img:nth-child(1) {
  grid-area: 1/1/span 2/span 2;
  clip-path: polygon(0 0,100% 0,0 100%);
}
.gallery img:nth-child(2) {
  grid-area: 1/2/span 3/span 3;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transform: translate(calc(50%/-3))
}
.gallery img:nth-child(3) {
  grid-area: span 4/span 4/-1/-1;
  clip-path: polygon(0 0,100% 0,100% 100%);
}
.gallery img:nth-child(4),
.gallery img:nth-child(5){
  grid-area: span 2/1/-1/span 2;
  clip-path: polygon(25% 0,100% calc(300%/5),50% 100%,0 100%,0 calc(100%/5));
  min-height: 125%;
  place-self: end;
}
.gallery img:nth-child(5) {
  grid-area: span 2/span 5/-1/-1;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}

</style>


<div class="gallery">
  <img src="https://i.pinimg.com/564x/84/e6/96/84e696db29cef67fbe906e13b2de2470.jpg">
  <img src="https://i.pinimg.com/564x/f9/a1/3a/f9a13a63dc3a34c13ed2084c73480a98.jpg">
  <img src="https://i.pinimg.com/564x/f0/cf/da/f0cfda820d59c3d8b712e23d4fb9560e.jpg" title="нечто">
  <img src="https://i.pinimg.com/564x/d6/af/bb/d6afbb8e8b39797786c0659f4b9bfbcc.jpg">
  <img src="https://i.pinimg.com/564x/b7/16/17/b716175e7ad48f5a8f778ab1aa9c6dda.jpg">
</div>


[/html]

Страница: « 1 … 6 7 8 9 10 … 19 »

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

GEMcross

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

📣 Наш проект: Ролевой поисковик

❤️ Поддержать проект

SPECIAL OFFER: We distribute designs for free

Support the project

Информация о пользователе

Эксперименты Will O The Wisp

Сообщений 71 страница 80 из 187

Поделиться7124.10.22 15:06

Поделиться7224.10.22 15:44

Поделиться7311.11.22 08:30

Поделиться7411.11.22 10:29

Поделиться7511.11.22 18:06

Поделиться7611.11.22 18:47

Поделиться7711.11.22 18:48

Поделиться7811.11.22 19:00

Поделиться7911.11.22 19:27

Поделиться8014.11.22 08:10