WebTaverna /> js, css, html
WebTaverna /> js, css, html
WebTaverna
Уютное местечко для Frontend-разработчиков admin: @WebT_admin Канал на бирже: https://telega.in/c/WebTaverna
WebTaverna /> js, css, html
Интересный эффект при наведение на карточки с помощью Flexbox CSS HTML разметка <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> Реализовывать данный эффект будем с помощь flex-grow. Зададим всем карточкам flex-grow со значением 1, а при наведение на конкретную карточку будем менять значение на 4. flex-grow - это свойство, определяющие, какое количество свободного пространства флекс-контейнера может занимать текущий элемент. CSS стили .container { display: flex; width: 600px; gap: 5px; } .container div { background: lightblue; width: 5rem; height: 10rem; flex-grow: 1; transition: all 0.5s; } .container div:hover { flex-grow: 4; } .container div:nth-child(odd) { background: tomato; } 👍- если было полезно | ➡️ WebTaverna
WebTaverna /> js, css, html
🖥 Пример создания адаптивной сетки с помощь Flexbox CSS HTML - разметка <div class="container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div> CSS - стили .container { font-family: 'Segoe UI', Tahoma; display: flex; width: 100%; flex-wrap: wrap; } .flex-item { background: #F4BD50; font-size: 1.5rem; display: flex; height: 3.75rem; align-items: center; justify-content: center; flex-grow: 1; flex-basis: 6.25rem; } .flex-item:nth-child(even) { background: #c7a4ff; } 👍- если было полезно | ➡️ WebTaverna
WebTaverna /> js, css, html
5 этапов принятия бага 1. Отрицание 🙅♂️ - "Я не мог допустить баг в коде" 2. Гнев 😡 - "Как я мог допустить баг в коде" 3. Торг 🤨 - "Может это не баг, а фича?" 4. Депрессия ☹️ - "Нет… это всё-таки баг" 5. Принятие 👨💻 - "Ладно, буду фиксить"