На главную Инструменты Панель оптимизатора

Новости Реклама у нас Обратная связь

Бесплатная доска объявлений по всей России - Do-Ska.ru

15.06.2015 в 17:02 Открытия панели отпимизатора!

Google pr	16.06.2015

Яндекс ТиЦ	25.06.2019
поиск	28.06.2019
каталог	16.01.2018

Витрина ссылок[Добавить]

доска объявлений подать объявление Аквалайн Пермь

Анализ контента сайта

Войти или зарегистрироваться

Забыли пароль?

Главная Инструменты Анализ контента сайта

Данный инструмент поможет Вам Выполнить анализ контента указанного сайта (страницы).

Для успешного продвижения сайта, необходимо иметь релевантный контент и оптимальную плотность слов. При помощи данного сервиса вы сможите выполнить максимально полный анализ контента вашего сайта.
При выполнении анализа будет проанализирован контент вашего сайта на: вес страницы; релевантность, плотность заголовка (title), ключевых слов (keywords) к тексту страницы; скорость, время загрузки страницы; анализирован текст страницы; обработаны стоп-слова; процентное соотношение вхождений слов с текстом страницы; рассчитана частота (TF) терминов содержимого страницы.

Общие данные о странице

Последнее обновление данных:	сегодня (2024-05-05 03:27:33) (для обновления - зарегистрируйтесь, следующее обновление через: 4 д, 20 ч, 33 мин)
URL:	uzinok.ru (WHOIS IP, WHOIS DOMAIN)
Размер страницы:	34.63 Kb
Кодировка:	UTF-8
IP сайта:	185.26.122.57
Скорость загрузки:	43.57 Kb/s
Время загрузки:	0.79 sec
Всего символов (с html тэгами):	35459
Всего символов (текст):	7811
Всего символов (текст без пробелов):	6631
Доля контента ко всему коду страницы:	22.03 %
Перенаправление:	https://uzinok.ru/
Внутренние / внешние ссылки:	Анализ

Постоянная ссылка на страницу

http://qoogoo.perm.ru/tools/contentcheck/uzinok.ru

Общие данные сайта[ Скрыть ]

Поддержка JavaScript отключена!

Заголовок (title)[ Скрыть]

Оригинальный текст

Записки верстальщика

Обработанный текст (без стоп-слов)

Записки верстальщика

Общая информация

Всего слов в тексте:	2
Слов в тексте (без стоп-слов):	2
Слов без повторов и стоп-слов:	2
Стоп-слов в тексте:	0
Плотность всех слов к контенту:	0.338
Релевантность текста к контенту:	100 %
Вхождений слов тэга в контенте:	2 из 2
Слов с повтором в тэге > 1 раза:	0

Результат анализа слов тэга

Слово - анализируемое слово

Кол-во в тэге - кол-во повторов текущего слова в анализируемом тэге

Плотность - плотность текущего слова относительно контента страницы

Вхождений - кол-во вхождений текущего слова в контенте страницы

Частота (TF) - Частота TF(Term Frequency) относительно контента страницы

Слово	Кол-во в тэге	Плотность	Вхождений	Частота (TF)
Записки	1	0.169	2	0.5
верстальщика	1	0.169	2	0.5

Ключевые слова (keywords)[ Скрыть]

Оригинальный текст

вёрстка сайтов, адаптивная вёрстка

Обработанный текст (без стоп-слов)

вёрстка сайтов, адаптивная вёрстка

Общая информация

Всего слов в тексте:	2
Слов в тексте (без стоп-слов):	2
Слов без повторов и стоп-слов:	2
Стоп-слов в тексте:	0
Плотность всех слов к контенту:	0
Релевантность текста к контенту:	0 %
Вхождений слов тэга в контенте:	0 из 2
Слов с повтором в тэге > 1 раза:	0

Результат анализа слов тэга

Слово - анализируемое слово

Кол-во в тэге - кол-во повторов текущего слова в анализируемом тэге

Плотность - плотность текущего слова относительно контента страницы

Вхождений - кол-во вхождений текущего слова в контенте страницы

Частота (TF) - Частота TF(Term Frequency) относительно контента страницы

Слово	Кол-во в тэге	Плотность	Вхождений	Частота (TF)
вёрстка сайтов	1	0	0	0.5
адаптивная вёрстка	1	0	0	0.5

Описание страници (description)[ Скрыть]

Оригинальный текст

Сбор шпаргалок, и некоторых редких свойств

Обработанный текст (без стоп-слов)

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

Общая информация

Всего слов в тексте:	6
Слов в тексте (без стоп-слов):	5
Слов без повторов и стоп-слов:	5
Стоп-слов в тексте:	1
Список стоп-слов:	[ Показать] и
Плотность всех слов к контенту:	0.085
Релевантность текста к контенту:	20 %
Вхождений слов тэга в контенте:	1 из 5
Слов с повтором в тэге > 1 раза:	0

Результат анализа слов тэга

Слово - анализируемое слово

Кол-во в тэге - кол-во повторов текущего слова в анализируемом тэге

Плотность - плотность текущего слова относительно контента страницы

Вхождений - кол-во вхождений текущего слова в контенте страницы

Частота (TF) - Частота TF(Term Frequency) относительно контента страницы

Слово	Кол-во в тэге	Плотность	Вхождений	Частота (TF)
Сбор	1	0	0	0.167
шпаргалок	1	0	0	0.167
некоторых	1	0.085	1	0.167
редких	1	0	0	0.167
свойств	1	0	0	0.167

Тэги h1 - h6[ Скрыть]

Тэг h1

<span class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false" width="100" height="100"><circle fill="#f7f6ff" cx="32" cy="32" r="32"/><path fill="#17152f" d="M7.75 32.98v-1.99l9.01-5.92v3.41l-5.44 3.43v.16l5.44 3.43v3.43l-9.01-5.95zm12.06 10.1v-2.81h11.34v2.81H19.81zm14.4 0 7.41-22.16h3.04l-7.41 22.16h-3.04zm13.03-7.58 5.44-3.43v-.16l-5.44-3.43v-3.41l9.01 5.9v1.99l-9.01 5.97V35.5z"/></svg> </span>Записки верстальщика&ensp;<span>Собрание демок и фич для верстальщиков</span>

Тэг h2

Тэг h3

<a href="./article/css/has/">:has() — родительский селектор</a>

Контент страницы[ Скрыть]

Общая информация

Всего слов в тексте:	1181
Слов в тексте (без стоп-слов):	878
Слов без повторов и стоп-слов:	530
Стоп-слов в тексте:	303
Список стоп-слов:	[ Показать] и, для, с, я, одну, но, не, в, как, на, из, который, по, о, их, буду, есть, такой, к, которому, у, меня, это, могут, того, этих, вся, что, если, вас, когда, он, во, всех, которая, таких, все, такую, своего, же, этот, до, то, нет, себя, а, было, или, такое, to, вот, еще, один, нем, за, всем, них, мне, котором, такими, этому, мой, сам, от, будет, чего, может, одна, этого, всё, него, эта, которые, которого, при, её, быть, уже, моём, его, свои, бы, этом

Результат анализа слов контента

Слово	Вхождений	В title	В Keywords	Частота (TF)
Записки	2	Да	Нет	0.002
верстальщика	2	Да	Нет	0.002
Открыть	1	Нет	Нет	0.001
менюCSS	1	Нет	Нет	0.001
JS	3	Нет	Нет	0.003
SVG	11	Нет	Нет	0.009
Статьи	1	Нет	Нет	0.001
Demo	1	Нет	Нет	0.001
ensp	1	Нет	Нет	0.001
Собрание	1	Нет	Нет	0.001
демок	1	Нет	Нет	0.001
фич	1	Нет	Нет	0.001
верстальщиковcss	1	Нет	Нет	0.001
has	1	Нет	Нет	0.001
родительский	1	Нет	Нет	0.001
селекторЗа	1	Нет	Нет	0.001
годы	1	Нет	Нет	0.001
работы	3	Нет	Нет	0.003
HTML	7	Нет	Нет	0.006
CSS	10	Нет	Нет	0.008
немного	2	Нет	Нет	0.002
JavaScript	2	Нет	Нет	0.002
замечаю	1	Нет	Нет	0.001
приятную	1	Нет	Нет	0.001
закономерность	1	Нет	Нет	0.001
ВЭБ	1	Нет	Нет	0.001
развивается	2	Нет	Нет	0.002
Причем	1	Нет	Нет	0.001
очень	4	Нет	Нет	0.003
быстро	2	Нет	Нет	0.002
некоторых	1	Нет	Нет	0.001
действий	1	Нет	Нет	0.001
раньше	1	Нет	Нет	0.001
приходилось	1	Нет	Нет	0.001
писать	1	Нет	Нет	0.001
много	1	Нет	Нет	0.001
кода	2	Нет	Нет	0.002
построения	1	Нет	Нет	0.001
сеток	2	Нет	Нет	0.002
пришли	1	Нет	Нет	0.001
Flex	1	Нет	Нет	0.001
Grid	1	Нет	Нет	0.001
читать	38	Нет	Нет	0.032
статью	39	Нет	Нет	0.033
Shape	1	Нет	Нет	0.001
outside	1	Нет	Нет	0.001
стандартные	2	Нет	Нет	0.002
фигурыИногда	1	Нет	Нет	0.001
дизайнеры	2	Нет	Нет	0.002
добавляют	1	Нет	Нет	0.001
элементы	5	Нет	Нет	0.004
макеты	1	Нет	Нет	0.001
Ну	4	Нет	Нет	0.003
скриншоте	1	Нет	Нет	0.001
ниже	2	Нет	Нет	0.002
Скриншот	1	Нет	Нет	0.001
фигмы	1	Нет	Нет	0.001
слева	1	Нет	Нет	0.001
круглый	1	Нет	Нет	0.001
элемент	4	Нет	Нет	0.003
контуру	1	Нет	Нет	0.001
обтекаетчитать	1	Нет	Нет	0.001
Кастомные	2	Нет	Нет	0.002
progress	2	Нет	Нет	0.002
meter	2	Нет	Нет	0.002
сайтах	1	Нет	Нет	0.001
часто	2	Нет	Нет	0.002
можно	8	Нет	Нет	0.007
встретить	1	Нет	Нет	0.001
картинке	1	Нет	Нет	0.001
Подробно	1	Нет	Нет	0.001
предназначении	1	Нет	Нет	0.001
говорить	1	Нет	Нет	0.001
ссылки	1	Нет	Нет	0.001
MDN	1	Нет	Нет	0.001
Странный	1	Нет	Нет	0.001
заголовок	3	Нет	Нет	0.003
Относительно	2	Нет	Нет	0.002
недавно	4	Нет	Нет	0.003
встретил	1	Нет	Нет	0.001
вопросы	2	Нет	Нет	0.002
самом	2	Нет	Нет	0.002
деле	2	Нет	Нет	0.002
важная	3	Нет	Нет	0.003
часть	1	Нет	Нет	0.001
страницы	5	Нет	Нет	0.004
чекбоксы	2	Нет	Нет	0.002
радиокнопки	2	Нет	Нет	0.002
Браузерные	1	Нет	Нет	0.001
разных	1	Нет	Нет	0.001
браузерах	2	Нет	Нет	0.002
выглядеть	1	Нет	Нет	0.001
по-разному	1	Нет	Нет	0.001
Кроме	1	Нет	Нет	0.001
внешний	1	Нет	Нет	0.001
вид	1	Нет	Нет	0.001
элементов	2	Нет	Нет	0.002
практически	2	Нет	Нет	0.002
всегда	1	Нет	Нет	0.001
Фон	1	Нет	Нет	0.001
сайтаПрактически	1	Нет	Нет	0.001
каждого	2	Нет	Нет	0.002
сайта	6	Нет	Нет	0.005
фоном	2	Нет	Нет	0.002
страница	3	Нет	Нет	0.003
отдельные	1	Нет	Нет	0.001
блоки	1	Нет	Нет	0.001
кнопки	2	Нет	Нет	0.002
иконки	2	Нет	Нет	0.002
многое	1	Нет	Нет	0.001
другое	1	Нет	Нет	0.001
counterКак	1	Нет	Нет	0.001
стилизовать	1	Нет	Нет	0.001
упорядоченные	1	Нет	Нет	0.001
списки	1	Нет	Нет	0.001
добавить	4	Нет	Нет	0.003
ведущий	1	Нет	Нет	0.001
ноль	1	Нет	Нет	0.001
утакого	1	Нет	Нет	0.001
списка	1	Нет	Нет	0.001
делать	1	Нет	Нет	0.001
вложенный	1	Нет	Нет	0.001
список	1	Нет	Нет	0.001
Самый	1	Нет	Нет	0.001
простой	6	Нет	Нет	0.005
image-set	2	Нет	Нет	0.002
интересный	1	Нет	Нет	0.001
метод	1	Нет	Нет	0.001
появился	1	Нет	Нет	0.001
жду	1	Нет	Нет	0.001
нетерпеньем	1	Нет	Нет	0.001
заработает	2	Нет	Нет	0.002
Селекторы	2	Нет	Нет	0.002
атрибутам	2	Нет	Нет	0.002
довольно	3	Нет	Нет	0.003
интересная	2	Нет	Нет	0.002
тема	1	Нет	Нет	0.001
открывает	2	Нет	Нет	0.002
кучу	1	Нет	Нет	0.001
возможностей	1	Нет	Нет	0.001
время	3	Нет	Нет	0.003
верстки	1	Нет	Нет	0.001
макета	1	Нет	Нет	0.001
Некоторые	1	Нет	Нет	0.001
Дочерний	2	Нет	Нет	0.002
селектор	6	Нет	Нет	0.005
Тут	1	Нет	Нет	0.001
просто	3	Нет	Нет	0.003
текущем	1	Нет	Нет	0.001
блоке	1	Нет	Нет	0.001
помощью	3	Нет	Нет	0.003
знака	1	Нет	Нет	0.001
gt	13	Нет	Нет	0.011
выбираем	1	Нет	Нет	0.001
Рассмотрим	1	Нет	Нет	0.001
примере	1	Нет	Нет	0.001
работает	1	Нет	Нет	0.001
lt	13	Нет	Нет	0.011
style	1	Нет	Нет	0.001
Соседский	2	Нет	Нет	0.002
quot	19	Нет	Нет	0.016
выбирает	3	Нет	Нет	0.003
соседний	1	Нет	Нет	0.001
примера	1	Нет	Нет	0.001
написать	1	Нет	Нет	0.001
вёрстку	2	Нет	Нет	0.002
div	1	Нет	Нет	0.001
class	1	Нет	Нет	0.001
block	2	Нет	Нет	0.002
span	1	Нет	Нет	0.001
Братский	1	Нет	Нет	0.001
Данный	1	Нет	Нет	0.001
после	2	Нет	Нет	0.002
выбранного	2	Нет	Нет	0.002
внутри	1	Нет	Нет	0.001
родителя	1	Нет	Нет	0.001
Проще	2	Нет	Нет	0.002
говоря	1	Нет	Нет	0.001
Анимированный	2	Нет	Нет	0.002
кот	1	Нет	Нет	0.001
без	3	Нет	Нет	0.003
пишу	1	Нет	Нет	0.001
шаблон	2	Нет	Нет	0.002
дальнейшем	1	Нет	Нет	0.001
применю	1	Нет	Нет	0.001
wordpress	1	Нет	Нет	0.001
Дошло	1	Нет	Нет	0.001
дело	1	Нет	Нет	0.001
надо	1	Нет	Нет	0.001
думать	1	Нет	Нет	0.001
JSЗвездное	1	Нет	Нет	0.001
небо	2	Нет	Нет	0.002
canvas	1	Нет	Нет	0.001
свете	1	Нет	Нет	0.001
проблем	1	Нет	Нет	0.001
задачи	1	Нет	Нет	0.001
Решил	1	Нет	Нет	0.001
сделать	2	Нет	Нет	0.002
сайт	3	Нет	Нет	0.003
главной	1	Нет	Нет	0.001
нужно	2	Нет	Нет	0.002
звёздное	1	Нет	Нет	0.001
Как-то	1	Нет	Нет	0.001
скучно	1	Нет	Нет	0.001
брать	1	Нет	Нет	0.001
Плагин	2	Нет	Нет	0.002
всплывающих	2	Нет	Нет	0.002
подсказок	2	Нет	Нет	0.002
Небольшой	1	Нет	Нет	0.001
чипсов	1	Нет	Нет	0.001
коде	1	Нет	Нет	0.001
используются	1	Нет	Нет	0.001
приёмы	1	Нет	Нет	0.001
технологии	1	Нет	Нет	0.001
удобного	1	Нет	Нет	0.001
использования	1	Нет	Нет	0.001
разработчиком	1	Нет	Нет	0.001
Модальное	2	Нет	Нет	0.002
окно	4	Нет	Нет	0.003
всплывающее	3	Нет	Нет	0.003
Думаю	1	Нет	Нет	0.001
разобраться	1	Нет	Нет	0.001
начать	1	Нет	Нет	0.001
простого	1	Нет	Нет	0.001
блок	1	Нет	Нет	0.001
Кастомный	1	Нет	Нет	0.001
спойлер	3	Нет	Нет	0.003
Кастонмый	1	Нет	Нет	0.001
англ	1	Нет	Нет	0.001
spoil	1	Нет	Нет	0.001
портить	1	Нет	Нет	0.001
преждевременно	1	Нет	Нет	0.001
раскрытая	1	Нет	Нет	0.001
сюжетная	1	Нет	Нет	0.001
информация	1	Нет	Нет	0.001
разрушает	1	Нет	Нет	0.001
таймер	2	Нет	Нет	0.002
используется	1	Нет	Нет	0.001
библиотека	1	Нет	Нет	0.001
Snapsvg	1	Нет	Нет	0.001
данного	1	Нет	Нет	0.001
таймера	1	Нет	Нет	0.001
необходимо	2	Нет	Нет	0.002
лишь	1	Нет	Нет	0.001
подключить	2	Нет	Нет	0.002
timer	1	Нет	Нет	0.001
вызвать	1	Нет	Нет	0.001
Котик	2	Нет	Нет	0.002
следящий	1	Нет	Нет	0.001
курсором	2	Нет	Нет	0.002
Поводи	1	Нет	Нет	0.001
возле	1	Нет	Нет	0.001
кота	1	Нет	Нет	0.001
Код	1	Нет	Нет	0.001
старый	1	Нет	Нет	0.001
2018го	1	Нет	Нет	0.001
года	1	Нет	Нет	0.001
судите	1	Нет	Нет	0.001
строго	1	Нет	Нет	0.001
script	1	Нет	Нет	0.001
type	1	Нет	Нет	0.001
text	1	Нет	Нет	0.001
src	1	Нет	Нет	0.001
https	1	Нет	Нет	0.001
releases	1	Нет	Нет	0.001
SVGКак	1	Нет	Нет	0.001
страницу	3	Нет	Нет	0.003
правильно	1	Нет	Нет	0.001
привет	3	Нет	Нет	0.003
задумался	1	Нет	Нет	0.001
лучше	1	Нет	Нет	0.001
вектор	1	Нет	Нет	0.001
Вспомнил	1	Нет	Нет	0.001
четыре	1	Нет	Нет	0.001
способа	2	Нет	Нет	0.002
сейчас	1	Нет	Нет	0.001
расскажу	2	Нет	Нет	0.002
Текст	2	Нет	Нет	0.002
градиентом	3	Нет	Нет	0.003
днях	1	Нет	Нет	0.001
пришлось	2	Нет	Нет	0.002
верстать	1	Нет	Нет	0.001
креатив	1	Нет	Нет	0.001
приходится	1	Нет	Нет	0.001
сталкиваться	1	Нет	Нет	0.001
вещами	1	Нет	Нет	0.001
Патерны	1	Нет	Нет	0.001
разукрасить	1	Нет	Нет	0.001
pattern	2	Нет	Нет	0.002
Сложного	1	Нет	Нет	0.001
ничего	1	Нет	Нет	0.001
defs	1	Нет	Нет	0.001
добавляем	1	Нет	Нет	0.001
тэг	2	Нет	Нет	0.002
необходимыми	1	Нет	Нет	0.001
атрибутами	1	Нет	Нет	0.001
path	1	Нет	Нет	0.001
видим	1	Нет	Нет	0.001
Милый	1	Нет	Нет	0.001
первый	2	Нет	Нет	0.002
рисунок	2	Нет	Нет	0.002
конечно	2	Нет	Нет	0.002
нарисовал	1	Нет	Нет	0.001
анимировал	1	Нет	Нет	0.001
СтатьиЛенивая	1	Нет	Нет	0.001
загрузка	2	Нет	Нет	0.002
iframe	2	Нет	Нет	0.002
Ленивая	1	Нет	Нет	0.001
сильно	1	Нет	Нет	0.001
уменьшает	1	Нет	Нет	0.001
скорость	2	Нет	Нет	0.002
загрузки	1	Нет	Нет	0.001
требование	1	Нет	Нет	0.001
заказчика	1	Нет	Нет	0.001
ускорить	4	Нет	Нет	0.003
загрузку	2	Нет	Нет	0.002
прихоть	1	Нет	Нет	0.001
Особенно	1	Нет	Нет	0.001
заказчик	1	Нет	Нет	0.001
новый	1	Нет	Нет	0.001
сервис	1	Нет	Нет	0.001
Ведь	1	Нет	Нет	0.001
каждый	1	Нет	Нет	0.001
пользователь	1	Нет	Нет	0.001
ждать	1	Нет	Нет	0.001
долго	1	Нет	Нет	0.001
простая	1	Нет	Нет	0.001
ссылка	5	Нет	Нет	0.004
существовать	2	Нет	Нет	0.002
ни	1	Нет	Нет	0.001
веб	1	Нет	Нет	0.001
интернете	1	Нет	Нет	0.001
Даже	1	Нет	Нет	0.001
элемента	1	Нет	Нет	0.001
самой	1	Нет	Нет	0.001
странице	1	Нет	Нет	0.001
равно	1	Нет	Нет	0.001
самых	1	Нет	Нет	0.001
распространённых	1	Нет	Нет	0.001
страниц	1	Нет	Нет	0.001
Эммет	1	Нет	Нет	0.001
сниппеты	1	Нет	Нет	0.001
над	2	Нет	Нет	0.002
проектом	2	Нет	Нет	0.002
зависит	1	Нет	Нет	0.001
нескольких	1	Нет	Нет	0.001
факторов	1	Нет	Нет	0.001
знание	1	Нет	Нет	0.001
профессии	1	Нет	Нет	0.001
умение	3	Нет	Нет	0.003
поставить	1	Нет	Нет	0.001
задачу	1	Нет	Нет	0.001
владеть	1	Нет	Нет	0.001
инструментами	1	Нет	Нет	0.001
печатать	1	Нет	Нет	0.001
Border	2	Нет	Нет	0.002
Иногда	1	Нет	Нет	0.001
задают	1	Нет	Нет	0.001
интересные	1	Нет	Нет	0.001
задачки	1	Нет	Нет	0.001
требуют	1	Нет	Нет	0.001
подумать	1	Нет	Нет	0.001
реализации	1	Нет	Нет	0.001
примеру	1	Нет	Нет	0.001
кнопка	2	Нет	Нет	0.002
градиентным	1	Нет	Нет	0.001
скруглёнными	1	Нет	Нет	0.001
углами	1	Нет	Нет	0.001
прозрачном	1	Нет	Нет	0.001
фоне	1	Нет	Нет	0.001
Непростая	1	Нет	Нет	0.001
стрилизация	1	Нет	Нет	0.001
многие	1	Нет	Нет	0.001
студенты	1	Нет	Нет	0.001
допускают	1	Нет	Нет	0.001
ошибки	1	Нет	Нет	0.001
недочеты	1	Нет	Нет	0.001
Разберу	1	Нет	Нет	0.001
сегодня	1	Нет	Нет	0.001
Доступность	1	Нет	Нет	0.001
анимация	3	Нет	Нет	0.003
каждом	1	Нет	Нет	0.001
сайте	1	Нет	Нет	0.001
Анимацию	1	Нет	Нет	0.001
реализовывать	1	Нет	Нет	0.001
помощи	1	Нет	Нет	0.001
любом	1	Нет	Нет	0.001
случае	1	Нет	Нет	0.001
оживляет	1	Нет	Нет	0.001
Цветные	1	Нет	Нет	0.001
Статья	2	Нет	Нет	0.002
скорее	1	Нет	Нет	0.001
студентов	1	Нет	Нет	0.001
иконку	1	Нет	Нет	0.001
добавляя	1	Нет	Нет	0.001
Горячие	1	Нет	Нет	0.001
клавиши	1	Нет	Нет	0.001
виндовс	1	Нет	Нет	0.001
видео	1	Нет	Нет	0.001
помогут	2	Нет	Нет	0.002
верстку	1	Нет	Нет	0.001
канале	1	Нет	Нет	0.001
дзен	1	Нет	Нет	0.001
проектов	2	Нет	Нет	0.002
Деплой	3	Нет	Нет	0.003
удалённый	1	Нет	Нет	0.001
сервер	1	Нет	Нет	0.001
гитхабе	2	Нет	Нет	0.002
ли	1	Нет	Нет	0.001
сборку	1	Нет	Нет	0.001
отправить	1	Нет	Нет	0.001
сразу	1	Нет	Нет	0.001
хостинг	1	Нет	Нет	0.001
захотел	1	Нет	Нет	0.001
выложить	1	Нет	Нет	0.001
GitHub	1	Нет	Нет	0.001
Pages	1	Нет	Нет	0.001
Сначала	1	Нет	Нет	0.001
пошел	1	Нет	Нет	0.001
ютуб	1	Нет	Нет	0.001
потом	1	Нет	Нет	0.001
несколько	1	Нет	Нет	0.001
Picture	2	Нет	Нет	0.002
оптимизация	1	Нет	Нет	0.001
графики	1	Нет	Нет	0.001
Тег	2	Нет	Нет	0.002
достаточно	1	Нет	Нет	0.001
технология	1	Нет	Нет	0.001
позволяющая	1	Нет	Нет	0.001
упростить	1	Нет	Нет	0.001
работу	1	Нет	Нет	0.001
оптимизировать	1	Нет	Нет	0.001
вёрстки	1	Нет	Нет	0.001
img	3	Нет	Нет	0.003
атрибуты	1	Нет	Нет	0.001
самое	1	Нет	Нет	0.001
сложный	1	Нет	Нет	0.001
верстке	1	Нет	Нет	0.001
играет	1	Нет	Нет	0.001
важную	1	Нет	Нет	0.001
роль	1	Нет	Нет	0.001
графика	1	Нет	Нет	0.001
например	1	Нет	Нет	0.001
ДемоСетки	1	Нет	Нет	0.001
галереи	2	Нет	Нет	0.002
Подкатили	1	Нет	Нет	0.001
новые	1	Нет	Нет	0.001
демки	1	Нет	Нет	0.001
гридах	2	Нет	Нет	0.002
вторая	1	Нет	Нет	0.001
флексах	2	Нет	Нет	0.002
каждой	1	Нет	Нет	0.001
плюсы	1	Нет	Нет	0.001
минусы	1	Нет	Нет	0.001
высоту	1	Нет	Нет	0.001
картинкам	1	Нет	Нет	0.001
уровнять	1	Нет	Нет	0.001
размеры	1	Нет	Нет	0.001
пропорции	2	Нет	Нет	0.002
потеряться	1	Нет	Нет	0.001
добавлять	1	Нет	Нет	0.001
лишние	1	Нет	Нет	0.001
классы	1	Нет	Нет	0.001
более	1	Нет	Нет	0.001
жестко	1	Нет	Нет	0.001
поддерживать	1	Нет	Нет	0.001
картинок	1	Нет	Нет	0.001
Треугольник	2	Нет	Нет	0.002
Пенроуза	2	Нет	Нет	0.002
чистом	3	Нет	Нет	0.003
DOCTYPE	1	Нет	Нет	0.001
lang	1	Нет	Нет	0.001
en	1	Нет	Нет	0.001
head	1	Нет	Нет	0.001
meta	2	Нет	Нет	0.002
charset	1	Нет	Нет	0.001
UTF	1	Нет	Нет	0.001
name	1	Нет	Нет	0.001
viewport	1	Нет	Нет	0.001
content	1	Нет	Нет	0.001
width	2	Нет	Нет	0.002
device-width	1	Нет	Нет	0.001
initial-scale	1	Нет	Нет	0.001
title	2	Нет	Нет	0.002
Document	1	Нет	Нет	0.001
Выпадающее	3	Нет	Нет	0.003
меню	3	Нет	Нет	0.003
Простое	2	Нет	Нет	0.002
button	1	Нет	Нет	0.001
a	1	Нет	Нет	0.001
display	1	Нет	Нет	0.001
box-sizing	1	Нет	Нет	0.001
border-box	1	Нет	Нет	0.001
max-width	1	Нет	Нет	0.001
180px	1	Нет	Нет	0.001
height	1	Нет	Нет	0.001
padding	1	Нет	Нет	0.001
6px	1	Нет	Нет	0.001
overflow	1	Нет	Нет	0.001
hidden	1	Нет	Нет	0.001
font-size	1	Нет	Нет	0.001
inherit	1	Нет	Нет	0.001
font-family	1	Нет	Нет	0.001
Arial	1	Нет	Нет	0.001
Helvetica	1	Нет	Нет	0.001
sans-serif	1	Нет	Нет	0.001
text-align	1	Нет	Нет	0.001
left	1	Нет	Нет	0.001
color	2	Нет	Нет	0.002
0000EE	1	Нет	Нет	0.001
text-decoration	1	Нет	Нет	0.001
none	2	Нет	Нет	0.002
white-space	1	Нет	Нет	0.001
nowrap	1	Нет	Нет	0.001
text-overflow	1	Нет	Нет	0.001
ellipsis	1	Нет	Нет	0.001
background-color	2	Нет	Нет	0.002
beige	1	Нет	Нет	0.001
transition	2	Нет	Нет	0.002
25s	3	Нет	Нет	0.003
ease-in-out	3	Нет	Нет	0.003
appearance	1	Нет	Нет	0.001
Смена	2	Нет	Нет	0.002
цвета	2	Нет	Нет	0.002
картинки	2	Нет	Нет	0.002
filter	3	Нет	Нет	0.003
hue-rotate	2	Нет	Нет	0.002
data-color	1	Нет	Нет	0.001
img1	1	Нет	Нет	0.001
0deg	1	Нет	Нет	0.001

