КодВеб | Дизайн База

👨‍💻 CSS Hero with image background on text. Текст с изображением внутри. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

‼️Всем кодерам посвящается‼️ Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования. 🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

❔ Как сделать красивую кнопку для сайта? Кнопка — это элемент интерфейса, при нажатии на который происходит связанное с ним действие или событие. Ссылка же связывает документы между собой, при клике происходит переход на другую страницу (за исключением якорей, которые позволяют перемещаться в пределах одной страницы). HTML:

<a href="" class="button-5"><span class="link-content">Читать далее</span></a>

CSS:

.button-5 {
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding: 15px 30px;
    color: #766AD0;
    border: 1px solid #3A374C;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: .3s linear;
}
.button-5:before, .button-5:after, .link-content:before, .link-content:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 15px;
    transition: .3s linear;
}
.button-5:before {
    left: -1px;
    top: -1px;
    border-left: 1px solid #614DFF;
    border-top: 1px solid #614DFF;
}
.button-5:after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid #614DFF;
    border-right: 1px solid #614DFF;
}
.link-content:after {
    right: -1px;
    top: -1px;
    border-right: 1px solid #614DFF;
    border-top: 1px solid #614DFF;
}
.link-content:before {
    left: -1px;
    bottom: -1px;
    border-bottom: 1px solid #614DFF;
    border-left: 1px solid #614DFF;
}
.button-5:hover {
    color: #614DFF;
    border-color: #614DFF;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

🤦‍♂️ Ребята, вы издеваетесь?? Мы бесплатно собрали лучшие макеты веб-сайтов и лендингов для Figma разной сложности, чтобы вы могли создать свое крутое портфолио. Вам нужно просто подписаться, и вы до сих пор сидите ждете ? Если не хотите всю жизнь работать на дядю, а быть дизайнером своей карьеры и жизни, то просто переходите уже по ссылке и подписывайтесь на наш канал.  У нас можно найти материалы не только для верстки, но и подтянуть насмотренность или вдохновиться на новые идеи. Наши макеты содержат все необходимые элементы и стили для создания красивого и функционального дизайна. Присоединяйтесь к нам прямо сейчас и станьте лучшим в своей области! 👉 @maketforfigma

👩‍💻 GO SURF Одностраничный сайт о серфинге. 🟠 Сложность: Сложная 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Навык работы в Linux консоли так же необходим, как умение читать. В сообществе @bashdays действующий девопс, самобытно и с долей юмора рассказывает о том, чего в книгах обычно не пишут и на вайтишных курсах не учат. - клёвые кейсы про shell / linux - неочевидные способы дебага - бест практики и мастхэв утилиты - обратная связь от подписчиков Забудь про скучную теорию, здесь только практика. А самое главное — всё разжёвано до мелочей. С полученными знаниями ты упростишь ежедневный workflow и повысишь свой ценник на рынке. Подписывайся и качай свой hard-skill вместе с нами 🤟

👨‍💻 Complex navigation Вкладка навигации по разделам сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Приветствую вас, увлеченные Frontend-разработкой! 🌟 Ощущаете некоторую непонятность в теоретической базе? Сложно верстать макеты? Боитесь собеседований? Не волнуйтесь, канал Frontend Portal здесь, чтобы помочь вам в этом захватывающем мире Frontend-разработки! 🤔 Начнем с того, что давайте честно признаемся: мы все начинали с нуля и тоже сталкивались с трудностями. Именно поэтому Frontend Portal создал самую понятную и интерактивную среду для изучения Что же мы предлагаем: ✅ Уникальные макеты для верстки с уже написанным кодом, чтобы вы могли сравнивать и учиться ✅ Вопросы с собеседований крупнейших компаний ✅ Практические опросы и задачи с подробными объяснениями ✅ Теория, проиллюстрированная яркими примерами ✅ Современные фишки и возможности Вместе мы создаем волшебный портал в мир Frontend-разработки. Присоединяйтесь к Frontend Portal и станьте настоящим магом в искусстве фронтенда! 🪄✨ 🔗 Присоединяйтесь: Frontend Portal

❔ Как сделать кнопку с анимацией загрузки? Кнопка — это элемент интерфейса, при нажатии на который происходит связанное с ним действие или событие. Подключение HTML:

<a href="#" class="glo">Кнопка с анимацией загрузки</a>

Подключение css:

a.glo{
 color:#00c6ff;
 padding: 15px 20px;
 text-transform: uppercase;
 width:350px;
 text-decoration:none;
 text-align:center;
 margin:30px 0;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 400 18px tahoma;
 border: 1px solid #00C6FF;
}
a.glo:hover {
background-position: 0 0;
color:#fff;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

👩‍💻 SOS Одностраничный сайт о компьютерной игре. 🟠 Сложность: Средняя 🟠 Адаптивность: Есть Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Не могу найти работу. Нет откликов на резюме. Не зовут на собеседование. 😞 Эти проблемы возникают у многих в процессе поиска работы и решать их нужно с сертифицированным карьерным консультантом, таким как Оксана Синягина. Оксана работает в сфере IT уже 17 лет и  отлично знает рынок труда в IT. В своем Телеграм канале Оксана делится: ✅  Актуальными трендами и возможностями, которые предлагает IT-сфера. 💡 ✅  Рассказывает, какие навыки и знания нужны для успешного старта и роста в айти. 🚀 ✅  Делится полезными материалами для самообразования и развития профессиональных компетенций. 📚 ✅  Раскрывает секреты успешного прохождения собеседований и взаимодействия с работодателями. 🗣 А недавно у Оксаны вышел пост о самых эффективных платформах для поиска работы в IT. 🌐 Подпишись на канал Оксаны и получи бесплатный гайд "Как настроить LinkedIn, чтобы он работал на вас" 🎁 >> Перейти на канал Реклама. Синягина О.В. ИНН 526309956960. Erid LjN8JydtL

👨‍💻 Correct button scaling on: active based on width & height Кнопки разного размера с анимацией при нажатии. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы