Code Ready | Frontend

✅ Как круто оформить текст? Оформление текста очень важно для сайта, если ты сделаешь это круто, то пользователь обратит больше внимания на главный текст. ☑️ Данный эффект сделан с помощью псевдоэлемента :before, там и создается сам border и правильно позиционируется весь эффект. Ниже оставляем HTML и SCSS код для оформления текста. ⤵️

<h1><span>Подпишись на телеграмм канал @code_ready</span></h1>

h1 {
  position: relative;
  width: 18em;
  margin: 3em auto;
  padding: .7em 0;
  font: normal 800 1.4em / 1.5 sans-serif;
  text-align: center;
  text-transform: uppercase;
}
span {
  box-shadow: inset 0 0 0 5em white, 0 0 0 .2em white;
}
h1:before {
  content: '';
  position: absolute;
  top: 0;
  right: 11%;
  bottom: 0;
  left: 11%;
  z-index: -1;
  border: 3px solid coral;
}

@code_redy | #обучение #scss

Хочешь научиться фронтенду? Тогда мы по адресу! Залетай на канал Будни разработчика! Авторские заметки про фронтенд и неочевидное в разработке. Ежедневные посты о фишках вёрстки и фронта, разборы лучших статей и нюансы работы браузеров. Подписывайся!

🔥 Вот он! Самый полезный канал в телеграмме дизайнера! Забирайте: 🟪 Design Case Там только качественные плагины, эксклюзивные подборки, обучение, топовые шрифты, еще и нейросети! Подᴨиᴄᴀᴛьᴄя | 🟪🟪

@code_ready | #мем

‼️ Ребят, вот и дождались, мы создали второй, канал где уже достаточное количество постов. Его название @time_design, мы там публикуем макеты для верстки, плагины для фигмы, оттенки цветов и подборки шрифтов. Давненько мы проводили опрос какой канал создать, и большинство выбрало макеты. Поэтому мы решили объединить к макетам ещё пару идей) Всех с наступающим 🎄и не забудьте подписаться на наш канал @time_design

⚡️ Design Time. Лучший канал, где публикуются полезные материалы как для дизайнеров, так и для программистов. Макеты для верстки, плагины оригинальные цвета, шрифты и многое другое. 🪩 Залетай – @time_design

⚡️ Design Time. Лучший канал, где публикуются полезные материалы как для дизайнеров, так и для программистов. Макеты для верстки, плагины оригинальные цвета, шрифты и многое другое. 🪩 Залетай – @time_design

✅ Шпаргалка с методами объекта console в JS Объект Console служит для доступа к средствам отладки браузера. Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами. 👉 @code_ready | #js #шпаргалка

✅ Как создать невероятный hover эффект? При наведении курсора, данная кнопка плавно и красиво заливается черным цветом. Но её особенность в том, что где бы ты не наводил курсор, оттуда и будет появляться анимация заливки. ☑️ Для создания данного hover эффекта, мы оставляем уже готовый код ниже. ⤵️

<button>Hover Me!</button>

@property --r {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false
}
button {
  place-self: center;
  border: solid 2px #0001;
  padding: 0 1em;
  display: block;
  margin: 200px auto;
  border-radius: 2em;
  box-shadow: inset 1px 3px 1px #fff4;
  background: radial-gradient(circle at var(--x, 0%) var(--y, 0%), black calc(var(--r) - 1px), darkorange var(--r)) border-box;
  color: white;
  font: 1.5em/ 2.25 ubuntu, sans-serif;
  transition: --r .35s;

  &:hover { --r: 100% }
}

function update_position(e) {
  let _t = e.target;
  if(_t.tagName.match(/^button$/i)) {
    let r = _t.getBoundingClientRect();
    ['x', 'y'].forEach(c => 
      _t.style.setProperty(`--${c}`, `${e[`client${c.toUpperCase()}`] - r[c]}px`))
  }
}
addEventListener('mouseover', update_position);
addEventListener('mouseout', update_position)

@code_ready | #практика #scss #js

@code_ready | #мем

@code_ready | #мем

✅ Создание нового канала прошло успешно) Да, мы создали новый, авторский канал по дизайну @time_design, ежедневно выходит по 2 оригинальных поста. Данный канал включает в себя: 1. Макеты для верстки 2. Лучшие плагины для фигмы 3. Подборка красивых шрифтов 4. Интересные оттенки цветов 5. Мемы и опросы Поддержи наш второй канал - @time_design

Перестань тратить часы на поиск нужного материала на просторах Гугла, мы всё сделали за тебя! 💜 Шрифтография — популярная бесплатная кириллица и латиница, которую мы отобрали для тебя! 🧡 Дизайник — только бесплатные полезные плагины и материалы, которые значительно ускорят твою работу над дизайном. 💙 ПроДизайн — новые нейросети, шаблоны для твоих социальных сетей, крутые мокапы, и всё это совершенно бесплатно! 🩷 ПроЦвет — собрали тут цветовые палитры с наглядными примерами где их можно использовать! Подписывайся и получай всё это ежедневно!

✅ Шпаргалка для псевдоклассов группы child При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента. @code_ready | #css #шпаргалка

✅ Как создать цветную анимированную рамку? Данная анимация представляет собой крутящийся спиннер из разных цветов, создавай эффект радуги. Туда можно вставить любую картинку и она также будет находится по центру рамки. ☑️ Ниже мы оставляем пару строк HTML и CSS кода для создания spinner анимации. ⤵️

<div class="spinner"></div>

@property --a {
  syntax: '<angle>'; 
  initial-value: 0deg;
  inherits: false
}
body { display: grid;}
.spinner {
  box-sizing: border-box; 
  place-self: center; 
  width: min(100%, 18em); 
  aspect-ratio: 1; 
  padding: 1.25em;
  border-radius: 50%; 
  box-shadow: 2px 2px 17px #000;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_14.jpg) 
      50%/ cover content-box, 
    conic-gradient(in hsl longer hue from var(--a), hsl(0, 100%, 80%) 0 0);
  animation: spin 2s linear infinite;
}
@keyframes spin { to { --a: 1turn } }

@code_ready | #практика #css

@code_ready | #мем

👩‍💻 Макет "Ujjo" Довольно необычный по дизайну сайт, в котором много различного декоратива. Попробуйте сверстать) ▫️ Жанр: Лендинг ▫️ Сложность: средний ▫️ Язык: EN ▫️ Адаптив: Нет @code_ready | #макет

🚀 Хочешь поднять свой скилл в фронтенде? True Frontender – идеальный выбор для тебя! 🌟 Улучшай свой скилл с True Frontender! Подписывайся и погружайся в уникальный контент: от авторских статей до анализа задач с реальных собеседований. Мы делимся практическими советами и знаниями во фронтенде, чтобы ты стал настоящим экспертом.💡👨‍💻 ✨ Не упусти возможность поднять свой скилл – присоединяйся к @truefrontender!