Code Ready | Frontend
20.8K subscribers
721 photos
327 videos
17 files
484 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать slide up анимацию?

Данная анимация представляет собой смену цвета блока через плавный переход. Туда можно вставить любой текст и он также будет появляться вместе с цветом. ⬇️

☑️ Ниже мы оставляем пару строк 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 код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<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 код для создания крутого таймера. ⤵️

<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 кодом ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<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
👍176🔥3😁1
Делаем буллиты для списков

Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :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. ⤵️

  <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". Там я использую всё, о чем рассказывал выше:

<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

В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.

<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</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>, представляющих отдельные пункты выбора.

<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
🔥53👍20👎1
Размещение по центру с помощью html

Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS

@code_ready | #обучение #html
👍54🔥18👎13😁9
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут download

Атрибут download используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.

Этот атрибут особенно полезен, когда вам нужно предоставить пользователям возможность скачать файлы, такие как изображения, документы, видео и другие ресурсы.

➡️ @code_ready | #атрибут #html
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 управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.

Он имеет два значения:
• translate="yes" (по умолчанию) — Должно быть переведено.

• translate="no" — Не должно быть переведено.


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

➡️ @code_ready | #атрибут #html
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 позволяет сделать элемент на веб-странице редактируемым пользователем, позволяя вводить и изменять текст.

Он имеет два значения:
• contenteditable="true" (по умолчанию) — включает редактирование текста.

• contenteditable="false" — отключает редактирование текста.


➡️ @code_ready | #атрибут #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Тег details

Он используется для создания интерактивного раскрывающегося элемента, который позволяет пользователям скрывать или отображать дополнительную информацию.

Для корректной работы интерактивного элемента его заголовок помещается в тег summary. Он обеспечивает визуальную подсказку о наличии скрытого контента и служит удобным способом организации информации на веб-страницах.


➡️ @code_ready | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48🔥13
👩‍💻 Шпаргалка по HTML-сущностям

HTML-сущности — это специальные кодовые обозначения для символов, которые могут быть интерпретированы браузером как часть разметки или недоступные на клавиатуре символы.

📣 Code Ready | #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

Он управляет тем, должно ли содержимое элемента переводиться, если страница переведена с использованием автоматических переводчиков.

Имеет два значения:
• translate="yes" (по умолчанию) — Должно быть переведено.

• translate="no" — Не должно быть переведено.


Советую использовать его, когда нужно предотвратить перевод специфических текстов, таких как имена собственные, бренды или код, который может быть некорректно переведен.

📣 Code Ready | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Познакомимся с download

Это атрибут, который используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.

Особенно полезен, когда вам нужно предоставить пользователям возможность скачать файлы, такие как изображения, документы, видео и другие ресурсы.

📣 Code Ready | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥15