Формошлёп

Карточка с вертикальным заголовком

Недавно на одном сайте увидел прикольно сделанные карточки, решил повторить и сверстать примерно то же самое. Заодно вам показать и сохранить на будущее, мало ли пригодится еще)

Весь прикол вертикального заголовка здесь в writing-mode: sideways-lr, но это свойство пока слабовато поддерживается браузерами, я расскажу, чем его заменить.

Разметка:

<div class="card">
  <div class="vertical-title">Заголовок</div>
  <div class="content">
      Текст карточки...
  </div>
</div>

Вертикальный заголовок:

.vertical-title {
  writing-mode: sideways-lr;
  display: flex;
  align-items: center;
  justify-content: center;
}

Ну а в .content пишем текст карточки.

Для стабильной работы во всех браузерах свойство writing-mode: sideways-lr; можно заменить на это:

  writing-mode: vertical-lr;
  transform: rotate(180deg);

Здесь мы также создаем вертикальный текст, но дополнительно поворачиваем его на 180 градусов.

Окончательный код со стилизацией можно глянуть здесь.

👍20🔥9❤6

2.79K views07:11

Формошлёп

Стилизуем форму с :optional

Многие знают про псевдокласс :required, но его противоположность :optional — незаслуженно обходят стороной. А ведь этот псевдокласс позволяет стилизовать все поля формы, у которых нет атрибута required.

Например, зададим фон необязательным полям:

input:optional {
  background: #f0f7ff; 
}

Ну и обязательным зададим другой фон:

input:required {
  background: #fff;
}

Теперь поля с required и без будут закрашены в разные цвета.

Такой вот нехитрый способ сделать наши формы чуть дружелюбнее)

Посмотреть в действии код со стилизацией можно здесь.

👍25❤5🔥4

2.79K views06:51

Формошлёп

0:03

This media is not supported in your browser

VIEW IN TELEGRAM

Давайте разберём еще одну фичу CSS — currentColor, это ключевое слово в CSS, которое ссылается на текущий цвет текста элемента.

Т.е. это динамическая переменная, которая автоматически подхватывает значение color и позволяет использовать его в других свойствах, таких как background, border, fill, stroke и т.д.

Для примера, создадим кнопку:

<button class="btn">
  <svg viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">
    <path d="M3.46447 3.46447C2 ... 8.46967Z"></path>
  </svg>
  currentColor
</button>

И стилизуем:

.btn {
  color: #ff5722;
  border: 3px solid currentColor;
}

.btn:hover {
  color: #4caf50;
}

.btn svg {
  fill: currentColor;
}

Результат:
- color: #ff5722 задаёт оранжевый цвет для текста кнопки.
- border: 3px solid currentColor и fill: currentColor автоматически подхватывают этот же цвет.
- в :hover меняется только color: #4caf50, а граница и иконка моментально подстраиваются.

Таким образом мы получаем более гибкий и поддерживаемый код)

Полный код можно глянуть здесь.

👍24🔥11❤2

2.96K views08:06

Формошлёп

Второй способ прижать подвал сайта к низу экрана

Первый способ с флексами мы уже рассматривали здесь. Теперь давайте разберем еще один способ — с помощью CSS Grid.

Превратим всю страницу в грид-контейнер и распределим на зоны: хедер, контент и футер:

<body>
  <header>Шапка сайта</header>
  <main>Основной контент</main>
  <footer>Подвал сайта</footer>
</body>

CSS:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Результат:
● grid-template-rows: auto 1fr auto
■ Первая строка (header) занимает столько места, сколько нужно (auto)
■ Вторая строка (main) растягивается на всё свободное пространство (1fr)
■ Третья строка (footer) также занимает только необходимое место (auto)
● min-height: 100vh - заставляет body занимать как минимум всю высоту экрана.

Просто, гибко и надежно)

Код, как всегда, здесь.

👍34🔥10❤2

2.5K views06:55

Формошлёп

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

"Липкая" шапка таблицы с position: sticky

Бывает таблица длинная, ты ее скроллишь, читаешь, а потом опа.. и забыл, что вообще находится в столбце №4 и приходится скроллить обратно наверх, запоминать и снова возвращаться вниз. Немного напрягает)

Чтобы пофиксить этот момент, в таблице можно сделать шапку, которая всегда будет на виду во время скролла.

Делается это с помощью всем нам знакомого свойства position: sticky.

position: sticky — это своего рода гибрид между relative и fixed. Элемент ведет себя как position: relative, пока не достигнет определенного порога при скролле, а затем превращается в position: fixed.

Чтобы все было ок, достаточно этого:

th {
  position: sticky;
  top: 0;
  background-color: #fff; /* Чтобы не просвечивало содержимое */
}

