Как сделать круговой текст?
Попробуем реализовать эту задачу при помощи svg.
Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.
Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
#полезности
Попробуем реализовать эту задачу при помощи svg.
Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.
<svg class="circle-text" viewBox="0 0 100 100">
<path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
<text>
<textPath xlink:href="#circle-text">
Круговой текст
</textPath>
</text>
</svg>
Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
.circle-text {
display: block;
overflow: visible;
width: 100px;
font-size: 28px;
fill: red;
}
.circle-text path {
fill: none;
}#полезности
🔥9👍1
Как управлять растяжением textarea?
Для этого есть css свойство resize. Значения:
- resize: none – полностью запрещает растягивание элемента.
- resize: vertical – разрешает менять только высоту элемента.
- resize: horizontal – позволяет менять только ширину элемента.
- resize: both – позволяет менять ширину и высоту элемента.
Растягивание также можно ограничить указав минимальные и максимальные значения высоты и ширины.
Например - есть форма шириной 400px с текстовым полем внутри. Чтобы поле нельзя было растянуть шире формы, просто указываем максимальную ширину в 100% или любой другой необходимый вам размер.
#полезности
Для этого есть css свойство resize. Значения:
- resize: none – полностью запрещает растягивание элемента.
- resize: vertical – разрешает менять только высоту элемента.
- resize: horizontal – позволяет менять только ширину элемента.
- resize: both – позволяет менять ширину и высоту элемента.
Растягивание также можно ограничить указав минимальные и максимальные значения высоты и ширины.
Например - есть форма шириной 400px с текстовым полем внутри. Чтобы поле нельзя было растянуть шире формы, просто указываем максимальную ширину в 100% или любой другой необходимый вам размер.
<form>
<textarea></textarea>
</form>
form {
width: 200px;
}
textarea {
width: 100%;
max-width: 100%;
}#полезности
👍8❤2🔥1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Как управлять растяжением textarea
2. Специальные символы в HTML
3. Как сделать круговой текст?
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик plastilin art
2. Frontend-разработчик ООО Цитрус
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер HRLab
2. UI/UX дизайнер
3. UI/UX дизайнер IBS
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Как управлять растяжением textarea
2. Специальные символы в HTML
3. Как сделать круговой текст?
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик plastilin art
2. Frontend-разработчик ООО Цитрус
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер HRLab
2. UI/UX дизайнер
3. UI/UX дизайнер IBS
#лучшеезанеделю
👍3
HTML Вопрос:
Какой тег определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии?
Какой тег определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии?
Anonymous Quiz
8%
<bgsound>
63%
<audio>
11%
<sound>
12%
<bgaudio>
6%
Посмотреть ответы
❤12👎6
CSS battle - игра-соревнование. Необходимо повторить какой-либо шаблон
Перейти на сайт 👨💻
#полезности
Перейти на сайт 👨💻
#полезности
👍5
Псевдокласс :is()
Псевдокласс :is() позволяет сократить код, объединяя несколько селекторов в один. Он предоставляет возможность применять один и тот же стиль к нескольким элементам, таким образом уменьшая дублирование кода и упрощая его чтение.
Синтаксис псевдокласса :is() выглядит следующим образом:
В качестве аргументов в псевдокласс :is() вы можете передать несколько селекторов, разделенных запятыми. Все эти селекторы будут рассматриваться как одно условие, и стили применятся ко всем элементам, соответствующим хотя бы одному из селекторов.
Давайте рассмотрим пример использования псевдокласса :is(). Предположим, у нас есть HTML-код с несколькими кнопками, и мы хотим применить один и тот же стиль к кнопкам с классами "primary" и "secondary":
Мы можем использовать псевдокласс :is() для объединения селекторов и применения стиля к кнопкам с классами "primary" и "secondary":
В этом примере, стиль будет применен к кнопкам с классами "primary" и "secondary", но не к кнопке без класса.
Псевдокласс :is() является мощным инструментом для оптимизации и упрощения CSS-кода. Он позволяет группировать несколько селекторов в одно условие и применять к ним общие стили. Таким образом, код становится более легким для понимания и поддержки.
#полезности | #css
Псевдокласс :is() позволяет сократить код, объединяя несколько селекторов в один. Он предоставляет возможность применять один и тот же стиль к нескольким элементам, таким образом уменьшая дублирование кода и упрощая его чтение.
Синтаксис псевдокласса :is() выглядит следующим образом:
:is(selector1, selector2, ...)
В качестве аргументов в псевдокласс :is() вы можете передать несколько селекторов, разделенных запятыми. Все эти селекторы будут рассматриваться как одно условие, и стили применятся ко всем элементам, соответствующим хотя бы одному из селекторов.
Давайте рассмотрим пример использования псевдокласса :is(). Предположим, у нас есть HTML-код с несколькими кнопками, и мы хотим применить один и тот же стиль к кнопкам с классами "primary" и "secondary":
<button class="primary">Primary Button</button>
<button class="secondary">Secondary Button</button>
<button>Regular Button</button>
Мы можем использовать псевдокласс :is() для объединения селекторов и применения стиля к кнопкам с классами "primary" и "secondary":
button:is(.primary, .secondary) {
background-color: blue;
color: white;
font-weight: bold;
}В этом примере, стиль будет применен к кнопкам с классами "primary" и "secondary", но не к кнопке без класса.
Псевдокласс :is() является мощным инструментом для оптимизации и упрощения CSS-кода. Он позволяет группировать несколько селекторов в одно условие и применять к ним общие стили. Таким образом, код становится более легким для понимания и поддержки.
#полезности | #css
👍16
Как обрезать длинный текст и поставить многоточие в конце?
Воспользуемся этим кодом:
В строчке -webkit-line-clamp: 3; указываем кол-во строк
#полезности
Воспользуемся этим кодом:
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
В строчке -webkit-line-clamp: 3; указываем кол-во строк
#полезности
❤8👍4🔥4
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. :where()
2. Как обрезать длинный текст и поставить многоточие в конце
3. CSS diner
Лучшие фронтенд вакансии @job_webdev:
1. UI/UX дизайнер Делаем IT
2. Web-дизайнер
3. UI/UX дизайнер Kokoc Group
Лучшие дизайн вакансии @job_webdesign:
1. Frontend-разработчик БАРЬЕР
2. HTML-верстальщик
3. HTML-верстальщик Веоникс
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. :where()
2. Как обрезать длинный текст и поставить многоточие в конце
3. CSS diner
Лучшие фронтенд вакансии @job_webdev:
1. UI/UX дизайнер Делаем IT
2. Web-дизайнер
3. UI/UX дизайнер Kokoc Group
Лучшие дизайн вакансии @job_webdesign:
1. Frontend-разработчик БАРЬЕР
2. HTML-верстальщик
3. HTML-верстальщик Веоникс
#лучшеезанеделю
👍4