Исходный контент страницы, слов (1181)

Записки верстальщика Открыть менюCSS JS SVG Статьи Demo Записки верстальщика ensp Собрание демок и фич для верстальщиковcss has родительский селекторЗа годы работы с HTML CSS и немного JavaScript я замечаю одну приятную закономерность ВЭБ развивается Причем развивается очень быстро Для некоторых действий раньше приходилось писать много кода для построения сеток но пришли Flex и Grid читать статью Shape outside не стандартные фигурыИногда дизайнеры добавляют не очень стандартные элементы в макеты Ну как на скриншоте ниже Скриншот из фигмы слева круглый элемент который по контуру обтекаетчитать статью Кастомные progress и meter На сайтах часто можно встретить элементы как ниже на картинке Подробно о их предназначении говорить не буду есть ссылки на MDN progress и meter читать статью Странный заголовок Относительно недавно встретил такой заголовок к которому у меня есть вопросы На самом деле это не заголовок но важная часть страницы читать статью Кастомные чекбоксы и радиокнопки Браузерные чекбоксы и радиокнопки в разных браузерах могут выглядеть по-разному Кроме того внешний вид этих элементов практически всегда читать статью Фон для сайтаПрактически у каждого сайта есть элементы с фоном вся страница отдельные блоки кнопки иконки многое другое Но на самом деле это читать статью CSS counterКак стилизовать упорядоченные списки Как добавить ведущий ноль утакого списка Что делать если у вас вложенный список Самый простой читать статью image-set Image-set это интересный метод который появился недавно но я жду с нетерпеньем когда он заработает заработает во всех браузерах читать статью Селекторы по атрибутам Селекторы по атрибутам это довольно интересная тема которая открывает кучу возможностей во время верстки макета Некоторые из таких читать статью Дочерний селектор Тут все просто в текущем блоке с помощью знака gt выбираем дочерний элемент Рассмотрим на примере как это работает lt style gt читать статью Соседский селектор quot Соседский quot селектор выбирает соседний селектор Для примера можно написать такую HTML вёрстку lt div class quot block quot gt lt span gt читать статью Братский селектор Данный селектор выбирает все элементы после выбранного внутри родителя Проще говоря выбирает все элементы после выбранного читать статью Анимированный кот без SVG Для своего же сайта пишу шаблон ну и в дальнейшем этот шаблон применю в wordpress Дошло дело до страницы и надо что то думать читать статью JSЗвездное небо на canvas Нет на свете проблем есть задачи и вопросы Решил сделать для себя сайт а на главной нужно было сделать звёздное небо Как-то скучно было брать читать статью Плагин всплывающих подсказок Небольшой плагин всплывающих подсказок или quot чипсов quot В коде используются приёмы и технологии для удобного использования как кода разработчиком читать статью Модальное окно Что такое всплывающее модальное окно Думаю проще разобраться если начать с простого что такое всплывающее окно Всплывающее окно это блок который читать статью Кастомный спойлер на HTML Кастонмый спойлер что это Спойлер с англ to spoil портить преждевременно раскрытая важная сюжетная информация которая разрушает читать статью Анимированный таймер на SVG А вот еще один таймер В нем используется библиотека Snapsvg Для работы данного таймера необходимо лишь подключить timer js и вызвать читать статью Котик на SVG следящий за курсором Поводи курсором возле кота Код очень старый до 2018го года не судите строго HTML lt script type quot text javascript quot src quot https releases читать статью SVGКак добавить SVG на страницу правильно Всем привет недавно задумался а как же лучше подключить вектор на страницу Вспомнил четыре способа и сейчас расскажу о них У каждого способа читать статью Текст градиентом На днях мне пришлось верстать креатив в котором есть текст градиентом Мне не часто приходится сталкиваться с такими вещами по этому пришлось читать статью Патерны в SVG Вот как можно разукрасить SVG с помощью pattern Сложного ничего нет В svg в defs добавляем тэг pattern с необходимыми атрибутами и path и видим читать статью Милый котик на SVG Мой первый рисунок на SVG Он конечно очень простой но это первый рисунок который я сам нарисовал на SVG и анимировал с помощью CSS а в читать статью СтатьиЛенивая загрузка lt iframe gt Ленивая загрузка iframe сильно уменьшает скорость загрузки страницы А требование от заказчика ускорить загрузку страницы не просто прихоть Особенно когда заказчик открывает новый сервис Ведь не каждый пользователь будет ждать долго загрузку страницы читать статью Не простая ссылка Без чего не может существовать ни одна веб страница в интернете Даже если этого элемента нет на самой странице всё равно без него не может существовать эта страница Это один из самых распространённых элементов страниц ссылка читать статью Эммет и сниппеты Скорость работы над проектом зависит от нескольких факторов знание профессии умение поставить задачу умение владеть инструментами ну и умение быстро печатать А читать статью Border с градиентом Иногда дизайнеры задают интересные задачки которые требуют подумать о реализации Вот к примеру кнопка с градиентным фоном и скруглёнными углами на прозрачном фоне читать статью Непростая стрилизация простой кнопки Есть такой простой элемент кнопка у которого многие студенты допускают ошибки и недочеты Разберу сегодня этот не простой читать статью Доступность и анимация Практически на каждом сайте есть анимация Анимацию можно реализовывать при помощи css или js В любом случае анимация оживляет сайт читать статью Цветные иконки Привет Статья скорее для студентов Расскажу как добавить на страницу сайта иконку не добавляя её в html и как быть если нужно читать статью Горячие клавиши в виндовс У меня уже есть видео которые помогут ускорить верстку на моём канале в дзен которые помогут ускорить вёрстку проектов Но ускорить читать статью Деплой сайта на удалённый сервер У меня уже есть статья Деплой сайта на гитхабе ну а можно ли сборку отправить сразу на хостинг Конечно можно и довольно просто читать статью Деплой сайта на гитхабе Всем привет Относительно недавно я захотел один из проектов выложить на GitHub Pages Сначала пошел на ютуб потом несколько читать статью Picture оптимизация графики Тег picture достаточно интересная технология позволяющая упростить работу над проектом и оптимизировать сайт во время вёрстки не читать статью Тэг lt img gt и его атрибуты Тег img это довольно простой и в то же самое время сложный элемент В верстке играет важную роль Вся важная графика например читать статью ДемоСетки для галереи Подкатили новые демки для сеток галереи Одна на гридах вторая на флексах У каждой есть свои плюсы и минусы На флексах можно добавить высоту картинкам что бы немного уровнять размеры но пропорции могут потеряться А на гридах необходимо добавлять лишние классы Но при этом можно более жестко поддерживать пропорции картинок читать статью Треугольник Пенроуза Треугольник Пенроуза на чистом CSS lt DOCTYPE html gt lt html lang quot en quot gt lt head gt lt meta charset quot UTF quot gt lt meta name quot viewport quot content quot width device-width initial-scale quot gt lt title gt Document lt title gt читать статью Выпадающее меню Простое выпадающее меню на чистом CSS Простое выпадающее меню на чистом CSS Ссылка Ссылка Ссылка CSS button a display block box-sizing border-box width max-width 180px height padding 6px overflow hidden font-size inherit font-family Arial Helvetica sans-serif text-align left color 0000EE text-decoration none white-space nowrap text-overflow ellipsis background-color beige border transition color 25s ease-in-out background-color 25s ease-in-out appearance none читать статью Смена цвета картинки Смена цвета картинки CSS CSS img filter hue-rotate transition filter 25s ease-in-out data-color quot img1 quot filter hue-rotate 0deg читать статью

Контент страницы без стоп-слов, слов (878), без повторов (530)

Записки верстальщика Открыть менюCSS JS SVG Статьи Demo Записки верстальщика ensp Собрание демок фич верстальщиковcss has родительский селекторЗа годы работы HTML CSS немного JavaScript замечаю приятную закономерность ВЭБ развивается Причем развивается очень быстро некоторых действий раньше приходилось писать много кода построения сеток пришли Flex Grid читать статью Shape outside стандартные фигурыИногда дизайнеры добавляют очень стандартные элементы макеты Ну скриншоте ниже Скриншот фигмы слева круглый элемент контуру обтекаетчитать статью Кастомные progress meter сайтах часто можно встретить элементы ниже картинке Подробно предназначении говорить ссылки MDN progress meter читать статью Странный заголовок Относительно недавно встретил заголовок вопросы самом деле заголовок важная часть страницы читать статью Кастомные чекбоксы радиокнопки Браузерные чекбоксы радиокнопки разных браузерах выглядеть по-разному Кроме внешний вид элементов практически всегда читать статью Фон сайтаПрактически каждого сайта элементы фоном страница отдельные блоки кнопки иконки многое другое самом деле читать статью CSS counterКак стилизовать упорядоченные списки добавить ведущий ноль утакого списка делать вложенный список Самый простой читать статью image-set Image-set интересный метод появился недавно жду нетерпеньем заработает заработает браузерах читать статью Селекторы атрибутам Селекторы атрибутам довольно интересная тема открывает кучу возможностей время верстки макета Некоторые читать статью Дочерний селектор Тут просто текущем блоке помощью знака gt выбираем дочерний элемент Рассмотрим примере работает lt style gt читать статью Соседский селектор quot Соседский quot селектор выбирает соседний селектор примера можно написать HTML вёрстку lt div class quot block quot gt lt span gt читать статью Братский селектор Данный селектор выбирает элементы после выбранного внутри родителя Проще говоря выбирает элементы после выбранного читать статью Анимированный кот без SVG сайта пишу шаблон ну дальнейшем шаблон применю wordpress Дошло дело страницы надо думать читать статью JSЗвездное небо canvas свете проблем задачи вопросы Решил сделать сайт главной нужно сделать звёздное небо Как-то скучно брать читать статью Плагин всплывающих подсказок Небольшой плагин всплывающих подсказок quot чипсов quot коде используются приёмы технологии удобного использования кода разработчиком читать статью Модальное окно всплывающее модальное окно Думаю проще разобраться начать простого всплывающее окно Всплывающее окно блок читать статью Кастомный спойлер HTML Кастонмый спойлер Спойлер англ spoil портить преждевременно раскрытая важная сюжетная информация разрушает читать статью Анимированный таймер SVG таймер используется библиотека Snapsvg работы данного таймера необходимо лишь подключить timer js вызвать читать статью Котик SVG следящий курсором Поводи курсором возле кота Код очень старый 2018го года судите строго HTML lt script type quot text javascript quot src quot https releases читать статью SVGКак добавить SVG страницу правильно привет недавно задумался лучше подключить вектор страницу Вспомнил четыре способа сейчас расскажу каждого способа читать статью Текст градиентом днях пришлось верстать креатив текст градиентом часто приходится сталкиваться вещами пришлось читать статью Патерны SVG можно разукрасить SVG помощью pattern Сложного ничего svg defs добавляем тэг pattern необходимыми атрибутами path видим читать статью Милый котик SVG первый рисунок SVG конечно очень простой первый рисунок нарисовал SVG анимировал помощью CSS читать статью СтатьиЛенивая загрузка lt iframe gt Ленивая загрузка iframe сильно уменьшает скорость загрузки страницы требование заказчика ускорить загрузку страницы просто прихоть Особенно заказчик открывает новый сервис Ведь каждый пользователь ждать долго загрузку страницы читать статью простая ссылка Без существовать ни веб страница интернете Даже элемента самой странице равно без существовать страница самых распространённых элементов страниц ссылка читать статью Эммет сниппеты Скорость работы над проектом зависит нескольких факторов знание профессии умение поставить задачу умение владеть инструментами ну умение быстро печатать читать статью Border градиентом Иногда дизайнеры задают интересные задачки требуют подумать реализации примеру кнопка градиентным фоном скруглёнными углами прозрачном фоне читать статью Непростая стрилизация простой кнопки простой элемент кнопка многие студенты допускают ошибки недочеты Разберу сегодня простой читать статью Доступность анимация Практически каждом сайте анимация Анимацию можно реализовывать помощи css js любом случае анимация оживляет сайт читать статью Цветные иконки Привет Статья скорее студентов Расскажу добавить страницу сайта иконку добавляя html нужно читать статью Горячие клавиши виндовс видео помогут ускорить верстку канале дзен помогут ускорить вёрстку проектов ускорить читать статью Деплой сайта удалённый сервер статья Деплой сайта гитхабе ну можно ли сборку отправить сразу хостинг Конечно можно довольно просто читать статью Деплой сайта гитхабе привет Относительно недавно захотел проектов выложить GitHub Pages Сначала пошел ютуб потом несколько читать статью Picture оптимизация графики Тег picture достаточно интересная технология позволяющая упростить работу над проектом оптимизировать сайт время вёрстки читать статью Тэг lt img gt атрибуты Тег img довольно простой самое время сложный элемент верстке играет важную роль важная графика например читать статью ДемоСетки галереи Подкатили новые демки сеток галереи гридах вторая флексах каждой плюсы минусы флексах можно добавить высоту картинкам немного уровнять размеры пропорции потеряться гридах необходимо добавлять лишние классы можно более жестко поддерживать пропорции картинок читать статью Треугольник Пенроуза Треугольник Пенроуза чистом CSS lt DOCTYPE html gt lt html lang quot en quot gt lt head gt lt meta charset quot UTF quot gt lt meta name quot viewport quot content quot width device-width initial-scale quot gt lt title gt Document lt title gt читать статью Выпадающее меню Простое выпадающее меню чистом CSS Простое выпадающее меню чистом CSS Ссылка Ссылка Ссылка CSS button a display block box-sizing border-box width max-width 180px height padding 6px overflow hidden font-size inherit font-family Arial Helvetica sans-serif text-align left color 0000EE text-decoration none white-space nowrap text-overflow ellipsis background-color beige border transition color 25s ease-in-out background-color 25s ease-in-out appearance none читать статью Смена цвета картинки Смена цвета картинки CSS CSS img filter hue-rotate transition filter 25s ease-in-out data-color quot img1 quot filter hue-rotate 0deg читать статью

HTML код страницы, символов всего (35459)

<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="zen-verification" content="Wj6QmMKN8RXwIiPpdg45mlvK5z00lslVYe54i0HEwbSXDfGXRYpEbNrDCzAatzvE"><meta name="yandex-verification" content="5043509ffc270851"><meta name="google-site-verification" content="xJyxyY23NRA12j-LeQmMEsoko9LRLuZByDGOetRI5PQ"><link rel="canonical" href="https://uzinok.ru"><base href="./"><link rel="preload" href="./fonts/Roboto-Regular.woff2" as="font" type="font/woff2"><link rel="preload" href="./fonts/RobotoCondensed-Regular.woff2" as="font" type="font/woff2"><meta name="referrer" content="origin"><link rel="apple-touch-icon" sizes="180x180" href="https://uzinok.ru/img/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://uzinok.ru/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://uzinok.ru/img/favicon/favicon-16x16.png"><link rel="icon" href="https://uzinok.ru/favicon.ico" type="image/x-icon"><link rel="manifest" href="https://uzinok.ru/img/favicon/site.webmanifest"><link rel="mask-icon" href="https://uzinok.ru/img/favicon/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-square70x70logo" content="https://uzinok.ru/img/favicon/mstile-70x70.png"><meta name="msapplication-square144x144logo" content="https://uzinok.ru/img/favicon/mstile-144x144.png"><meta name="msapplication-square150x150logo" content="https://uzinok.ru/img/favicon/mstile-150x150.png"><meta name="msapplication-wide310x150logo" content="https://uzinok.ru/img/favicon/mstile-310x150.png"><meta name="msapplication-square310x310logo" content="https://uzinok.ru/img/favicon/mstile-310x310.png"><meta name="msapplication-TileColor" content="#2d89ef"><meta name="theme-color" content="#ffffff"><meta property="og:title" content="Записки верстальщика"><meta property="og:type" content="og:object"><meta property="og:url" content="/"><meta property="og:description" content="Сбор шпаргалок, и некоторых редких свойств"><meta property="og:image" content="https://uzinok.ru/img/favicon/open-graph.png"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Записки верстальщика</title><meta name="keywords" content="вёрстка сайтов, адаптивная вёрстка"><meta name="description" content="Сбор шпаргалок, и некоторых редких свойств"><link rel="stylesheet" href="styles/index.min.css"> </head><body class="no-js index"><canvas class="bg-canvas" id="bg-canvas"></canvas><header class="header header--index"><div class="header__container container"><nav class="header__nav"><a class="header__logo logo" href="https://uzinok.ru/" aria-label="Записки верстальщика" aria-current="page"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="60" height="60" role="img" aria-label="Логотип Записки верстальщика"><circle fill="#050818" cx="32" cy="32" r="32"/><path fill="#fff" d="M7.75 32.98v-1.99l9.01-5.92v3.41l-5.44 3.43v.16l5.44 3.43v3.43l-9.01-5.95zm12.06 10.1v-2.81h11.34v2.81H19.81zm14.4 0 7.41-22.16h3.04l-7.41 22.16h-3.04zm13.03-7.58 5.44-3.43v-.16l-5.44-3.43v-3.41l9.01 5.9v1.99l-9.01 5.97V35.5z"/></svg> <span>Записки верстальщика</span></a> <button class="header__nav-toggle header__nav-toggle--close" id="menubutton" type="button"><span class="visually-hidden">Открыть меню</span></button><ul class="header__list" id="menu"><li class="header__item"><a class="header__link" href="#css" aria-current="page">CSS</a></li><li class="header__item"><a class="header__link" href="#js" aria-current="page">JS</a></li><li class="header__item"><a class="header__link" href="#svg" aria-current="page">SVG</a></li><li class="header__item"><a class="header__link" href="#article" aria-current="page">Статьи</a></li><li class="header__item"><a class="header__link" href="#demo" aria-current="page">Demo</a></li></ul></nav></div></header><main><section class="top top--after"><div class="top__container container"><h1><span class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false" width="100" height="100"><circle fill="#f7f6ff" cx="32" cy="32" r="32"/><path fill="#17152f" d="M7.75 32.98v-1.99l9.01-5.92v3.41l-5.44 3.43v.16l5.44 3.43v3.43l-9.01-5.95zm12.06 10.1v-2.81h11.34v2.81H19.81zm14.4 0 7.41-22.16h3.04l-7.41 22.16h-3.04zm13.03-7.58 5.44-3.43v-.16l-5.44-3.43v-3.41l9.01 5.9v1.99l-9.01 5.97V35.5z"/></svg> </span>Записки верстальщика&ensp;<span>Собрание демок и фич для верстальщиков</span></h1></div></section><section id="css"><div class="container"><h2><a href="article/css/">css</a></h2><div class="slider" aria-roledescription="carousel"><ul class="slider__list"><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/has/">:has() — родительский селектор</a></h3><blockquote cite="https://uzinok.ru/article/css/has/"><p class="card__desc">За годы работы с HTML, CSS и немного JavaScript я замечаю одну приятную закономерность: ВЭБ развивается. Причем развивается очень быстро. Для некоторых действий раньше приходилось писать много кода для построения сеток но пришли Flex и Grid.</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/has/">читать статью</a> <time class="card__date" datetime="2024-02-20">20.02.2024</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/shape_outside/">Shape outside — не стандартные фигуры</a></h3><blockquote cite="https://uzinok.ru/article/css/shape_outside/"><p class="card__desc">Иногда дизайнеры добавляют не очень стандартные элементы в макеты. Ну как на скриншоте ниже: Скриншот из фигмы, слева круглый элемент который по контуру обтекает</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/shape_outside/">читать статью</a> <time class="card__date" datetime="2024-01-10">10.01.2024</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/progress_and_meter_custom_css/">Кастомные progress и meter.</a></h3><blockquote cite="https://uzinok.ru/article/css/progress_and_meter_custom_css/"><p class="card__desc">На сайтах часто можно встретить элементы как ниже на картинке. Подробно о их предназначении говорить не буду, есть ссылки на MDN progress и meter...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/progress_and_meter_custom_css/">читать статью</a> <time class="card__date" datetime="2023-11-22">22.11.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/strange_title/">Странный заголовок.</a></h3><blockquote cite="https://uzinok.ru/article/css/strange_title/"><p class="card__desc">Относительно недавно встретил такой заголовок, к которому у меня есть вопросы. На самом деле это не заголовок, но важная часть страницы...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/strange_title/">читать статью</a> <time class="card__date" datetime="2023-08-16">16.08.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/сustom_checkboxes_and_radio_buttons/">Кастомные чекбоксы и радиокнопки.</a></h3><blockquote cite="https://uzinok.ru/article/css/сustom_checkboxes_and_radio_buttons/"><p class="card__desc">Браузерные чекбоксы и радиокнопки в разных браузерах могут выглядеть по-разному. Кроме того, внешний вид этих элементов практически всегда...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/сustom_checkboxes_and_radio_buttons/">читать статью</a> <time class="card__date" datetime="2023-07-17">17.07.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/background/">Фон для сайта</a></h3><blockquote cite="https://uzinok.ru/article/css/background/"><p class="card__desc">Практически у каждого сайта есть элементы с фоном: вся страница, отдельные блоки, кнопки, иконки многое другое. Но на самом деле это ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/background/">читать статью</a> <time class="card__date" datetime="2023-07-02">02.07.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/css_counter/">CSS counter</a></h3><blockquote cite="https://uzinok.ru/article/css/css_counter/"><p class="card__desc">Как стилизовать упорядоченные списки? Как добавить ведущий ноль утакого списка? Что делать если у вас вложенный список? Самый простой...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/css_counter/">читать статью</a> <time class="card__date" datetime="2023-06-25">25.06.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/image_set/">image-set.</a></h3><blockquote cite="https://uzinok.ru/article/css/image_set/"><p class="card__desc">Image-set это интересный метод, который появился недавно, но я жду с нетерпеньем, когда он заработает заработает во всех браузерах...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/image_set/">читать статью</a> <time class="card__date" datetime="2023-04-23">23.04.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/css_attribute_selectors/">Селекторы по атрибутам.</a></h3><blockquote cite="https://uzinok.ru/article/css/css_attribute_selectors/"><p class="card__desc">«Селекторы по атрибутам» это довольно интересная тема, которая открывает кучу возможностей во время верстки макета. Некоторые из таких ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/css_attribute_selectors/">читать статью</a> <time class="card__date" datetime="2022-12-06">06.12.2022</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/child_css_selector/">Дочерний селектор.</a></h3><blockquote cite="https://uzinok.ru/article/css/child_css_selector/"><p class="card__desc">Тут все просто: в текущем блоке с помощью знака &gt; выбираем дочерний элемент. Рассмотрим на примере как это работает: &lt;style&gt;...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/child_css_selector/">читать статью</a> <time class="card__date" datetime="2022-07-26">26.07.2022</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/css_neighbor_selector/">Соседский селектор.</a></h3><blockquote cite="https://uzinok.ru/article/css/css_neighbor_selector/"><p class="card__desc">&quot;Соседский&quot; селектор выбирает соседний селектор. Для примера можно написать такую HTML вёрстку &lt;div class=&quot;block-2&quot;&gt; &lt;span&gt;...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/css_neighbor_selector/">читать статью</a> <time class="card__date" datetime="2022-07-26">26.07.2022</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/fraternal_css_selector/">Братский селектор.</a></h3><blockquote cite="https://uzinok.ru/article/css/fraternal_css_selector/"><p class="card__desc">Данный селектор выбирает все элементы после выбранного, внутри родителя. Проще говоря: выбирает все элементы после выбранного. ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/fraternal_css_selector/">читать статью</a> <time class="card__date" datetime="2022-07-26">26.07.2022</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/css/kot_murzik_na_css/">Анимированный кот без SVG.</a></h3><blockquote cite="https://uzinok.ru/article/css/kot_murzik_na_css/"><p class="card__desc">Для своего же сайта пишу шаблон, ну и в дальнейшем этот шаблон применю в wordpress. Дошло дело до страницы 404 и надо что то думать. ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/css/kot_murzik_na_css/">читать статью</a> <time class="card__date" datetime="2019-12-16">16.12.2019</time></p></article></div></li></ul><div class="slider__pagination-wrap"></div></div></div></section><section id="js"><div class="container"><h2><a href="article/js/">JS</a></h2><div class="slider" aria-roledescription="carousel"><ul class="slider__list"><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/starry_sky_canvas/">Звездное небо на canvas.</a></h3><blockquote cite="https://uzinok.ru/article/js/starry_sky_canvas/"><p class="card__desc">Нет на свете проблем, есть задачи и вопросы. Решил сделать для себя сайт, а на главной нужно было сделать звёздное небо. Как-то скучно было брать...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/starry_sky_canvas/">читать статью</a> <time class="card__date" datetime="2023-04-16">16.04.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/chips/">Плагин всплывающих подсказок.</a></h3><blockquote cite="https://uzinok.ru/article/js/chips/"><p class="card__desc">Небольшой плагин всплывающих подсказок, или &quot;чипсов&quot;. В коде используются приёмы и технологии для удобного использования как кода разработчиком,...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/chips/">читать статью</a> <time class="card__date" datetime="2021-07-05">05.07.2021</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/modal_window/">Модальное окно.</a></h3><blockquote cite="https://uzinok.ru/article/js/modal_window/"><p class="card__desc">Что такое всплывающее модальное окно? Думаю проще разобраться если начать с простого: что такое всплывающее окно? Всплывающее окно это блок который...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/modal_window/">читать статью</a> <time class="card__date" datetime="2021-06-27">27.06.2021</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/custom_spoiler_html5/">Кастомный спойлер на HTML-5.</a></h3><blockquote cite="https://uzinok.ru/article/js/custom_spoiler_html5/"><p class="card__desc">Кастонмый спойлер что это? Спойлер (с англ. — «to spoil», «портить») — преждевременно раскрытая важная сюжетная информация, которая разрушает...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/custom_spoiler_html5/">читать статью</a> <time class="card__date" datetime="2020-07-29">29.07.2020</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/timer_snapsvg/">Анимированный таймер на SVG.</a></h3><blockquote cite="https://uzinok.ru/article/js/timer_snapsvg/"><p class="card__desc">А вот еще один таймер. В нем используется библиотека Snapsvg. Для работы данного таймера необходимо лишь подключить timer.js и вызвать ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/timer_snapsvg/">читать статью</a> <time class="card__date" datetime="2019-09-04">04.09.2019</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/js/the_cat_follows_the_cursor/">Котик на SVG следящий за курсором.</a></h3><blockquote cite="https://uzinok.ru/article/js/the_cat_follows_the_cursor/"><p class="card__desc">Поводи курсором возле кота Код очень старый, до 2018го года)) не судите строго)) HTML &lt;script type=&quot;text/javascript&quot; src=&quot;https://releases...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/js/the_cat_follows_the_cursor/">читать статью</a> <time class="card__date" datetime="2019-09-04"></time></p></article></div></li></ul><div class="slider__pagination-wrap"></div></div></div></section><section id="svg"><div class="container"><h2><a href="article/svg/">SVG</a></h2><div class="slider" aria-roledescription="carousel"><ul class="slider__list"><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/svg/add_svg_to_page/">Как добавить SVG на страницу правильно?</a></h3><blockquote cite="https://uzinok.ru/article/svg/add_svg_to_page/"><p class="card__desc">Всем привет, недавно задумался, а как же лучше подключить вектор на страницу? Вспомнил четыре способа и сейчас расскажу о них. У каждого способа ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/svg/add_svg_to_page/">читать статью</a> <time class="card__date" datetime="2021-05-20">20.05.2021</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/svg/gradient_text/">Текст градиентом.</a></h3><blockquote cite="https://uzinok.ru/article/svg/gradient_text/"><p class="card__desc">На днях мне пришлось верстать креатив в котором есть текст градиентом. Мне не часто приходится сталкиваться с такими вещами, по этому пришлось...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/svg/gradient_text/">читать статью</a> <time class="card__date" datetime="2021-01-17">17.01.2021</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/svg/patterns_in_svg/">Патерны в SVG.</a></h3><blockquote cite="https://uzinok.ru/article/svg/patterns_in_svg/"><p class="card__desc">Вот как можно разукрасить SVG с помощью pattern. Сложного ничего нет. В svg в defs добавляем тэг pattern с необходимыми атрибутами и path и видим...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/svg/patterns_in_svg/">читать статью</a> <time class="card__date" datetime="2019-03-17">17.03.2019</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/svg/сute_cat_on_svg/">Милый котик на SVG.</a></h3><blockquote cite="https://uzinok.ru/article/svg/сute_cat_on_svg/"><p class="card__desc">Мой первый рисунок на SVG. Он конечно очень простой, но это первый рисунок который я сам нарисовал на SVG и анимировал с помощью CSS, а в ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/svg/сute_cat_on_svg/">читать статью</a> <time class="card__date" datetime="2019-03-17"></time></p></article></div></li></ul><div class="slider__pagination-wrap"></div></div></div></section><section id="article"><div class="container"><h2><a href="article/article/">Статьи</a></h2><div class="slider" aria-roledescription="carousel"><ul class="slider__list"><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/loading_lazy_iframe/">Ленивая загрузка &lt;iframe&gt;.</a></h3><blockquote cite="https://uzinok.ru/article/article/loading_lazy_iframe/"><p class="card__desc">Ленивая загрузка iframe — сильно уменьшает скорость загрузки страницы. А требование от заказчика ускорить загрузку страницы не просто прихоть. Особенно когда заказчик открывает новый сервис. Ведь не каждый пользователь будет ждать долго загрузку страницы.</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/loading_lazy_iframe/">читать статью</a> <time class="card__date" datetime="2023-04-15">15.04.2024</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/link/">Не простая ссылка.</a></h3><blockquote cite="https://uzinok.ru/article/article/link/"><p class="card__desc">Без чего не может существовать ни одна веб страница в интернете? Даже если этого элемента нет на самой странице, всё равно без него не может существовать эта страница. Это один из самых распространённых элементов страниц - ссылка.</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/link/">читать статью</a> <time class="card__date" datetime="2023-01-16">16.01.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/emmet_and_snippets/">Эммет и сниппеты.</a></h3><blockquote cite="https://uzinok.ru/article/article/emmet_and_snippets/"><p class="card__desc">Скорость работы над проектом зависит от нескольких факторов: знание профессии, умение поставить задачу, умение владеть инструментами, ну и умение быстро печатать. А ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/emmet_and_snippets/">читать статью</a> <time class="card__date" datetime="2023-12-30">30.12.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/border_gradient/">Border с градиентом.</a></h3><blockquote cite="https://uzinok.ru/article/article/border_gradient/"><p class="card__desc">Иногда дизайнеры задают интересные задачки, которые требуют подумать о реализации. Вот к примеру кнопка с градиентным фоном и скруглёнными углами на прозрачном фоне:...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/border_gradient/">читать статью</a> <time class="card__date" datetime="2023-12-24">24.12.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/button/">Непростая стрилизация простой кнопки.</a></h3><blockquote cite="https://uzinok.ru/article/article/button/"><p class="card__desc">Есть такой простой элемент – кнопка, у которого многие студенты допускают ошибки и недочеты. Разберу сегодня этот не простой...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/button/">читать статью</a> <time class="card__date" datetime="2023-11-30">30.11.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/animation_and_accessibility/">Доступность и анимация.</a></h3><blockquote cite="https://uzinok.ru/article/article/animation_and_accessibility/"><p class="card__desc">Практически на каждом сайте есть анимация. Анимацию можно реализовывать при помощи css или js. В любом случае анимация оживляет сайт...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/animation_and_accessibility/">читать статью</a> <time class="card__date" datetime="2023-08-20">20.08.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/colored_icons/">Цветные иконки.</a></h3><blockquote cite="https://uzinok.ru/article/article/colored_icons/"><p class="card__desc">Привет!) Статья скорее для студентов: Расскажу как добавить на страницу сайта иконку не добавляя её в html, и как быть если нужно...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/colored_icons/">читать статью</a> <time class="card__date" datetime="2023-05-14">14.05.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/keyboard_shortcuts/">Горячие клавиши в виндовс.</a></h3><blockquote cite="https://uzinok.ru/article/article/keyboard_shortcuts/"><p class="card__desc">У меня уже есть видео которые помогут ускорить верстку на моём канале в дзен, которые помогут ускорить вёрстку проектов. Но ускорить...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/keyboard_shortcuts/">читать статью</a> <time class="card__date" datetime="2023-05-06">06.05.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/deployment_server/">Деплой сайта на удалённый сервер.</a></h3><blockquote cite="https://uzinok.ru/article/article/deployment_server/"><p class="card__desc">У меня уже есть статья Деплой сайта на гитхабе, ну а можно ли сборку отправить сразу на хостинг? Конечно можно, и довольно просто))...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/deployment_server/">читать статью</a> <time class="card__date" datetime="2023-05-01">01.05.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/deploy/">Деплой сайта на гитхабе.</a></h3><blockquote cite="https://uzinok.ru/article/article/deploy/"><p class="card__desc">Всем привет! Относительно недавно я захотел один из проектов выложить на GitHub Pages. Сначала пошел на ютуб, потом несколько...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/deploy/">читать статью</a> <time class="card__date" datetime="2023-04-02">02.04.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/picture/">Picture – оптимизация графики.</a></h3><blockquote cite="https://uzinok.ru/article/article/picture/"><p class="card__desc">Тег picture достаточно интересная технология позволяющая упростить работу над проектом и оптимизировать сайт во время вёрстки не ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/picture/">читать статью</a> <time class="card__date" datetime="2023-01-06">06.01.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/article/img_and_attributes/">Тэг &lt;img&gt; и его атрибуты.</a></h3><blockquote cite="https://uzinok.ru/article/article/img_and_attributes/"><p class="card__desc">Тег img это довольно простой, и в то же самое время сложный элемент. В верстке играет важную роль. Вся важная графика (например ...</p></blockquote><p class="card__meta"><a class="card__link" href="./article/article/img_and_attributes/">читать статью</a> <time class="card__date" datetime="2022-11-25">25.11.2022</time></p></article></div></li></ul><div class="slider__pagination-wrap"></div></div></div></section><section id="demo"><div class="container"><h2><a href="article/demo/">Демо</a></h2><div class="slider" aria-roledescription="carousel"><ul class="slider__list"><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/demo/gallery/">Сетки для галереи.</a></h3><blockquote cite="https://uzinok.ru/article/demo/gallery/"><p class="card__desc">Подкатили новые демки для сеток галереи. Одна на гридах, вторая на флексах. У каждой есть свои плюсы и минусы. На флексах можно добавить высоту картинкам что бы немного уровнять размеры, но пропорции могут потеряться. А на гридах необходимо добавлять лишние классы. Но при этом можно более жестко поддерживать пропорции картинок.</p></blockquote><p class="card__meta"><a class="card__link" href="./article/demo/gallery/">читать статью</a> <time class="card__date" datetime="2024-01-24">24.01.2024</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/demo/penrose_triangle/">Треугольник Пенроуза.</a></h3><blockquote cite="https://uzinok.ru/article/demo/penrose_triangle/"><p class="card__desc">Треугольник Пенроуза на чистом CSS. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Document&lt;/title&gt;</p></blockquote><p class="card__meta"><a class="card__link" href="./article/demo/penrose_triangle/">читать статью</a> <time class="card__date" datetime="2023-12-29">29.12.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/demo/drop-down_menu/">Выпадающее меню.</a></h3><blockquote cite="https://uzinok.ru/article/demo/drop-down_menu/"><p class="card__desc">Простое выпадающее меню на чистом CSS. Простое выпадающее меню на чистом CSS. Ссылка 1 Ссылка 2 Ссылка 3 CSS button, a { display: block; box-sizing: border-box; width: 100%; max-width: 180px; height: 100%; padding: 6px; overflow: hidden; font-size: inherit; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #0000EE; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; background-color: beige; border: 0; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out; appearance: none; }</p></blockquote><p class="card__meta"><a class="card__link" href="./article/demo/drop-down_menu/">читать статью</a> <time class="card__date" datetime="2023-08-12">12.08.2023</time></p></article></div></li><li class="slider__item" aria-live="off" aria-roledescription="slide"><div class="slider__content"><article class="card"><h3 class="card__title"><a href="./article/demo/css_filter_color/">Смена цвета картинки.</a></h3><blockquote cite="https://uzinok.ru/article/demo/css_filter_color/"><p class="card__desc">Смена цвета картинки. # CSS CSS img { filter: hue-rotate(0); transition: filter 0.25s ease-in-out; } [data-color=&quot;img1&quot;] { filter: hue-rotate(0deg); }</p></blockquote><p class="card__meta"><a class="card__link" href="./article/demo/css_filter_color/">читать статью</a> <time class="card__date" datetime="2023-07-09">09.07.2023</time></p></article></div></li></ul><div class="slider__pagination-wrap"></div></div></div></section></main><footer class="footer"><div class="footer__container container"><ul class="social"><li class="social__item"><a class="social-link social-link--tg" href="https://t.me/zapiski_verstalshika" title="телеграмм канал"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215 215" width="29" height="29" aria-label="Телеграм" role="img"><path d="M49.3 105.7q46.9-20.5 62.5-27c29.8-12.4 36-14.5 40-14.6a7 7 0 0 1 4.2 1.3 4.5 4.5 0 0 1 1.5 2.8 19.3 19.3 0 0 1 .2 4.3c-1.6 17-8.6 58-12.1 77-1.5 8-4.5 10.8-7.4 11-6.2.6-11-4-17-8-9.4-6.2-14.7-10-23.9-16-10.6-7-3.7-10.9 2.3-17.2 1.6-1.6 29-26.6 29.5-28.8a2.2 2.2 0 0 0-.5-2 2.5 2.5 0 0 0-2.2-.1q-1.4.3-45.2 29.9-6.4 4.4-11.6 4.3c-3.9-.1-11.2-2.2-16.7-4-6.7-2.2-12-3.4-11.6-7q.4-3 8-6Z"/></svg></a></li><li class="social__item"><a class="social-link social-link--vk" href="https://vk.com/zapiski_verstalshika" title="моя страница в вк"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215 215" width="29" height="29" aria-label="ВК" role="img"><path d="M111 147c-41 0-65-28-66-76h21c1 35 16 50 28 53V71h20v30c12-1 25-15 29-30h19c-3 19-17 32-26 38a60 60 0 0 1 31 38h-22c-4-14-16-26-31-27v27Z"/></svg></a></li><li class="social__item"><a class="social-link social-link--dzen" href="https://dzen.ru/zapiski_verstalshika" title="канал на дзен"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215 215" width="29" height="29" aria-label="Дзен" role="img"><path d="M105 41c0 27-2 42-12 52s-25 12-52 12v4c27 1 42 3 52 13s12 25 12 52h4c1-27 3-42 13-52s25-12 52-13v-4c-27 0-42-2-52-12s-12-25-13-52Z"/></svg></a></li><li class="social__item"><a class="social-link social-link--yt" href="https://www.youtube.com/@zapiski_verstalshika" title="канал на ютюбе"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215 215" width="29" height="29" aria-label="Youtube" role="img"><path d="M160.5 80.2a14 14 0 0 0-9.8-9.9C142 68 107.2 68 107.2 68s-34.9 0-43.6 2.3a14 14 0 0 0-9.8 9.9c-2.4 8.7-2.4 26.8-2.4 26.8s0 18.1 2.4 26.8a14 14 0 0 0 9.8 9.9c8.7 2.3 43.6 2.3 43.6 2.3s34.8 0 43.5-2.3a14 14 0 0 0 9.8-9.9c2.4-8.7 2.4-26.8 2.4-26.8s0-18.1-2.4-26.8ZM96 123.7V90.3l29 16.7Z" data-name="YouTube"/></svg></a></li></ul><p>©&nbsp;<span class="ryear">2023</span></p></div></footer>  <noscript><div><img src="https://mc.yandex.ru/watch/93509974" style="position:absolute; left:-9999px;" alt=""></div></noscript></body></html>

Ответ сервера