Теперь при прокрутке шапка остаётся на месте, а данные под ней скрываются.

Также стоить помнить, что если у родителя нет overflow, то "липкость" не сработает.

Ну, а полный код можно пощупать здесь.

👍30🔥6❤3

2.53K views06:51

Формошлёп

Круглые аватарки с object-fit: cover

Разбираем, как сделать аватарки, которые выглядят, как из модного приложения, а не как из профиля на форуме 2000 года)

Возьмём одну и ту же фотку и применим два подхода: ленивый (border-radius: 50%) и правильный (object-fit: cover).

Ленивый подход с border-radius: 50%
Берём фотку и просто делаем её круглой:

<img class="lazy-avatar" src="image.jpg" alt="Аватар">

.lazy-avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

Никакой умной обрезки: изображение просто втискивается в круг — пропорции вышли из чата)

Правильный подход с object-fit: cover
Оборачиваем фотку в контейнер и используем object-fit: cover:

<div class="avatar">
  <img src="image.jpg" alt="Аватар">
</div>

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Фотка масштабируется, чтобы заполнить контейнер, но сохраняет пропорции.

Глянуть код можно здесь.

👍19🔥12😁3❤1

2.88K viewsedited 06:52

Формошлёп

0:12

This media is not supported in your browser

VIEW IN TELEGRAM

"Липкая" шапка таблицы с position: sticky v2

Давайте сегодня еще добавим пару фич в нашу таблицу из этого поста. Разберем, как сделать выделение строк, которые находятся под курсором и как добавить эффект зебра-стайл)

Итак, чтобы сделать полосатые строки таблицы, можно с помощью псевдокласса :nth-child выбрать четные строки и поменять им цвет:

tr:nth-child(even) {
  background-color: #e0e0e0;
}

А чтобы выделить строки под курсором используем псевдокласс :hover:

tr:hover {
  background-color: #f1f9ff;
}

Добавили буквально по паре строк и таблица стала не только функциональна, но и эстетически красива)

Кстати, наш подписчик Alexey в прошлом посте годно подметил, что можно использовать для липкой шапки не th, а thead, здесь переделывать не стал, просто имейте в виду)

Код всей таблицы можно глянуть здесь.

👍21🔥10

2.87K views07:12

Формошлёп

Фигурные обтекания с shape-outside

Частенько, особенно при верстке лендингов, приходится делать фигурное обтекание картинок текстом.

Свойство shape-outside, как раз на этом специализируется. Оно позволяет задать форму, вокруг которой будет обтекать текст и не просто прямоугольник, а круг, треугольник или даже сложную SVG-фигуру.

Чтобы все обтекало, как надо, достаточно задать блоку float и shape-outside. Форму можно определить через:
■ circle()
■ ellipse()
■ polygon()
■ url() если форма задана в SVG

Пример с кругом:

.shape {
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  background: #3498db;
  border-radius: 50%;
}

Конечно, многие давно уже юзают это свойство, но новичкам будет полезно)

Пример кода, как всегда здесь.

👍25🔥8❤3

2.35K views06:57

Формошлёп

Нарезаем изображения

Сегодня давайте бегло пробежимся по CSS-свойству, благодаря которому мы можем делать изображения таких форм, которые нафантазировали в своих головах дизайнеры)

Это свойство clip-path, которое позволяет обрезать изображение по заданной форме.

Основные формы:

1. Круг:

.circle {
  clip-path: circle(50% at center);
}

50% — радиус круга, at center — положение центра.

2. Эллипс:

.ellipse {
  clip-path: ellipse(25% 40% at 50% 50%);
}

25% — горизонтальный радиус, 40% — вертикальный радиус, at 50% 50% — центр эллипса.

3. Многоугольник:

.rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Каждая пара значений — это координаты точки в формате X% Y%. Точки соединяются в указанном порядке.

Это самые простые примеры, можно создавать любые фигуры, а также использовать svg, в качестве маски.

Пример код можно глянуть здесь.

🔥19👍11✍2❤1

2.72K views06:49

Формошлёп

clip-path для блоков

Кстати, свойство clip-path можно юзать не только, для обрезки изображений.

С помощью этого свойства можно стилизовать в целом любые блоки, к примеру, на лендингах можно выделять различные смысловые секции.

Так можно запилить скошенный блок для первой секции, как на картинке в превью поста:

