====== Шаблони кодів CSS ======
===== Сховати блок візуально =====
Місце буде займати
opacity: 0;
visibility: hidden;
pointer-events: none;
===== Сховати блок фактично =====
Не буде займати місця
display: none
===== Вірівняти по центру flex =====
.test-box{
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
text-align: center;
}
===== Вірівняти по центру обїекту з абсолютним позіціюванням в.1 =====
.centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%, -50%);
}
===== Вірівняти по центру обїекту з абсолютним позіціюванням в.2 =====
.centered{
inset: 0;
margin: auto;
}
===== Анімація кнопки (on-hover) 1 =====
HTML
Document
CSS
.btn{
position: relative;
overflow: hidden;
}
.btn::before{
content:'';
position: absolute;
top: -10px;
bottom: -10px;
left: -30px;
width: 10px;
rotate: 35deg;
background-color: #fff;
}
.btn:hover::before{
left: calc(100% + 30px);
transition: left 500ms;
}