This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать slide up анимацию?
Данная анимация представляет собой смену цвета блока через плавный переход. Туда можно вставить любой текст и он также будет появляться вместе с цветом. ⬇️
☑️ Ниже мы оставляем пару строк HTML и CSS кода для создания slide up анимации.
@code_ready | #практика #html #css
Данная анимация представляет собой смену цвета блока через плавный переход. Туда можно вставить любой текст и он также будет появляться вместе с цветом. ⬇️
☑️ Ниже мы оставляем пару строк HTML и CSS кода для создания slide up анимации.
<div class="box">
<div class="hid-box">
</div>
.box {
height: 90px;
width: 100px;
margin: auto;
overflow: hidden;
background: #b6feb4;
cursor: pointer;
}
.hid-box {
top: 100%;
position: relative;
transition: all .7s ease-out;
background: #b8dbf1;
height: 100%;
}
.box:hover > .hid-box{
top: 0;
}
@code_ready | #практика #html #css
🔥12👍7👎4
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать Hover Slide Effect?
Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.
☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️
@code_ready | #практика #html #css
Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.
☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️
<div id="outer">
<div class="slide left">SLIDE INSIDE </div>
<div class="slide diagonal">SLIDE DIAGONAL </div>
</div>
body {background: #162944;}
.slide {
font-family: sans-serif;
color: #FFF;
border: 2px solid rgb(216, 2, 134);
padding: 18px 36px;
font-size: 14px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #D80286;
-webkit-transition: ease-out 1s;
transition: ease-out 1s;
}
.left:hover {
box-shadow: inset 0 0 0 50px #D80286;
}
.diagonal:hover {
box-shadow: inset 400px 50px 0 0 #D80286;
}
#outer {
display: flex;
justify-content: space-between;
width: 400px;
margin: 100px auto;
}
@code_ready | #практика #html #css
👍12🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание таймера с помощью JS
В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.
Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️
@code_ready | #html #css #js
В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.
Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️
<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>
body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }
#timer { font-size: 2em; margin-bottom: 20px; }
button { font-size: 1em; padding: 10px 20px; cursor: pointer; }
let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
if (t) {
clearInterval(timer);
} else {
timer = setInterval(() => {
t ? s++ : clearInterval(timer);
updateTimer();
}, 1000);
} t ^= 1;}
function resetTimer() {
clearInterval(timer);
timer = undefined;
s = m = h = 0;
updateTimer();
t = 0; }
function updateTimer() {
const padZero = (value) => (value < 10 ? '0' : '') + value;
document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`; }
@code_ready | #html #css #js
👍24🔥5👎2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать анимированные hover кнопки?
Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.
☑️ Я делюсь HTML & SCSS кодом ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️
@code_ready | #обучение #html #scss
Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.
☑️ Я делюсь HTML & SCSS кодом ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️
<div class="buttons">
<button class="fill">Fill In</button>
<button class="pulse">Pulse</button>
</div>
body {
color: #fff;
background: hsl(227, 10%, 10%);
text-align: center;
}
button {
font-size: 20px;
background: none;
border: 2px solid;
margin: 1em;
padding: 1em 2em;
color: var(--color);
transition: 0.75s;
cursor: pointer;
}
.fill:hover, .fill:focus {
box-shadow: inset 0 0 0 2em var(--hover);
border-color: var(--hover);
color: #fff;
}
.pulse:hover, .pulse:focus {
animation: pulse 1s;
box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 var(--hover); }
}
$colors: (fill: #a972cb, pulse: #ef6eae,);
@each $button, $color in $colors {
.#{$button} {
--color: #{$color};
--hover: #{adjust-hue($color, 45deg)};
}
}
@code_ready | #обучение #html #scss
👍17❤6🔥3😁1
✅ Делаем буллиты для списков
Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content. Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete ⤵️
@code_ready | #обучение #html #css
Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content. Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete ⤵️
<ul class="complete">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul class="incomplete">
<li>Item 4</li>
<li>Item 5</li>
</ul>
ul { list-style: none; }
.complete li::before {
content: '🗹 ';
}
.incomplete li::before {
content: '☐ ';
}
ul {
text-align: center;
font-family: Candara;
font-size: 1.7rem;
margin: 0 auto;
}
@code_ready | #обучение #html #css
👍13🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание анимации кадрирования фото
У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.
В примере можно запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked. ⤵️
@code_ready | #обучение #html #css
У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.
В примере можно запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked. ⤵️
<input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />
input {
transform: scale(4);
display: block;
margin: 30px auto;
}
img {
display: block;
margin: 0 auto;
width: 1400px;
height: 900px;
transition: 2s;
}
input:checked + br + img {
width: 500px;
height: 400px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 3s;
}
@code_ready | #обучение #html #css
👍25🔥4
✅ Создание Favicon на сайт
Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.
Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.
Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:
Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.
Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.
Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:
<link rel="icon" type="png" href="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-gmail-128.png">
@code_ready | #практика #html👍36🔥4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание таймера с помощью JS
В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.
@code_ready | #html #css #js
В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.
<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>
let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
if (t) {
clearInterval(timer);
} else {
timer = setInterval(() => {
t ? s++ : clearInterval(timer);
updateTimer();
}, 1000);
} t ^= 1;}
function resetTimer() {
clearInterval(timer);
timer = undefined;
s = m = h = 0;
updateTimer();
t = 0;}
function updateTimer() {
const padZero = (value) => (value < 10 ? '0' : '') + value;
document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`;}
@code_ready | #html #css #js
👍47🔥11👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Тег <details>
Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия.
Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.
Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия.
Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
@code_ready | #практика #html👍58🔥19
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Тег <select>
Селектор выбора позволяет выбрать один конкретный вариант или же выбрать сразу несколько различных вариантов, полезная вещь если вы хотите создать поле с выбором различной информации.
У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)
Селектор выбора позволяет выбрать один конкретный вариант или же выбрать сразу несколько различных вариантов, полезная вещь если вы хотите создать поле с выбором различной информации.
У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)
<select name="select">
<option value="value1">Значение 1</option>
<option value="value2">Значение 2</option>
<option value="value3">Значение 3</option>
</select>
@cod0e_ready | #практика #html👍37🔥10😁1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Тег <optgroup>
Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.
Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.
<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetales">
<option value="carrot">Carrot</option>
<option value="potato" disabled>Potato</option>
</optgroup>
</select>
@code_ready | #практика #html🔥43👍28
✅ Тег <q>
Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.
Этот тег особенно полезен, когда нужно выделить отдельное высказывание или фразу, без необходимости использовать целый абзац для цитирования.
@code_ready | #практика #html
Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.
Этот тег особенно полезен, когда нужно выделить отдельное высказывание или фразу, без необходимости использовать целый абзац для цитирования.
@code_ready | #практика #html
🔥53👍20👎1
✅ Размещение по центру с помощью html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
👍54🔥18👎13😁9
This media is not supported in your browser
VIEW IN TELEGRAM
Атрибут download используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.
Этот атрибут особенно полезен, когда вам нужно предоставить пользователям возможность скачать файлы, такие как изображения, документы, видео и другие ресурсы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36🔥8👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Атрибут translate управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.
Он имеет два значения:
• translate="yes" (по умолчанию) — Должно быть переведено.
• translate="no" — Не должно быть переведено.
Этот атрибут полезен, когда нужно предотвратить перевод специфических текстов, таких как имена собственные, бренды или код, который может быть некорректно переведен.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥11
This media is not supported in your browser
VIEW IN TELEGRAM
Атрибут contenteditable позволяет сделать элемент на веб-странице редактируемым пользователем, позволяя вводить и изменять текст.
Он имеет два значения:
• contenteditable="true" (по умолчанию) — включает редактирование текста.
• contenteditable="false" — отключает редактирование текста.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
Он используется для создания интерактивного раскрывающегося элемента, который позволяет пользователям скрывать или отображать дополнительную информацию.
Для корректной работы интерактивного элемента его заголовок помещается в тег summary. Он обеспечивает визуальную подсказку о наличии скрытого контента и служит удобным способом организации информации на веб-страницах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48🔥13
HTML-сущности — это специальные кодовые обозначения для символов, которые могут быть интерпретированы браузером как часть разметки или недоступные на клавиатуре символы.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥77👍21🤝10
This media is not supported in your browser
VIEW IN TELEGRAM
Он управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.
Имеет два значения:
• translate="yes" (по умолчанию) — Должно быть переведено.
• translate="no" — Не должно быть переведено.
Советую использовать его, когда нужно предотвратить перевод специфических текстов, таких как имена собственные, бренды или код, который может быть некорректно переведен.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Это атрибут, который используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.
Особенно полезен, когда вам нужно предоставить пользователям возможность скачать файлы, такие как изображения, документы, видео и другие ресурсы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥15