Web design about css

Научитесь стилизовать HTML с помощью CSS

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

Хотите стать frontend-разработчиком?

Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.

Необходимые условия

Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль Введение в HTML

После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML

В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье Установка рабочего пространства подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья Работа с файлами, которая включена в полное руководство для новичка Основы веб.

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

Модули

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

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

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

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

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

К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.

Решаем часто встречающиеся проблемы в CSS

В разделе Использование CSS для решения общих проблем даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.

В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.

«CSS странный»

CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:

Смотрите также

Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда

Found a content problem with this page?

This page was last modified on 12 янв. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

12 приемов CSS для создания прекрасных сайтов

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «12 CSS tips and tricks which help you to create an amazing websites».

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

И хотя кажется, что CSS нужен только для описания цветов элементов, их позиционирования и тому подобных вещей, на самом деле с его помощью можно также создавать анимации, «оживляющие» наши приложения и сайты. Вероятно, мало кто из нас уделил достаточное внимание CSS и изучил этот язык действительно глубоко. Поэтому многим пригодятся отдельные практические советы по применению CSS. В нашей статье мы собрали 12 таких полезных приемов.

1. Вертикальное выравнивание при помощи flex

Flexible Box Layout Model (или просто Flexbox) со времени своего появления приобрел большую популярность. И это неудивительно, ведь данный подход существенно облегчает позиционирование и выравнивание элементов. Применение flex (свойство flexbox) сделало вертикальное выравнивание быстрым и легким. Давайте рассмотрим пример кода для вертикального позиционирования при помощи flex.

Как видите, чтобы наш элемент-потомок оказался точно в центре родительского элемента, мы использовали свойства display: flex и align-items: center, justify-content: center.

2. Режимы наложения (смешивания)

При помощи CSS можно делать много интересных вещей, в частности, применять режимы наложения слоев. Дли применения режимов наложения есть два свойства: mix-blend-mode (определяет смешивание элементов, находящихся друг за другом) и background-blend-mode (определяет смешивание фоновых изображений). Давайте посмотрим, как это работает:

В этом примере мы задаем изображение и заголовок в виде текста. Текст это тот элемент, который смешивается с изображением. Мы использовали значение overlay (режим перекрытия), но есть еще 15 других значений, которыми можно воспользоваться (попробовать можно здесь).

А теперь давайте посмотрим пример с применением background-blend-mode:

В этом варианте мы видим, как фоновое изображение смешивается с цветом. Первое изображение — исходное, а второе — после применения режима смешивания.

3. Параллакс-скроллинг

Параллакс (Parallax) это очень распространенная вещь в современном веб-дизайне. Эффект основан на том, что скорость прокрутки фонового изображения отличается от скорости прокрутки контента. Давайте посмотрим, как этого можно достигнуть при помощи CSS:

В этом примере вы видите, что наш текст и фоновое изображение движутся по-разному. Мы использовали transformZ для ускорения одного элемента и замедления другого. Круто выглядит, правда?

4. Shape outside (придание элементу непрямоугольной формы)

Еще одна прекрасная фича, имеющаяся в CSS, но мало используемая, — свойство shape-outside. Давайте посмотрим, как это работает:

В этом примере вы видите, как текст обтекает круг. Мы установили значение свойства shape-outside как circle 50%, но можно также поставить треугольник, квадрат (базовые фигуры) или какое-то изображение. Обратите внимание на это свойство — оно стоит того, чтобы познакомиться с ним поближе!

5. Обрезка строки

Терпеть не могу, когда мой текст не вмещается в div. В JavaScript есть несколько способов справиться с этим, но знаете ли вы, что CSS тоже позволяет обрезать текст? Давайте посмотрим:

Вы видите, как CSS обрезает строку и ставит на месте обрезки троеточие. Для обрезки использовались свойства overflow: hidden, white-space: nowrap, а для троеточия — text-overflow: ellipsis.

6. Обрезка изображения при помощи clip path

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

В этом примере мы создали круг, обрезанный круг и многоугольник.

7. Полная высота и ширина

Если мы хотим, чтобы наше приложение или сайт подгонялись под размер зоны просмотра, на помощь приходят единицы измерения vh и vw. Vh означает 100% высоты зоны просмотра, а vw — 100% ширины зоны просмотра. Давайте посмотрим это на примере:

Здесь мы для нашего элемента (синего блока) установили ширину в 50vw, а высоту в 50vh. Это означает, что он должен занимать в ширину 50% от ширины и 50% от высоты зоны просмотра. Если вы попробуете изменить зону просмотра, вы увидите, как будут меняться размеры нашего элемента.

8. Фильтры изображений

Если поработать с изображениями, можно достичь очень интересных эффектов. CSS позволяет использовать большое количество фильтров, чтобы разработчики могли работать с графикой, не прибегая к Photoshop. Ну, например:

Здесь мы для одного изображения использовали 7 разных фильтров.

9. CSS-анимации

Анимации на сайте привлекают внимание пользователя, именно поэтому они так часто используются в веб-дизайне. Давайте посмотрим, как создавать их при помощи CSS:

В этом примере мы создали маленькую точку, которая меняет свою позицию и непрозрачность: при каждом перемещении непрозрачность снижается на 25%, пока не достигнет 100%. Затем процесс повторяется. Разумеется, можно также менять цвет и другие свойства элементов.

10. Вращение элементов

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

11. Маска

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

В этом примере мы создали маску в форме круга с градиентной заливкой. Также можно в качестве маски использовать SVG-графику, для этого нужно указать путь к файлу (URL).

12. Приближение при наведении курсора

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

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

Заключение

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

Источник