CSS » Web Мастерская

Блог

Web Мастерская

Typography в CSS: Оформление шрифтов и текста

Типографика — это искусство подбора и расположения шрифтов, которое играет ключевую роль в восприятии контента. В этой статье мы рассмотрим основные аспекты типографики в CSS, познакомимся с важными свойствами и научимся создавать красивые и читабельные тексты.

Основные свойства типографики в CSS

Шрифты (Fonts)
Выбор шрифта оказывает огромное влияние на восприятие текста. CSS позволяет управлять семействами шрифтов, стилем и весом текста.

font-family: семейство шрифтов.
font-style: стиль шрифта (нормальный, наклонный, курсив).
font-weight: толщина шрифта (от 100 до 900, normal, bold).
font-size: размер шрифта.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
}

Выравнивание и отступы
Правильное выравнивание и расстановка отступов делают текст удобочитаемым и эстетичным.

text-align: выравнивание текста (left, right, center, justify).
letter-spacing: расстояние между буквами.
word-spacing: расстояние между словами.
li

...

Жалоба

CSS: Хуки и псевдоэлементы (::before | ::after)

CSS

Псевдоэлементы ::before и ::after — это невероятно мощные инструменты CSS, которые позволяют добавлять виртуальные элементы до или после содержимого реального элемента. Они позволяют вносить изменения в дизайн, создавать декоративные элементы и добавлять интерактивность без изменения HTML-кода.

Что такое псевдоэлементы?

Псевдоэлементы — это особые селекторы CSS, которые добавляют дополнительные элементы в структуру документа. Они не видны в исходном HTML, но оказывают влияние на визуальное представление.

Основные псевдоэлементы:

::before: вставляет элемент перед содержимым выбранного элемента.
::after: вставляет элемент после содержимого выбранного элемента.

Примеры использования псевдоэлементов

1. Добавление цитатных кавычек
Хотите украсить цитату красивыми кавычками? Это легко сделать с помощью псевдоэлементов.

<blockquote>Это моя цитата.</blockquote>

blockquote::before {
	content: '"';
	font-size: 2em;
	color: gray;
	margin-right:10px;
}

blockquote::after {
	content:

...

Жалоба

CSS: Позиционирование

CSS

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

Что такое позиционирование в CSS?

Позиционирование определяет, как элемент располагается относительно своего нормального потока документов. Существует несколько типов позиционирования:

Static: нормальное позиционирование, элементы располагаются последовательно.
Relative: элемент смещается относительно своего первоначального местоположения.
Absolute: элемент позиционируется относительно ближайшего позиционированного предка.
Fixed: элемент фиксируется относительно окна браузера.
Sticky: элемент «прилипает» к определенной точке при прокрутке страницы.

Типы позиционирования

Static Positioning
Это базовый тип позиционирования, при котором элементы располагаются последовательно, следуя нормальному потоку документа. Никаких...

Жалоба

CSS: Как сделать переливающийся бордюр

CSS

Чтобы сделать так, чтобы бордюр (граница) элемента плавно менял цвета, можно использовать CSS-анимацию и свойства градиента. Вот несколько способов реализации этого эффекта:

Использование анимации и градиента

Если хотите, чтобы граница плавно менялась между двумя цветами, можно использовать линейный градиент и анимацию:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Меняющийся бордюр</title>
    <style>
        .border-animated {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            box-shadow: inset 0 0 0 3px transparent; /* внутренняя рамка */
            animation: border-change 5s infinite alternate;
        }

        @keyframes border-change {
            0% {
                box-shadow: inset 0 0 0 3px rgba(255, 0, 0, 1); /* красный */
            }
            100% {
                box-shadow: inset 0 0 0 3px rgba(0, 0, 255, 1); /* синий */
            }
        }

...

Жалоба

CSS: Как сделать картинку квадратной

CSS

Для вывода дополнительных картинок, в виде ссылок на них, стояла задача сделать все фото квадратными и одинаково размера. При этом сами картинки имеют абсолютно разные размеры. Фотографии резать или сжимать нельзя. Перво, что пришло на ум - это вставить в теги атрибут style, вот так:

<div style="display: inline-block; width: 165px;">
	<a style="display: block; background-image: url('{img server_id=$photo.server_id path='photo.url_photo' file=$photo.destination suffix='_240' return_url=true}'); background-position: 50% 25%; background-size: cover; height: 160px; width: 160px;" href="{permalink module='photo' id=$photo.photo_id}" title:"{$photo.title|clean}" rel="{$photo.photo_id}"></a>
</div>

Решил вставлять стили в теги, потому что используется свойство background-image: url(), а URL картинки постоянно меняется, и угадать его нельзя.

Тут:

background-image:
background-position: 50% 25%;
background-size: cover;

Отлично справляется с поставленной задачей. Но, я стараюсь не допускать...

Жалоба