На webref.ru вышло новое руководство от Уилла Бойда, посвящённое псевдоэлементам ::before и ::after.
Рассказано, что это такое и как ими пользоваться и приведены примеры использования этих псевдоэлементов — создание декоративных заголовков, оформление цитат с помощью кавычек, изменение маркеров списка, анимация и другие темы.
htmlbook.ru перешёл на хостинг Beget. Переход был вызван наобходимостью снижения расходов и повышения надёжности и скорости работы сайта.
Сама смена хостинга должна была пройти незаметно и без всяких остановок работы, но если, тем не менее, возникнут какие-то проблемы с доступом к сайту или его работой, дайте знать. Пишите на ящик vlad@htmlbook.ru или в комментариях.
На webref.ru добавлен новый курс CSS-анимация для начинающих. Это перевод книги CSS Animation 101 от Донована Хатчинсона.
В книге рассмотрены следующие темы:
Всё сопровождается примерами с CodePen, так что можно не только посмотреть примеры в работе, но и внести в них какие-то изменения.
Без анимации сейчас ни один сайт не обходится, так что изучать эту тему надо обязательно.
Элемент <meter> применяется для визуального представления числа в заданном диапазоне. <meter> прекрасно стилизуется, хотя браузеры используют для этой цели свои специфические наборы псевдоэлементов. На мой взгляд, <meter> используют необоснованно редко, хотя это простой, наглядный и легко стилизуемый элемент.
На webref.ru вышел курс посвящённый стилизации <meter>. В нём рассматривается как его использовать, как стилизовать под Firefox, Chrome и другие браузеры. Чем хорош <meter>, так это тем, что на нём можно отработать практически все приёмы вёрстки. Поэтому рассмотрены следующие темы:
К каждому уроку приводятся задания на закрепление материала и задачи для самостоятельного решения. В конце курса можно пройти финальную викторину.
Для изменения вида маркеров в списке издавна используется приём с псевдоэлементом ::before. Для начала скрываем исходные маркеры через свойство list-style.
li { list-style: none; }Затем добавляем свои маркеры с помощью комбинации ::before и свойства content.
li::before {
content: '►';
}Большой популярностью пользуется справочник HTML, поэтому обновил локальную версию, которая не требует подключения к Интернету и пользоваться ей можно даже в деревне. Был бы компьютер только.
Все примеры со всеми картинками теперь можно смотреть сразу в браузере!
Вот форма сразу для оплаты. Справочник стоит 59 рублей (с учётом комиссии обойдётся рублей в 65 примерно); как обычно, считайте это поддержкой сайта, чтобы в будущем были новые учебные курсы и руководства. Без вашей поддержки ничего этого не будет.
Кто уже приобретал, обновление должно прийти автоматом, лишний раз платить ничего не нужно.
Сделал небольшой видеоролик, посвящённый довольно редко используемому псевдоэлементу ::first-line. Как вам такой формат рассказа о CSS? Запланировано ещё несколько подобных видео.
На сайте webref.ru обновился справочник HTML. На самом деле изменения в справочник вносятся постоянно и в какой-то момент их количество становится столь велико, что об этом можно заявить отдельно.
Итак, что стало нового.
Выравнивание текста появилось в CSS ещё в первой версии и в каком-то смысле копировало возможности текстовых редакторов.
В текстовых абзацах выравнивание по умолчанию происходит по левому краю, а правый же край остаётся неровным, в виде «лесенки». Для большинства текстов это смотрится вполне естественно, да и читать вполне комфортно (рис. 1).
Рис. 1. Текст, выровненный по умолчанию
Сделал публичный канал Телеграма, куда уже некоторое время выкладываю всякие рецепты, советы и мысли по поводу HTML, CSS и вёрстке. Так что присоединяйтесь!
Добавилось новое руководство Переменные CSS с нуля. Написал его пакистанский фронтенд-разработчик Ахмад Шадид, перевод мой.
Если не знаете, что это вообще такое и как эти переменные использовать, то читать обязательно.
Мы долго к этому шли и наконец пришли. htmlbook теперь работает по защищённому протоколу https. Никаких закладок обновлять не надо, всё настроили автоматически. Теперь идёт переход с http на https, а ещё с www на сайт без www. Адрес теперь один и это https://htmlbook.ru
Но если всё-таки заметите какие-то неполадки, пишите мне на ящик vlad@htmlbook.ru
Вот что мы будем делать в этом руководстве:
Реклама
«Влияние ссылочной массы на позиции сайта» — это понятие, которое отражает важность и влияние внешних ссылок, указывающих на определённый веб-сайт, на его позиционирование в поисковых системах. Ссылочная масса является одним из ключевых факторов, определяющих релевантность и авторитетность сайта в онлайн-пространстве.
Ссылочная масса, также известная как «backlink profile», представляет собой совокупность всех внешних ссылок, которые указывают на конкретный веб-сайт. Каждая ссылка воспринимается поисковыми системами как голос за авторитетность и качество сайта. Чем больше ссылок от релевантных и авторитетных источников указывает на сайт, тем выше вероятность того, что поисковая система рассмотрит его как надёжный и ценный для пользователей.
Обновил приложение под Андроид Практика по HTML и CSS, в котором можно решать задачи на разные темы, повышать свой уровень знаний HTML и CSS на практике.
Если ещё не установили, то самое время это сделать прямо сейчас.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.