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

❔ Как настроить область просмотра с помощью мета-тега viewport? Чтобы мобильные браузеры для операционных систем Android и iOS не изменяли автоматически размер страниц сайта, используется специальный тег <meta> с атрибутом name="viewport". В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1">

⏺initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1; ⏺width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

<meta name="viewport" content="initial-scale=2.0, width=device-width">

В данном примере содержимое в окне браузера будет в 2 раза больше по сравнению с физическим размером. Также тег <meta> можно использовать для контроля над тем, насколько пользователи могут увеличивать и уменьшать ширину страницы:

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5">

Данный код позволит увеличивать ширину страницы до величины, равной 3-х кратной ширине экрана устройства и уменьшать её до половины ширины экрана устройства. Лишить пользователей возможности масштабирования можно с помощью атрибута user-scalable:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

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

♨️ Прокачивай свои навыки вместе с Java | Фишки и трюки Ежедневные порции Java-фишек, полезные советы и трюки от опытных разработчиков. 👉🏼 Присоединиться

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

⚡️ RECURA - один из лучших каналов для разработчиков и инженеров. Канал ведёт практикующий DevOps-инженер, который ежедневно публикует: — код, повышающий эффективность разработки — лайфхаки и полезные трюки для Bash・Linux・macOS — полезные книги и советы по информационной безопасности — актуальные новости из мира технологий и нейросетей Подпишись на @recura_tech, чтобы каждый день открывать для себя что-то новое и быть востребованным специалистом.

👨‍💻Open Props - Bento Grid. Container Queries Контейнеры в виде коротких выжимок из статей на сайте. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Какие профессии будут актуальны через 10 лет 🤔 Узнайте об этом в канале ИнфоХит — образовательного маркетплейса №1 в России.  Вы найдете: ✏️статьи о востребованных высокооплачиваемых специальностях  ✏️подборки профессий будущего ✏️онлайн-курсы для с гарантированным трудоустройством Успевайте забрать курсы на ИнфоХит бесплатно! Сейчас в канале проходит розыгрыш 3000 ₽, которые можно потратить в маркетплейсе.  Перейти на канал. Реклама. ООО "ИНФОХИТ". ИНН 6617023200. erid: LjN8KVGPB

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

<p class="striped-text">Полосатый текст</p>

CSS:

.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}

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

Ищешь много полезной практики по JavaScript? Переходи на канал CCODE, где ты найдешь увлекательные уроки, интересные задачи и многое другое для того, чтобы улучшить свои навыки программирования на JavaScript 👉 Подписаться на канал

👨‍💻 Checkout Radios Оформление окна оплаты для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Устал от бесконечного поиска информации по JavaScript? JavaScipt Notes - это актуальные и интересные материалы, обучающие видеоуроки, шпаргалки, GitHub репозитории и многое другое. 🚀 Стань частью сообщества профессионалов и начинающих разработчиков прямо сейчас! Становись лучше с @jsn0tes.

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

На css и js можно делать крутые отзывчивые интерфейсы Если знать, как 💥 Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо Несколько сотен готовых решений для вдохновения и использования  Личный помощник фронтендеру прямо в мессенджере!

👨‍💻 Wooden Toggles Деревянные стильные кнопки. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Верстальщикам на заметку:  Канал, где выкладывают дизайн-макеты  сайтов в Figma💥   Можно тренироваться верстать 👨🏼‍💻  Макеты разной сложности 🧠 Используй их в портфолио 📚 Эти и многие другие макеты  найдешь в Макетной!

❔ Как красиво оформить цитату на сайте? HTML:

<blockquote>
  <p>The most courageous act...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

CSS:

blockquote {
margin: 0;
background: #FFF4E0;
color: #474C4F;
padding: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\f10d";
font-family: FontAwesome;
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: 14px;
color: #474C4F;
font-size: 20px;
background: #FFF4E0;
padding: 0 15px;
}
blockquote:after {
content: "";
position: absolute;
left: 15px;
top: 20px;
right: 15px;
height: 4px;
border-top: 1px dotted #474C4F;
border-bottom: 1px dotted #474C4F;
}
blockquote p {
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}

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

— Кто мы? — Фронтенд-разработчики! — Чего мы хотим? — Делать классные сайты! — Где этому научиться? — На канале «Будни разработчика», конечно! — А что там? — Скрытые фишки фронтенда, истории лучших девелоперов и топовые статьи!

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

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!

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