<style>
/*код подходит для блоков категории «Магазин»*/
.js-product-img:hover {
border-radius: 300px; /*закруглить углы на 300px — до формы круга*/
--smooth-corners: 3; /*со сглаживанием 3*/
transition: border-radius 0.5s ease-out; /*за полсекунды*/
}
.js-product-img {
border-radius: 15px; /*вернуться к закруглению 15px*/
transition: border-radius 0.5s ease-out; /*за полсекунды*/
}
/*кусочек кода, чтобы картинка в поп-апе не закруглялась*/
.t-slds__bgimg:hover {
border-radius: 15px;
}
</style>
<style>
/*код подходит для блоков категории «Потоки»*/
.t-feed__post-bgimg:hover {
border-radius: 50px; /*закруглить углы на 50px*/
--smooth-corners: 3; /*со сглаживанием 3*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
.t-feed__post-bgimg {
border-radius: 15px; /*вернуться к закруглению 15px*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
</style>
<style>
/*код подходит для шейпов в Zero Block, не забудьте добавить им класс*/
<style>
.shape .tn-atom:hover {
border-radius: 20px !important; /*закруглить углы на 20px у второго и третьего шейпов*/
transition: border-radius 0.5s !important; /*за 0.5 секунд*/
--smooth-corners: 3; /*со сглаживанием 3*/
}
.shape .tn-atom {
transition: border-radius 0.5s ease-out !important; /*за 0.5 секунд прийти к начальному состоянию*/
}
/*если хотим не скруглить, а «раскруглить» углы*/
.shape-4 .tn-atom:hover, .shape-1 a:hover {
border-radius: 0px !important; /*сделать острые углы у первого и четвертого шейпа*/
transition: border-radius 0.5s !important; /*за 0.5 секунд*/
}
.shape-4 .tn-atom, .shape-1 .tn-atom {
border-radius: 20px; /*изначальное состояние — скругленные углы на 20px*/
--smooth-corners: 3; /*сглаживание 3*/
transition: border-radius 0.5s !important; /*за 0.5 секунд*/
}
/*закруглить углы на 50px*/
--smooth-corners: 3; /*со сглаживанием 3*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
</style>
<style>
/*закругляем углы у аккордеона, блок TX15N2*/
.t668__wrapper:hover {
border-radius: 50px; /*закруглить углы на 50px*/
--smooth-corners: 3; /*со сглаживанием 3*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
.t668__wrapper {
border-radius: 15px; /*вернуться к закруглению 15px*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
</style>
<style>
/*закругляем углы у кнопок, блок SM103*/
.t1036__btn:hover {
border-radius: 50px; /*закруглить углы на 50px*/
--smooth-corners: 3; /*со сглаживанием 3*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
.t1036__btn {
border-radius: 15px; /*вернуться к закруглению 15px*/
transition: border-radius 0.2s ease-out; /*за 0.2 секунды*/
}
</style>