.hero {
  min-height: 50vh;
  background: #4a6bff;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Здесь можно глянуть на импровизированный лендинг из 3х секций)

👍22🔥7❤2

2.85K views06:54

Формошлёп

0:16

This media is not supported in your browser

VIEW IN TELEGRAM

Адаптивные колонки

Если вам вдруг позарез необходимо сверстать адаптивные текстовые колонки, то можно обойтись без флексов и гридов, использовав columns, все делается буквально одной строчкой:

.container {
  columns: auto 20rem;
}

Вы получаете сбалансированный многоколоночный макет, где:
- auto — означает автоматическое определение количества колонок.
- 20rem — минимальная ширина каждой колонки.

Кстати, это можно использовать не только для текста, но и для списков, например, в футере, где обычно располагается по 50 ссылок)

Потестить код можно здесь.

👍25🔥15❤2

2.72K views06:56

Формошлёп

CSS Nesting

Кто не знал, в нативном CSS уже есть такая штука, как nesting(вложенность). Вещь удобная, но в целом не новая, если вы раньше работали с SASS, LESS и.т.д.

Так вот, теперь CSS начал это уметь "из коробки".

Пример простой разметки:

<div class="card">
  <h2 class="title">Карточка</h2>
  <button class="button">Кнопка</button>
</div>

CSS Nesting:

.card {
  background: #f5f5f5;
  padding: 16px;
  
  .title { 
    font-size: 20px; 
  }
  
  .button {
    background: #007bff;
    color: #fff;
    padding: 8px;
    
    &:hover { 
      background: #0056b3; 
    }
  }
}

То же самое, на стандартном CSS:

.card { 
  background: #f5f5f5; 
  padding: 16px; 
}

.card .title { 
  font-size: 20px; 
}

.card .button { 
  background: #007bff; 
  color: #fff; 
  padding: 8px; 
}
.card .button:hover { 
  background: #0056b3; 
}

Здесь приготовил для вас более продвинутый пример со сравнением разных подходов.

🔥32👍15❤1👌1🤝1

3.11K views06:58

Формошлёп

<div> вместо тысячи слов)

😁41👍8❤4🔥2

2.82K views08:32

Формошлёп

Текстовый фрагмент

Недавно узнал про еще одну интересную фишку, под названием "ссылка на текстовый фрагмент". Т.е. мы можем напрямую ссылаться на определенную часть текста, не используя при этом идентификатор и т.п.

Делается это с помощью #:~:text= в ссылке.

Реализуется таким образом:

<a href="#:~:text=фрагмент">ссылка на фрагмент</a>

После перехода по этой ссылке, браузер проскроллит до первого совпадения с указанным в ссылке текстом и подсветит его.

А для стилизования этого выделения можно использовать псевдокласс ::target-text:

::target-text {
  background: black;
  color: white;
}

Кстати, еще один способ использования:
нашли вы интересную статью и хотите поделиться с кентом определенной инфой из статьи, чтобы не объяснять "читай с 7 абзаца, после третьей картинки", вы можете сделать так: https://www.w3.org/standards/#:~:text=W3C%20publishes%20recommendations

Ну и как обычно, код можно посмотреть здесь.

🔥48👍18❤2

2.97K views06:36

Формошлёп

Меняем кнопку Enter виртуальной клавиатуры

Разберем интересный и простой трюк, который сделает наши формы, на мобильных устройствах, умнее — атрибут enterkeyhint.

Он позволяет менять надпись на клавише Enter в зависимости от того, что делает пользователь — ищет информацию, отправляет сообщение или переходит к следующему полю.

Браузеры моб. устройств отображают эту кнопку по-разному, в зависимости от значения атрибута.

Добавляем атрибут к <input> или <textarea>:

<input type="text" id="message" placeholder="Введите сообщение..." enterkeyhint="send">

После этого кнопка Enter в моб. браузере будет называться "Отправить".

Доступные значения:
■ enter — стандартная кнопка (по умолчанию)
■ done — «Готово»
■ go — «Перейти»
■ next — «Далее»
■ search — «Найти»
■ send — «Отправить»

Пример можно глянуть здесь.

👍40🔥13✍4❤2😎1

3.01K views06:53

Формошлёп

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

Отступы для прокрутки — scroll-padding

Было у вас такое, что вы сделали якорную ссылку для скролла к элементу, все было классно, но потом узнали, что хедер должен быть фиксированным?

Зафиксировали хедер, теперь скролл доходит до элемента, но половина контента скрыта под этим хедером, который никому не нужен, но "по дизайну так надо")

Раньше мы решали это костыльными способами:
■ Добавляли невидимый div перед нужным элементом.
■ Писали JavaScript для подсчета высоты хедера.

Но теперь все проще, есть scroll-padding-top, который решает проблему в одну строчку:

html {
  scroll-padding-top: 80px; /* Высота хедера */
}

И всё. Теперь браузер сам знает, что нужно оставить место сверху. Без костылей и расчетов)

Демку потестить можно здесь.

👍37🔥17✍6❤3

2.99K views06:53

About

Blog

Apps

Platform