Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)

От автора: на днях у нас в офисе зашла дискуссия об усечении текста, и я с тех пор задался вопросом, зашел ли CSS достаточно далеко, чтобы можно было правильно сделать усеченный текст, например, с помощью checkbox.

То есть поддерживает ли он следующее:

Несколько строк

Кнопку «Показать больше», которая отображает полный текст при нажатии

text-overflow: ellipsis не поддерживает несколько строк, но я вспомнил о свойстве line-clamp, которое можно использовать для получения многострочного усеченного текста. К счастью, на CSS Tricks есть хорошая рабочая демо-версия, плюс поддержка браузерами теперь довольно приличная. Здорово!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

А как насчет кнопки «показать больше»?

Читать далее «Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)»

Поделится

Единый идентификатор пользователя заменит cookies?

От автора: международный консорциум IAB Tech Lab предложил использовать для отслеживания действий и таргетинга рекламы единый идентификатор пользователя. Он должен заменить морально устаревшую технологию на базе файлов cookies.

Международная организация IAB Tech Lab (специализируется на разработке и внедрении внутриотраслевых стандартов) предложила свой вариант замены файлов cookies. В консорциуме считают, для таргетинга рекламы нужно использовать единый пользовательский идентификатор.

Отмечается, что доступ к данным идентификатора смогут получить бренды, прошедшие тщательную проверку. Новый стандарт позволит заменить «устаревшие» cookies, против применения которых выступает большая часть мировой интернет-аудитории.

Инициатива была выдвинута IAB Tech Lab после того, как в последней версии браузера Firefox появилась встроенная блокировка файлов cookies. Но многие эксперты настроены против нового стандарта. По их мнению, конфиденциальность базы идентификаторов пользователей «пострадает» сразу после внедрения новой технологии: найдутся желающие перепродать ее или украсть.

Поделится

Анимация переменных шрифтов с помощью CSS и Splitting JS

От автора: некоторое время назад я создал на Codepen демо-версию анимированного переменного шрифта. В этой статье я объясню, что такое переменные шрифты, как можно сделать их анимацию, и как я создал этот потрясающий эффект с помощью CSS и немного Javascript.

Представляем переменные шрифты

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

Один шрифт, много вариаций

Вместо нескольких ширин шрифтов, которые доступны только с кратностью 100 (например font-weight: 600), переменные шрифты предоставляют диапазон значений, все из одного файла. Толщина может варьироваться в пределах диапазона. Так что font-weight: 372 — это вполне доступно!

Оси вариаций

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

толщина (wght)

ширина (wdth)

курсив (ital)

наклон (slnt)

оптический размер (opsz)

Они соответствуют CSS-свойствам и значениям:

font-weight

font-stretch

font-style

font-style

font-optical-sizing

Не все переменные шрифты содержат все эти оси вариаций. Многие содержат только одну или две. Они также могут быть доступны с помощью свойства font-variation-settings. Это свойство позволяет настраивать не только стандартные оси, но и пользовательские. Так font-weight можно указать двумя способами:

или же

font-variation-settings:’wght’372;

Мы могли бы использовать «font-weight», чтобы обеспечить запасной вариант для браузеров, которые не поддерживают переменные шрифты.

Пользовательские оси

Пользовательские оси предоставляют дизайнеру шрифтов неограниченные возможности для творчества! Пользовательская ось вариации может быть буквально чем угодно — некоторые, такие как x-height, могут быть довольно распространенными для гарнитуры, но существует гораздо больше творческих возможностей.

Пользовательские оси могут быть доступны с помощью свойства font-variation-settings, но, для отличия от стандартных осей, их четырехбуквенное имя тега должно быть в верхнем регистре. Переменный шрифт Movement от NM Type предоставляет пользовательскую ось с именем space, которая контролирует кривизну формы буквы.

font-variation-settings:’wght’200,’SPAC’118;

Попробуйте поэкспериментировать с разными осями в этой демонстрации:

Анимация переменного шрифта с помощью CSS

font-variation-settings является анимируемым, и поскольку оно охватывает диапазон значений, а не приращения с шагом 100, мы можем получить некоторые действительно красивые эффекты с помощью простых переходов CSS или анимации ключевых кадров. Шрифт IBM Plex Sans имеет две оси вариаций: толщина и ширина. Следующий код устанавливает анимацию с циклом в 1 секунду для обеих осей:

h1 {

font-variation-settings:’wght’100,’wdth’85;

animation:breathe4000msinfiniteforwards;

}

@keyframes breathe {

60% {

font-variation-settings:’wght’700,’wdth’100;

}

100% {

font-variation-settings:’wght’100,’wdth’85;

}

}

Это дает эффект вдоха и выдоха текста!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Потрясающая анимация

Вместо того, чтобы анимировался весь текст с одинаковой скоростью, было бы неплохо, чтобы наши формы букв анимировались последовательно. Мы могли бы обернуть каждую букву текста в span и установить для каждого animation-delay:

<h1>

<span>B</span>

<span>r</span>

<span>e</span>

<span>a</span>

<span>t</span>

<span>h</span>

<span>i</span>

<span>n</span>

<span>g</span>

</h1>

h1 span:nth-child(2) {

animation-delay:400ms;

}

h1 span:nth-child(3) {

animation-delay:800ms;

}

h1 span:nth-child(4) {

animation-delay:1200ms;

}

/* etc…*/

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

Но если вы не возражаем против использования Javascript, есть отличная библиотека Splitting.js, которая идеально для этого подходит!

Splitting

Основной вариант использования Splitting — анимация текста, хотя также возможно разделить сетки и макеты для получения некоторых интересных эффектов. Чтобы использовать ее, нам нужно включить библиотеку в проект, а затем установить для элемента, который мы хотели бы анимировать, атрибут data-splitting:

