shabloni_kodiv_css [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Шаблони кодів CSS ======
===== Сховати блок візуально =====
Місце буде займати
<code>
opacity: 0;
visibility: hidden;
pointer-events: none;
</code>
===== Сховати блок фактично =====
Не буде займати місця
<code>
display: none
</code>
===== Вірівняти по центру flex =====
<code>
.test-box{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
}
</code>
===== Вірівняти по центру обїекту з абсолютним позіціюванням в.1 =====
<code>
.centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%, -50%);
}
</code>
===== Вірівняти по центру обїекту з абсолютним позіціюванням в.2 =====
<code>
.centered{
inset: 0;
margin: auto;
}
</code>
===== Анімація кнопки (on-hover) 1 =====
HTML
<code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
    </header>

    <section class="one">
<button type="button" class="btn">On-Hover</button>
    </section>
</body>
</html>
</code>
CSS
<code>
.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;
}
</code>