С информацией
Только заголовки

Открытие и закрытие контента на jQuery

Кнопки "показать полностью" и "показать еще" для открытия и закрытия дополнительного контента

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

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

Скрипты используемые в этих примерах сделаны для библиотеки jQuery

Читать далее

SVG рамки для фотографий

Три варианта фильтров на SVG для создания рамок для фотографий

Все варианты очень простые, а сами фильтры умещаются в 166 байт

Читать далее

Шаблоны сеток на CSS Grid

Несколько примеров расположения блоков с использованием сеток на CSS Grid

Во всех вариантах используется CSS-свойство display: grid;

Читать далее

Включение полноэкранного режима

Кнопка включения и выключения полноэкранного режима в браузерах

Небольшой код на JavaScript для входа и выхода из полноэкранного режима окна браузера

Читать далее

Обтекание картинки текстом

CSS-свойство shape-outside для обтекания текстом изображения на прозрачном фоне

CSS-свойство shape-outside используется для того, чтобы создать внутри элемента форму, вокруг которой будет происходить обтекание.

Читать далее

Текст во всю ширину родительского элемента

Выравнивание текста по всей ширине заданного блока

Небольшой скрипт, который выравнивает строку с текстом по всей ширине ее родительского элемента, а также устанавливает нужный размер шрифта, в зависимости от этой ширины и кол-ва букв.

Читать далее

Свет фонарика на тексте

Луч фонарика бегающий по тексту на CSS

Для реализации эффекта используется атрибут data-text, а также css-свойства -webkit-background-clip и clip-path

Читать далее

Ссылки на эскизы из YouTube

Различные варианты ссылок на картинки видеороликов из YouTube в форматах JPG и WEBP

Если видео из YouTube открывается на отдельной странице или в модальном окне, то для него можно использовать уже готовый скриншот этого видеохостинга.

Читать далее

Резиновые квадраты на CSS

Сетка с резиновыми квадратами средствами CSS

Простой код для создания сетки, в которой при любом ее размере, блоки расположенные в ней имеют квадратную форму

Читать далее