shabloni_kodiv_css

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия 		Предыдущая версия
shabloni_kodiv_css [2023/10/18 18:19]
tro создано 		shabloni_kodiv_css [2023/11/21 17:23] (текущий)
tro [Вірівняти по центру обїекту з абсолютним позіціюванням в.2]
Строка 12: Строка 12:
 display: none display: none
 </code> </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>
  • /sites/data/attic/shabloni_kodiv_css.1697653150.txt.gz
  • Последнее изменение: 2023/10/18 18:19
  • — tro