Как сделать дугу css
Как сделать текст по кругу с помощью CSS или jQuery
Иногда на веб-страницу нужно добавить элемент с изогнутым или размещенным по кругу текстом. Например, логотип сайта. Но трансформация текста с помощью HTML и CSS может оказаться задачей не из легких. Благодаря возможностям CSS3 и jQuery это все-таки возможно.
Для реализации вам потребуется:
Как сделать текст по кругу с помощью CSS3 (сложный способ)
Рисунок, приведенный ниже, позволит понять, как реализовывать поставленную задачу с помощью CSS3.
Для позиционирования текста добавим в ширину и высоту. Получается следующее:
Для каждого класса внутри всех элементов span воспользуемся селектором >. С его помощью мы выделяем все дочерние элементы созданного span- класса w вместе с порядковыми номерами. Далее используем селектор nth-of-type(n + 0), которым помечаем все элементы-потомки.
После этого добавим базовые стили для элемента span :
В демоверсии присутствует три примера (простая дуга, обратная дуга и авторадиус). Они помогут лучше разобраться с исходным кодом. В этом разделе показано, как менять положение текста и выравнивать его внутри круга.
Как сделать надпись по кругу с помощью jQuery (простой способ)
Простая дуга
Создадим дугу с плавно изгибающимся текстом. Вот HTML код:
Обратите внимание, что ID равно simple_arc. Затем мы подключаем библиотеку jQuery и размещаем код, приведенный ниже, перед закрывающим тегом body. Значение радиуса равно 135. Благодаря чему текст изгибается вверх.
Обратная дуга
Попробуем изогнуть текст в обратную сторону. Вот HTML-код.
Авторадиус
Теперь давайте изогнем текст в круг. Для этого посмотрите на HTML-код, приведенный ниже:
Если не задавать значение радиуса, то CircleType.js самостоятельно подберет оптимальный радиус для выравнивания текста по кругу.
Изгиб текста, его вращение и выравнивание по кругу проще выполнять с помощью jQuery. С другой стороны, CSS дает полный контроль над положением текста на веб-странице. Надеемся, что данное руководство оказалось полезным!
Создаем простые геометрические фигуры на чистом CSS
Перевод статьи «CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS».
Вы только начинаете изучать веб-разработку и CSS? Вам случалось задуматься, как же создаются все эти прекрасные фигуры, которые можно видеть повсеместно в интернете? Можете больше не терзаться этим вопросом: вы пришли по нужному адресу.
Ниже я объясню самые основы создания геометрических фигур при помощи CSS. Тема эта большая, рассказывать можно очень долго. Поэтому я не буду даже пытаться охватить все инструменты и фигуры. Лучше я дам вам общую идею того, как эти фигуры создаются при помощи CSS.
Создание некоторых фигур требует большего количества приемов, чем создание других. Но вообще для создания фигур при помощи CSS обычно используется комбинация width, height, top, right, left, border, bottom, transform и псевдоэлементов, таких как :before и :after. У нас также есть и более современные CSS-свойства для создания фигур, такие как shape-outside и clip-path. О них я тоже напишу.
CSS-фигуры — базовый способ создания
Мы всегда можем создать самые основные геометрические фигуры (квадраты, круги и треугольники), используя обычные свойства CSS и несколько интересных приемов.
Квадраты и прямоугольники
Создавать квадраты и прямоугольники, пожалуй, проще всего. По умолчанию, div это всегда квадрат или прямоугольник.
Вы устанавливаете ширину и высоту, как показано в коде ниже. Дальше остается только задать цвет фона для элемента. Конечно, вы можете указывать и другие свойства, какие сочтете нужным.
Круги
Почти так же просто создать круг. Для этого мы можем установить border-radius элемента. Таким образом мы сделаем скругление углов.
Если мы установим значение этого свойства на 50%, мы получим круг. А если при этом ширина и высота будут разными, получится овал.
Треугольники
Создавать треугольники немного сложнее. Нам нужно установить границы элемента, чтобы они образовали треугольник. Если элементу установить нулевую ширину и высоту, его шириной станет ширина границы.
Имейте в виду, что края границы элемента находятся под углом в 45 градусов друг к другу. Вот почему этот метод подходит для создания треугольника. Если мы зададим одной границе цвет, а другим границам прозрачность, мы получим треугольник.
Если вам нужно, чтобы вершина треугольника была повернута в другом направлении, вы можете изменить значения border для той стороны, которая должна быть видимой. Или можно повернуть элемент при помощи свойства transform — если вам так больше нравится.
Это базовые фигуры, которые можно создать при помощи CSS. А вообще количество фигур, которые можно себе представить, пожалуй, безгранично. То, что я рассказал, это лишь основы, но проявив творческий подход и упорство, вы сможете достигнуть многого даже с этими базовыми свойствами CSS.
В некоторых случаях, когда речь идет о создании более продвинутых фигур, будет хорошей идеей использовать псевдоэлементы :after и :before.
Но у этого подхода есть один большой недостаток, с которым вы столкнетесь, если захотите, чтобы вашу фигуру обтекал текст (или чтобы текст был вписан в нее). Мы прописываем стили только для обычных HTML-элементов, а текст будет вести себя иначе.
На иллюстрации вы видите треугольник и то, каким образом его обтекает текст.
К счастью, вместо такого подхода мы можем использовать некоторые современные свойства CSS.
CSS-фигуры — другой способ создания
Сегодня мы можем использовать такое свойство CSS как shape-outside. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:
Совет! Вы также можете использовать свойство clip-path. С его помощью тоже можно создать нужную фигуру, но это свойство не позволит вам сделать обтекание текстом вокруг фигуры, как при использовании shape-outside.
Элемент, которому мы собираемся придать форму геометрической фигуры, должен быть плавающим (floated) и иметь определенную ширину и высоту. Это очень важно!
inset()
Базовая фигура inset() используется для создания прямоугольника или квадрата со смещением для обтекания текстом. Вы можете указать, насколько именно текст должен перекрывать фигуру.
Смещение можно установить одинаковое по всем направлениям: inset(20px). Также его можно указывать отдельно для каждого направления: inset(20px 5px 30px 10px).
Можно использовать и другие единицы для смещения, например, проценты. Значения указываются в таком порядке: inset(top right bottom left).
Посмотрите пример кода:
Также можно указать для inset() второе значение, определяющее border-radius смещения. Как здесь:
circle()
В этом случае при помощи свойства shape-outside создается круг. Здесь также нужно применить clip-path с соответствующим значением.
Свойство clip-path может принимать те же значения, что и свойство shape-outside, так что мы можем задать стандартную фигуру circle(), которую мы использовали для shape-outside. Обратите внимание, что я применил для элемента margin 20px, чтобы дать тексту немного пространства.
В этом примере я не указывал радиус круга. Я хотел, чтобы его размер совпадал с div (300px). Если хотите задать кругу его собственный размер, это тоже можно сделать.
Свойство circle() принимает два значения. Первое это радиус, а второе — позиция. Эти значения определяют центр круга.
В примере, приведенном ниже, я установил радиус в 50%. Затем я сместил центр круга на 30%. Обратите внимание, что между значениями радиуса и позиции должно использоваться слово «at».
Я также указал другое значение позиции для clip-path. Поскольку я задал позицию 0%, это обрежет круг наполовину.
ellipse()
Свойство ellipse() работает так же, как и circle(), за исключением того, что в итоге создает не круг, а овал. Вы можете задавать значение X и значение Y: ellipse(25px 50px).
Как и в случае с кругом, последнее значение это позиция.
polygon()
Многоугольник это фигура с разными координатами. Ниже я создал фигуру в форме буквы «Т». Я начал с координат 0,0 и двигался слева направо.
Изображения
1 июня 2018 | Опубликовано в css | Нет комментариев »
Веб-анимация наиболее часто создается с использованием двух положений: начального и конечного состояний или расположений A и B. Движение элементов по дугам, эллипсам и окружностям используется реже, но об этом тоже важно знать.
Окружности
Окружности — наиболее простой вариант. Самое важное, от чего зависит все остальное, — задать значения свойства начала трансформации элемента. Здесь и далее весь код CSS приведен для ясности без приставок производителей, которые уже и не нужны для большинства современных версий браузеров:
Начальная точка для каждой трансформации будет располагаться в 200px правее элемента:
Элемент HTML со смещенным началом трансформации
Это означает, что вращение элемента будет происходить вокруг точки смещения начала трансформации:
Также важно изменить значение по умолчанию временной характеристики перехода: если Вам нужно, чтобы движение было бесконечным прямолинейным, используйте следующие значения:
Это создаст бесшовную анимации движения по кругу.
Lea Verou предложила другой хороший способ анимирования движения элементов по кругу.
Линейная анимация, примененная к движению по дуге, обычно будет выглядеть искусственно и неуместно. Для создания движения маятника, как в уроке о гипнотизирующей анимации логотипа, нужно применить значение временной характеристики перехода ease-in-out, при котором анимация начнется медленно, немного ускорится и закончится тоже медленно, а также ограничить область вращения:
Такой тип анимации часто используется для показа чего-то : урок «веер из фотографий с иcпользованием CSS» — это хороший пример такого применения.
Эллипсы
Самая сложная форма движения — наиболее характерное для нашей вселенной движение по эллипсу. Наиболее простой известный нам способ создать это движение — разделить анимированное движение на слои: двигать элемент вверх и вниз половину фазы, когда он двигается по кругу. Чтобы добиться этого, элемент вкладывается в контейнер:
И каждый элемент анимируется отдельно:
Движение вверх-вниз продляет круговую анимацию в эллипс, усиливая вертикальное или горизонтальное движение, определяя основные оси эллипса. Значение временной характеристики перехода ease-in-out используется, чтобы сделать движение плавным, так как иначе получится движение по закругленному ромбу, Направление анимации alternate проигрывает ключевые кадры вперед, затем назад и так по кругу и используется для того, чтобы вертикальное движение повторялось вперед-назад плавно. Обратите внимание на то, что анимация вверх-вниз происходит половину времени, в отличие от анимации по кругу.
Перемещения и трансформации в CSS3
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат. 
Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.
Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.
Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0. 
HTML
Откройте ваш любимый редактор кода и введите следующее:
Двигаемся влево
HTML
Создайте новый документ html и вставьте следующий код:
На этот раз мы используем класс move-left, чтобы переметить объект влево.
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО
2: Вертикальное перемещение
Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.
Двигаемся вверх
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
Двигаемся вниз
Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y); 
HTML
3: Диагональное перемещение
Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным. 
HTML
4: Вращение
Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы. 
Вращение по часовой стрелке
Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).
HTML
Вращение против часовой стрелки
Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg). 
HTML
5: Масштабирование
Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример. 
HTML
6: Множественные движения
После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их. 
HTML
CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.
Как сделать переходы между разделами на сайте в виде волны?
В этой статье мы рассмотрим, как используя CSS и векторную SVG графику визуально оформить разрыв между секциями страницы в виде плавно изогнутой кривой линии.
После создания SVG, рассмотрим несколько примеров его применения для оформления границы блока.
Создание SVG изображения в форме волны
Пример готовой волны, выполненной с использованием кривых Безье в Inkscape.
После того как нужный контур будет готов документ Inkscape необходимо сохранить в SVG файл предварительно подогнав размер страницы под изображение.
При желании вы также можете оптимизировать полученное изображение, например, воспользовавшись сервисом SVGOMG.
В завершении вам необходимо открыть полученный SVG файл и скопировать его код себе на страницу.
Генерирование SVG волны с помощью сервиса getwaves.io
Если вам не нужна волна строго определённой формы, то в этом случае её можно сгенерировать через сервис getwaves.io. Он позволяет очень просто создавать плавные уникальные SVG волны. Генерирование случайной SVG картинки осуществляется посредством нажатия на кнопку с изображением кубика.
После того как вы подобрали волне нужную форму, её необходимо получить. Осуществляется это посредством нажатия на значок «Загрузка». Здесь сервис предлагает на выбор два варианта: скачать SVG файл или скопировать код. Т.к. изображение мы будем непосредственно размещать в HTML коде, то сделаем это через 2 вариант.
Примеры использования SVG волны для оформления перехода между секциями
1. Использование SVG волны для оформления нижней границы элемента.
В этом примере мы достигли данный эффект следующим образом:
2. Создание перехода с использованием нескольких волн.
3. Пример, в котором волне добавлена анимация с помощью CSS