This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать крутой эффект при наведении?
Оставляем CSS код ниже для создания интересного hover эффекта, когда пользователь наводит мышкой на текст, к нему добавляеся тень, glitch эффект и он становится объемным: ⬇️
@code_ready | #практика #css
Оставляем CSS код ниже для создания интересного hover эффекта, когда пользователь наводит мышкой на текст, к нему добавляеся тень, glitch эффект и он становится объемным: ⬇️
@font-face {
src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
format("woff2");
font-family: "Meta";
}
body {
background-color: #8357eb;
}
h1 {
transition: all 0.8s;
-webkit-text-stroke: 4px #d6f4f4;
font-variation-settings: "wght" 900, "ital" 1;
font-size: 15rem;
text-align: center;
color: transparent;
font-family: "Meta", sans-serif;
text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
cursor: pointer;
}
h1:hover {
font-variation-settings: "wght" 100, "ital" 0;
text-shadow: none;
}
@code_ready | #практика #css
👍11🔥2
Не существующий тип input
Anonymous Poll
8%
date, radio, checkbox
49%
hidden, range, color
24%
email, password, object
20%
search, tel, datetime
👍9🔥2
✅ Утренняя информация про Microsoft Office
💻 Microsoft Office — офисный пакет приложений, созданных корпорацией Microsoft. В состав этого пакета входит программное обеспечение для работы с различными типами документов. ⬇️
1.📘 Microsoft Word — текстовый процессор, предназначенный для создания, просмотра, редактирования и форматирования текстов статей, деловых бумаг, а также иных документов.
2.🥬 Microsoft Excel — табличный процессор, поддерживает все необходимые функции для создания электронных таблиц любой сложности. Занимает ведущее положение на рынке.
3.🥩 Microsoft PowerPoint — программа подготовки презентаций и просмотра презентаций.
4. Microsoft Teams — корпоративная платформа, объединяющая в рабочем пространстве чат, встречи, заметки и вложения.
5. OneDrive — облачное хранилище, созданное компанией Microsoft в августе 2007 года.
6. Microsoft Outlook — персональный информационный менеджер. В состав Outlook входят: календарь, планировщик задач, записки, менеджер электронной почты, адресная книга. Поддерживается совместная сетевая работа.
7. Microsoft OneNote — программа для создания быстрых заметок и организации личной информации, блокнот с иерархической организацией записей, может служить аналогом обычного канцелярского блокнота.
Также сюда входят многие другие приложения, такие как ACCESS, FRONTPAGE и другие, о которых мы расскажем в следующей теории.
@code_ready | #теория
1.
2.
3.
4. Microsoft Teams — корпоративная платформа, объединяющая в рабочем пространстве чат, встречи, заметки и вложения.
5. OneDrive — облачное хранилище, созданное компанией Microsoft в августе 2007 года.
6. Microsoft Outlook — персональный информационный менеджер. В состав Outlook входят: календарь, планировщик задач, записки, менеджер электронной почты, адресная книга. Поддерживается совместная сетевая работа.
7. Microsoft OneNote — программа для создания быстрых заметок и организации личной информации, блокнот с иерархической организацией записей, может служить аналогом обычного канцелярского блокнота.
Также сюда входят многие другие приложения, такие как ACCESS, FRONTPAGE и другие, о которых мы расскажем в следующей теории.
@code_ready | #теория
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥5
Основные теги для создания таблиц
Anonymous Quiz
9%
table, head, body
37%
table, th, tf
8%
thead, tfoot, tbody
46%
table, thead, tbody
👍11🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать плавную анимацию фигуры?
Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу:
HTML ⤵️
Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу:
HTML ⤵️
<svg viewbox="0 0 999 999">
<path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
body {
background: #333;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: path 5s linear alternate infinite;
}
@keyframes path {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}
👍10🔥4
👍10🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать анимацию Text Filling?
В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️
☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму.
Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️
В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️
☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму.
Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️
span {
font: 700 4em/1 "Oswald", sans-serif;
text-shadow: 0 0 80px rgba(255,255,255,.5);
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: filling 80s linear infinite;
transform: translate3d(0,0,0);
}
@keyframes filling {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@code_ready | #обучение #css👍12🔥5
Какие 2 тега используются для выделения текста жирным?
Anonymous Quiz
40%
<bold>, <strong>
6%
<bold>, <s>
45%
<strong>, <b>
9%
<b>, <s>
👍9🔥5
Мы решили не ограничиваться одними эффектами и расширяем наш канал.
Теперь, здесь публикуются только самые интересные опросы, крутые IT мемы, туториалы и не только.
Навигация:
#обучение — эффект или анимация с кодом и объяснением
#консоль — опрос по типу "что будет выведено в консоль"
#собеседование — разбор вопросов с собеседований
#мем — интересный мем про IT тематику
#шпаргалка — шпаргалка html/css свойств для быстро верстки
#клавиши — крутые горячие клавиши для VScode
#новость — свежие новости про фронтенд или про этот канал.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍8
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать hover эффект для кнопки?
Если вы хотите сделать красивое оформление с простой анимацией и не использовать много кода, в этом смогут помочь hover эффекты. ⬇️
☑️ Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью.
Оставляем готовый CSS код ниже, для создания кнопки с hover эффектом. При наведении кнопка бликом меняет свой градиентный цвет на другой: ⤵️
@code_ready | #обучение #css
Если вы хотите сделать красивое оформление с простой анимацией и не использовать много кода, в этом смогут помочь hover эффекты. ⬇️
☑️ Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью.
Оставляем готовый CSS код ниже, для создания кнопки с hover эффектом. При наведении кнопка бликом меняет свой градиентный цвет на другой: ⤵️
button {
width: 280px;
height: 80px;
font-size: 30px;
font-weight: 600;
color: #fff;
display: block;
margin: 20% auto;
border: none;
background-size: 300% 100%;
border-radius: 50px;
transition: all 1s ease-in-out;
cursor: pointer;
}
button:hover {
background-position: 100% 0;
transition: all 1s ease-in-out;
}
button {
background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}@code_ready | #обучение #css
🔥14👍5
👍13🔥4
✅ Как создать тройную тень?
Эффект фанеры создается множеством теней, где каждый следующий слой смещается все больше и больше, а также происходит чередование цветов. Кроме того, размывание не используется совсем, чтобы сохранить очертания оригинального текста.
Мы делимся готовым CSS кодом ниже для создания тройной тени, данный код собой представляет только саму тень, стилизацию самого текста выбирайте вручную) ⤵️
@code_ready | #обучение #css
Эффект фанеры создается множеством теней, где каждый следующий слой смещается все больше и больше, а также происходит чередование цветов. Кроме того, размывание не используется совсем, чтобы сохранить очертания оригинального текста.
Мы делимся готовым CSS кодом ниже для создания тройной тени, данный код собой представляет только саму тень, стилизацию самого текста выбирайте вручную) ⤵️
h1 {
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
}@code_ready | #обучение #css
👍14🔥3
Какой тег является дочерним для <!DOCTYPE>
Anonymous Quiz
53%
<html>
34%
Никакой
6%
<body>
7%
<head>
🔥9👍5❤1
✅ Создание шрифта Bungee Shade
Bungee Shade - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-family и импортировать его с google fonts. ⬇️
☑️ Также он сразу добавляет интересную обводку и тень для текста, что и делает данный шрифт уникальным.
Ниже вы найдете готовый CSS код для добавления шрифта Bungee Shade: ⤵️
@code_ready | #обучение #css
Bungee Shade - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-family и импортировать его с google fonts. ⬇️
☑️ Также он сразу добавляет интересную обводку и тень для текста, что и делает данный шрифт уникальным.
Ниже вы найдете готовый CSS код для добавления шрифта Bungee Shade: ⤵️
@import url('//fonts.googleapis.com/css?family=Bungee+Shade');
h1 {
color: #2c3e50;
margin-top: 10%;
font-size: 55px;
font-family: 'Bungee Shade';
text-align: center;
margin: auto;
}@code_ready | #обучение #css
👍10🔥4