<h1 data-splitting>Breathing</h1>

Теперь JS, который нам нужно написать, очень прост:

Затем Splitting разбивает наш текстовый элемент на серию span, каждый с классом, атрибутом данных и определением пользовательского свойства со значением индекса символа, к которому мы затем можем обратиться в CSS:

<span class=”word”data-word=”Breathing”style=”–word-index:0;”>

<span class=”char”data-char=”B”style=”–char-index:0;”>B</span>

<span class=”char”data-char=”r”style=”–char-index:1;”>r</span>

<span class=”char”data-char=”e”style=”–char-index:2;”>e</span>

<span class=”char”data-char=”a”style=”–char-index:3;”>a</span>

<span class=”char”data-char=”t”style=”–char-index:4;”>t</span>

<span class=”char”data-char=”h”style=”–char-index:5;”>h</span>

<span class=”char”data-char=”i”style=”–char-index:6;”>i</span>

<span class=”char”data-char=”n”style=”–char-index:7;”>n</span>

<span class=”char”data-char=”g”style=”–char-index:8;”>g</span>

</span>

Чтобы создать последовательную анимацию, мы можем использовать calc() для вычисления значения animation-delay для каждой буквы из пользовательского свойства:

h1 .char {

–delay:calc((var(–char-index)+1)*400ms);

animation:breathe4000msinfiniteboth;

animation-delay:var(–delay);

}

Это существенно сокращает CSS, который нам нужно написать, и означает, что мы могли бы изменить текст позже и при этом наша анимация работала бы отлично!

Ресурсы

Руководство по переменным шрифтам MDN

Руководство MDN — отличный ресурс для изучения переменных шрифтов и того, как их использовать.

V-Fonts

V-Fonts — это список сотен переменных шрифтов, включая оси их вариаций и где их найти. Он содержит, как платные, так и бесплатные шрифты и является отличным местом для поиска образцов, если вы пока не хотите раскошеливаться на большие деньги.

Axis-Praxis

Axis-Praxis — это площадка для экспериментов с различными шрифтами, что поможет понять их доступные возможности. Она включает в себя несколько действительно интересных и креативных образцов!

VariableFonts.dev

Variablefonts.dev — это проект Мэнди Майкла, который известен в мире CSS тем, что создает впечатляющие демо с переменными шрифтами и рассказывает о них по всему миру.

Читать далее «Анимация переменных шрифтов с помощью CSS и Splitting JS»

Поделится

Нейролингвистический программист

Из резюме соискателя на должность программиста:

Только когда я загуглил МПЛ-50, до меня наконец дошло, что этот находчивый человек так описал службу в армии!

МПЛ-50 – малая пехотная лопата (длина 50 см)

Поделится

Полезные однострочники на JavaScript

Автор статьи, перевод которой мы сегодня публикуем, говорит, что он программирует на JavaScript уже многие годы. За это время он собрал коллекцию отличных однострочников — фрагментов кода, удивительно мощных, учитывая то, что укладываются они в одну строку. По его словам, большие возможности — это и большая ответственность, поэтому пользоваться этими конструкциями нужно осмотрительно, стремясь к тому, чтобы они не вредили бы читабельности программ.

Здесь представлено 13 однострочников. Примеры подготовлены с использованием Node.js v11.x. Если вы будете использовать их в другой среде — это может повлиять на их выполнение.

Читать далее «Полезные однострочники на JavaScript»
Поделится

Пример слайдера на чистом CSS3

Слайдер

Честно стырено с habr.

1. Верстаем основу

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

<div class="wrapper">
	<input type="radio" name="point" id="slide1" checked>
	<input type="radio" name="point" id="slide2">
	<input type="radio" name="point" id="slide3">
	<input type="radio" name="point" id="slide4">
	<input type="radio" name="point" id="slide5">
	<div class="slider">
		<div class="slides slide1"></div>
		<div class="slides slide2"></div>
		<div class="slides slide3"></div>
		<div class="slides slide4"></div>
		<div class="slides slide5"></div>
	</div>	
	<div class="controls">
		<label for="slide1"></label>
		<label for="slide2"></label>
		<label for="slide3"></label>
		<label for="slide4"></label>
		<label for="slide5"></label>
	</div>
</div>
Читать далее «Пример слайдера на чистом CSS3»
Поделится

Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.

Слайдер сделан с помощью связки <input> и <label for=”#id”>. Вся магия происходит на уровне селектора #button-N:checked ~ .slider-inner .slider-slides. Когда мы кликаем по одному из инпутов-чекбоксов, он переходит в состояние checked. Мы можем этим воспользоваться и назначить нужный нам translate на контейнер со слайдами: transform: translate(-33%).

HTML часть

<section class="page">
    <div class="slider">
        <input class="slider__input" type="radio" id="btn-1" name="toggle" checked>
        <input class="slider__input" type="radio" id="btn-2" name="toggle">
        <input class="slider__input" type="radio" id="btn-3" name="toggle">
        <input class="slider__input" type="radio" id="btn-4" name="toggle">
        <div class="slider__controls">
            <label class="slider__label" for="btn-1"></label>
            <label class="slider__label" for="btn-2"></label>
            <label class="slider__label" for="btn-3"></label>
            <label class="slider__label" for="btn-4"></label>
        </div>
        <div class="slider__inner">
            <div class="slider__slides">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1863907/66fc05cc-e47d-4daf-ad9e-983def81b0b8/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1907868/77e32d2e-b4ed-435e-8e48-b7903a67f37b/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1627222/8efe5070-9036-4913-86b4-8241480525db/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1858966/d70c660c-6947-4ed3-b0bf-13e985b58427/s1200">
            </div>
        </div>
    </div>
</section>
Читать далее «Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.»
Поделится