Формошлёп

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

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

Весь прикол вертикального заголовка здесь в 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

About

Blog

Apps

Platform