Code Ready | Frontend

⚡️ 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!

@code_ready | #консоль

✅ Как создать эффект следующий за курсором? Использую данный JavaScript код, помимо обычного 3D текста, можно создать другие крутые эффекты. Курсор следует за движениями мышки, тем самым заставляет эффект двигаться за ним. Делимся уже готовым кодом ниже, для создания эффекта, который движется за курсором. ⤵️

<h1>Mousemove</h1>

h1{
  font-size:72px;
  font-family:'Verdana';
  text-align:center;
  text-transform:uppercase;
}

jQuery(document).ready(function(){
   $('h1').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('h1').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});

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

Как же круто быть сеньором!😎 Удаленка, релокация в ЕС/США, зп в долларах, зимовка в Тайланде, топовые гаджеты от компании - вот что доступно для Senior инженеров, и не важно на чем ты пишешь - JS / PHP / Python, выбирай что по душе. Главное кодить, кодить и еще раз кодить! Вот тебе подборочка каналов, которая облегчит твой путь🔝: ✅Senior Frontend - все про современный фронтенд ✅Frontendinterview - подготовка к собеседованиям по фронту ✅WebCraft - PHP и все что связано с веб разработкой ✅Frontender Libs - всё про библиотеки и готовые решения для фронтенда ✅Python Practics - обучающий канал по Python

✅ Шпаргалка для CSS Grid CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. @code_ready | #css #шпаргалка

😘 Ваш Level Up в мире Frontend-разработки Pro Frontend | Amake — канал для каждого, кто стремится проверить и углубить свои знания, там публикуют: 😀 Тесты на понимание кода с объяснениями 🎄 Разборы задач и вопросов с собеседований 😘 Авторские обучающие статьи простым языком 😀 Макеты и эффекты для ваших пет-проектов 😀 @amake_frontend