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

👨‍💻Scroll Driven Micro Interactions Интерактивная страница с поиском и подборкой Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как сделать качественную карточку товара с оценкой и не только? HTML:

<div class="product-item">
  <div class="product-img">
    <a href="">
      <img src="image.jpg">
    </a>
  </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="stars"></div>
    <span class="price">₽ 1999</span>
    <div class="actions">
      <div class="add-to-cart">
        <a href="" class="cart-button">В корзину</a>
      </div>
      <div class="add-to-links">
        <a href="" class="wishlist"></a>
        <a href="" class="compare"></a>
      </div>
      </div>
    </div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.product-item {
   width: 300px;
   margin: 0 auto;
   padding: 10px 10px 5px 10px;
   border: 1px solid #eee;
   background: white;
   font-family: "Open Sans";
   overflow: hidden;
   transition: .4s linear;
}
.product-img {
   transition: 1s ease-in-out;
}
.product-img:hover {
   transform: scale(1.1);
}
.product-img img {
   display: block;
   width: 100%;
}
.product-list {
   margin-top: 15px;
}
.product-list h3 {
   font-weight: 700;
   color: #39404B;
   margin: 0;
   text-transform: uppercase;
   font-size: 14px;
   line-height: 2;
}
.price {
   color: #E34D38;
   display: block;
   margin-bottom: 12px;
}
.stars {
   height: 14px;
   line-height: 14px;
   margin: 7px 0;
}
.stars:before {
   content: "\f005\f005\f005\f005\f006";
   color: #EFB71C;
   font-size: 14px;
   font-family: FontAwesome;
}
.actions {
   border-top: 1px solid #eee;
   padding-top: 4px;
   font-size: 13px;
   height: 30px;
   line-height: 30px;
}
.actions:after {
   content: "";
   display: table;
   clear: both;
}
.add-to-cart, .add-to-links {
   float: left;
}
.cart-button {
   text-decoration: none;
   color: #8C877C;
   padding-right: 20px;
   border-right: 1px solid #ddd;
   transition: .4s linear;
}
.cart-button:before {
   content: "\f07a";
   font-family: FontAwesome;
   margin-right: 10px;
}
.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover {
   color: #E34D38;
}
.wishlist, .compare {
   color: #8C877C;
   padding-left: 20px;
   transition: .4s linear;
}
.wishlist:after, .compare:after {
   display: inline-block;
   font-family: FontAwesome;
   font-size: 13px;
}
.wishlist:after {
   content: "\f004";
}
.compare:after {
   content: "\f079";
}

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

⚡️Фронтендеры гении разработки⚡️ Такой маленький, а уже настолько смелый канал разработчика фронта-самоучки. Показывает настоящую работу фронтендера и жаждет критики, чтобы набираться опыта от более опытных разрабов. Заходи, найдешь для себя полезные и сложные моменты фронтенд разработки кейсы, а если ты сам уже крутой прогер, сможешь дать совет или подсказать. Бекендерам тоже есть место, смогут изнутри увидеть как выглядит настоящий крутой код)

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

👨‍💻Glassmorphic Modern Landing page Современный лендинг с работающими кнопками Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🖥 Меняем title вкладки, если пользователь перешел на другую

// Когда пользователь переключается на другую вкладку
window.addEventListener('blur', () => {
    document.title = 'Вернитесь 😢'
})

// Когда пользователь возвращается на вашу страницу 
window.addEventListener('focus', () => {
    document.title = 't.me/WebTaverna 🙂'
})

Друзья! Если хотите больше полезных материалов по HTML, CSS и JavaScript, то не забудьте подписаться на канал WebTaverna 👍 По мимо этого на канале регулярно публикуются готовые решения с CodePen для верстки сайтов и смешные IT мемы ➡️ Перейти в канал WebTaverna

❔ Как сделать полосатую тень у текста? HTML:

<p class="striped-shadow">Полосатая тень</p>

CSS:

.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

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

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

👨‍💻 Word Replace Анимация вылета текста в разных стилях Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как выровнять текст в таблице с помощью CSS? Как выровнять текст в таблице? По умолчанию текст в ячейке заголовка (th) и в ячейках тела таблицы (td) выровнен следующим образом: по высоте — по середине, по ширине — по левому краю ячейки. Выровнять текст первого столбца по центру/правому краю можно при помощи конструкции

table td:first-child {text-align: center;} /* выравнивание по центру*/
table td:first-child {text-align: right;} /* выравнивание по правому краю*/

Выровнять текст в ячейке по вертикали по верхней/нижней границе ячейки можно только в случае, если для ячейки задана высота:

table td {height: 30px; vertical-align: top;} /* выравнивание по верхней границе ячейки */
table td {height: 30px; vertical-align: bottom;} /* выравнивание по нижней границе ячейки */

Как выровнять таблицу по центру страницы/блока? Выровнять таблицу по центру можно при помощи конструкции

table {margin: 0 auto;}

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

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

Если вы хотите попробовать себя в IT-сфере — начните с подготовительного курса «Frontend-разработчик» от Хекслета. ⏰ Старт уже 8 август! За две недели вы освоите базу и напишете собственную программу: – 72 урока; – 4 живых вебинара; – 24 часа поддержки в закрытом Telegram-чате; – помощь опытного наставника. Приходите, даже если до этого никогда не программировали – научим, поможем, подскажем. А также отличная скидка – всего 990 рублей вместо 3 990! 🎁 Всех участников курса ждут бонусы: Карта развития начинающего Frontend-разработчика и скидка на продолжение обучения полноценной 10-месячной профессии.

👨‍💻 Setting Switches Три переключателя настроек Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как сделать красивый фон на сайте? CSS:

div {
background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position: 0 2em, 0 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0 0, 2em 2em;
background-size: 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
}

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

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

👨‍💻 Product Details Component Карточка товара с деталями Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Какие 3 псевдокласса стоит использовать? 1️⃣ Псевдокласс :out-of-range Используется для стилизации элементов, имеющих ограничения на ввод значений в случае, когда вводимое значение элемента неизбежно выходит за пределы указанного диапазона. Поддерживается в Chrome 10+, Firefox, 28+. Safari, Opera 11+, Android и iOS. Не работает в Internet Explorer.

input[type="number"]:out-of-range {
  background: silver;
}

2️⃣ Псевдокласс :read-write Выбирает элементы формы, которые доступны для редактирования пользователем. К этой категории относятся элементы <textarea> И <input>, для которых не заданы атрибуты readonly или disabled, а также другие элементы, для которых задан атрибут contenteditable:

<input type="text">
<input type="number">
<textarea name="word" id="id" cols="30" rows="10"></textarea>
<div contenteditable></div>

Поддерживается в Chrome, Safari, Opera 14+ и iOS. Firefox поддерживает альтернативное :-moz-read-write. Не работает в Internet Explorer и на Android.

textarea:read-write {
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
}
textarea:read-write:before {
  content: "Введите текст сюда...";
  color: #d9d9d9;
}

3️⃣ Псевдокласс :valid Выбирает элементы формы, введенные значения которых соответствуют типу, указанному в атрибуте type или находящиеся в разрешенном диапазоне: • поля формы для ввода адреса электронной почты; • поля формы для ввода url-адресов; • поля формы, предполагающие введение числового значения, с указанием диапазона с помощью атрибутов min и max. Поддерживается в Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, Internet Explorer 10+ и на iOS.

input[type="number"]:valid {
  background-color: lightgreen;
}                   
input:valid {
  box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}
input:valid:focus {
  outline: 0;
  border: none;
  box-shadow: 0 0 3px 6px rgba(0, 200, 0, 0.3);
}

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