Вопросы с меткой [css]

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

Фильтрация
Сортировка
Метки
82 голоса
14 ответов
4k показов

Новогодний конкурс 2020 года!

В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso. Было весело, люди хотели продолжение праздника вновь и вновь. К слову, было проведено 4 конкурса с ...
Alexandr_TT's user avatar
68 голосов
18 ответов
7k показов

Анимация новогодней ёлочки

Наступает Новый год! Хорошо бы поднять настроение себе и другим. Копировать и рассылать открыточки с красивыми картинками и гифками, скаченными из сети, уже как-то не интересно. Хочется чего-то ...
Alexandr_TT's user avatar
53 голоса
9 ответов
62k показов

Как прижать footer к низу экрана?

Есть основной блок <div class="container"></div> с контентом различной высоты, а под ним размещён футер. Если контент не достигает всей высоты экрана, нужно чтобы минимальная ...
Escobar's user avatar
  • 717
49 голосов
1 ответ
10k показов

Верстка под ретину -- как определять плотность пикселя?

Это вопрос из прошлого и поставлен он был несколько странно. Но ответ ниже более чем актуален. Перелопатив с десяток статей я начал осознавать, что ppi - большая палка в колеса. Как с ним бороться, ...
Cypher's user avatar
  • 2,553
41 голос
7 ответов
2k показов

Как сверстать границу в виде уголков?

Подскажите, как сверстать такой бордер?
DDM's user avatar
  • 411
33 голоса
4 ответа
1k показов

Новогодний конкурс 2022 года!

У нас, на RuSO каждый Новый Год организуются Новогодние конкурсы: Анимация новогодней ёлочки - 2018г. Новогодний конкурс 2020 года! Новогодний конкурс 2021 года! В этом году было выбрано ...
Alexandr_TT's user avatar
32 голоса
5 ответов
2k показов

Хаотичное движение букв, складывающихся в слово

Как реализовать хаотичное движение букв, которые на финише складываются в слово. В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают ...
Alexandr_TT's user avatar
32 голоса
4 ответа
2k показов

Выполнить html, css, js написанные в textarea

Как можно сделать простой скрипт? Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат. Для тестирования html, css, js, подобно тому, что есть на ...
user185447's user avatar
  • 1,695
30 голосов
8 ответов
2k показов

Tooltip с вырезами у стрелки

Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы. Мой ...
Yuri's user avatar
  • 15.9k
30 голосов
10 ответов
252k показов

Как при наведении на один элемент менять стили другого элемента?

Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента? Можно ли это сделать только на css? К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали ...
butteff's user avatar
  • 1,727
30 голосов
1 ответ
900 показов

Как сделать выравнивание текста по наклонной линии?

Даже примера кода нету : так как в голову не приходит как сделать Гуру CSS3 как такое реализовать ? Источник Нашёл интересный вариант решение Пример Вопрос задал на SO Решение нашлось на SO ...
user avatar
29 голосов
4 ответа
1k показов

Как нарисовать конус на CSS?

Хочу сделать Гюнтера из «Adventure Time», а именно клюв как на этой картинке: Как нарисовать такой клюв (конус) средствами CSS?
darkwoolf's user avatar
  • 1,049
28 голосов
3 ответа
3k показов

Как создать эффект Воды?

Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья тут Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или ...
Randall's user avatar
  • 6,966
27 голосов
6 ответов
1k показов

Можно ли контенту псевдоэлемета css задать повторение?

Допустим, есть код: div { position: relative; background: blueviolet; height:100px; } div:before { content: 'продано'; color: white; } <div></div> Хочу ...
kizoso's user avatar
  • 9,323
27 голосов
2 ответа
2k показов

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

Как лучше реализовать такую рамку при наведении на элемент?
Roman Rozum's user avatar
27 голосов
6 ответов
1k показов

Как увеличить скорость работы сайта Front?

На сайте backend отрабатывает за 50 мс, а фронт забирает кучу времени. В итоге полсекунды на отображение страницы с использованием кэша, без кэша 700 мс. Есть правила и способы увеличить скорость ...
Shadow33's user avatar
  • 1,744
26 голосов
5 ответов
9k показов

column-count и перенос блоков. Нюанс с column-count

Здравствуйте! Имеется контейнер .block, в котором размещены три блока .item-block. Контейнер необходимо разделить на две колонки, в первой из них будут два первых блока, во второй - соответственно, ...
Игорь's user avatar
  • 1,026
26 голосов
3 ответа
9k показов

Как сделать прозрачный текст?

Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
user avatar
26 голосов
1 ответ
4k показов

Круговой процентный прогресс бар

Мне хотелось бы иметь круговой процентный показатель на моем сайте: В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано? У меня есть желтый круг в image-file, но может быть ...
Alexandr_TT's user avatar
25 голосов
6 ответов
2k показов

Как создать анимированную иконку Stackoverflow

Ниже изображения иконок EnSO и RuSO : Код иконки EnSO <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120"> <style>.st0{fill:#bcbbbb}.st1{fill:...
Alexandr_TT's user avatar
25 голосов
6 ответов
27k показов

Псевдокласс :root и работа с ним

Сегодня случайно наткнулся на примеры работы с псевдоклассом :root. Сфера применения достаточно широкая. Хотелось бы услышать мнение тех, кто пользовался или пользуется. Реальный опыт эксплуатации, а ...
Alexey Giryayev's user avatar
25 голосов
1 ответ
358 показов

Заполнение объекта водой

Как сделать чтобы вода в этом примере https://jsfiddle.net/wsygj8q4/2/ обтекала бутылку, а не накладывалась на нее? .body { width: 149px; height: 706px; background-image: url("http://...
Pantera's user avatar
  • 546
25 голосов
2 ответа
3k показов

Как взаимодействуют между собой viewport и viewBox

Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста? Взаимодействие между собой viewport ...
Alexandr_TT's user avatar
24 голоса
12 ответов
3k показов

Как анимировать слово StackOverflow

У меня есть слово StackOverflow: <h1>StackOverflow</h1> Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой? Я ...
Sevastopol''s user avatar
  • 28.1k
24 голоса
6 ответов
50k показов

Нарисовать круг, используя только CSS

Можно ли нарисовать круг, который будет отображаться в большинстве браузеров (IE, Mozilla, Safari), используя только CSS? Перевод вопроса: Draw Circle using css alone
Alexandr_TT's user avatar
24 голоса
1 ответ
527 показов

Анимация персонажа улитки

У меня есть, вот такая картинка симпатичного семейства улиток - 🐌 Хочется сделать анимацию движения улиток, плюс к этому анимацию тела улитки, её усиков, глаз. Понятно, что нужно искать ...
Alexandr_TT's user avatar
24 голоса
3 ответа
1k показов

Как повторить этот css эффект?

Подскажите, как я могу повторить эффект появления блока, как на этом видео? На данный момент имею что-то вот такое. Появление реализовано через свойство clip-path. Не могу додуматься как мне ...
Aleksandr Krais's user avatar
23 голоса
4 ответа
1k показов

Как нарисовать автомобиль с помощью команд SVG

Ниже изображение автомобиля в формате PNG. Я хочу сделать анимацию движения автомобиля вдоль какой-нибудь траектории. Желательно, чтобы колёса автомобиля вращались. Я понимаю, что для этого ...
Alexandr_TT's user avatar
23 голоса
4 ответа
1k показов

Как сделать баннер с капающим краном

Как сделать баннер с капающем краном. У меня есть изображение капающего крана Сценарий анимации Водопроводный кран, из которого тянется и падает капелька воды. Цикл повторяется несколько раз Кран ...
Alexandr_TT's user avatar
23 голоса
4 ответа
5k показов

Как сделать фон из точек на css?

Как сделать на css такой фон из точек? .bg { width: 100%; height: 50px; background: url(https://sport.mail.ru/img/_main/subnav.png) } <div class="bg"></div>
Sevastopol''s user avatar
  • 28.1k
23 голоса
3 ответа
5k показов

Линия до и после текста над картинкой

Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ...
Alexandr_TT's user avatar
22 голоса
4 ответа
458 показов

верстка 6-угольников

Подскажите, кто знает как это сверстать? В интернете мало инфы по этому поводу. Спасибо)
Sasha Romanyshyn's user avatar
21 голос
10 ответов
251k показов

Как убрать обводку при клике на input

При клике и фокусе на элементе input появляется обводка. Как её убрать?
makregistr's user avatar
  • 3,211
21 голос
7 ответов
1k показов

Как сделать плавный изгиб - переход от красной части меню к чёрной

Это можно сделать используя CSS? Или придётся картинкой делать?
EXOTIC 12's user avatar
  • 255
21 голос
5 ответов
4k показов

Как сделать адаптивный svg?

Необходимо сделать адаптивный SVG. Как сделать так, чтобы при изменении размеров изображения (или viewport-а), дочерние элементы SVG перемещались и перестраивались (как в адаптивной вёрстке HTML). ...
Nixi1024's user avatar
  • 211
20 голосов
3 ответа
600 показов

Как сделать Radial blur с помощью SVG?

Такой вопрос, как сделать Radial blur с помощью SVG? Порыв в гугле я понял что либо он в SVG не так называется, либо способа нет...
Евгений Старцев's user avatar
20 голосов
1 ответ
969 показов

Как выстраиваются строковые блоки внутри контейнера строки?

Вопрос по CSS. Если задать font-size > line-height, например, font-size: 24px и line-height: 12px, то половинный интервал будет отрицательным (-6px). Не могу представить поведение строчного элемента, ...
Dimon's user avatar
  • 2,049
19 голосов
4 ответа
2k показов

Как создать 3D сферу в CSS?

Я пытался создать 3D сферу, используя только чистый CSS, но я не смог сгенерировать требуемую форму. Я видел цилиндр , но я не могу найти ссылку на создание реальной сферы. .red { ...
Alexandr_TT's user avatar
19 голосов
3 ответа
331 показ

Как сделать эффект трещины у текста

Данный Q-A является продолжением прошлого(стилизация текста SVG). В этом Q-A(Question-Answer) мы рассмотрим Crack effect, ниже будут приведены примеры этого эффекта, всего их будет 3 штуки. Первый ...
Arthur's user avatar
  • 4,542
19 голосов
4 ответа
1k показов

Как лучше сделать виджет погоды?

В голове есть несколько вариантов: 1) Есть контейнер, в который используя jquery всё грузится: <script src="http://example.com/weather/script.js" type="text/javascript"></script> <div ...
Anon8's user avatar
  • 705
18 голосов
2 ответа
951 показ

Время окончательного применения свойств CSS

Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код). В ...
Adam Smith's user avatar
17 голосов
4 ответа
1k показов

Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора

На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными небольшими участками. Смотрится хорошо. Как повторить данный эффект? У меня получилось вырезать один сегмент ...
Alexandr_TT's user avatar
17 голосов
3 ответа
2k показов

Как в CSS сверстать неровную фигуру?

Нужно сверстать вот такую фигуру, но не знаю как правильно это сделать. Делал квадрат и через before добавлял обрезанный border, но на разных разрешениях экранов он как будто "отклеивался".
Александр's user avatar
17 голосов
1 ответ
52k показов

Можно ли сделать резиновый шрифт в css?

Скажите, можно ли сделать шрифт на сайте резиновым — размер которого будет изменяться в зависимости от изменения размеров браузера?
ahel73's user avatar
  • 497
17 голосов
4 ответа
1k показов

Базовые стили браузеров

Какое решение в настоящий момент времени популярно, для нормализации (приведение всех стилей браузеров, к общему единому состоянию) базовых стилей браузеров, в процессе разработки проекта? Пока я ...
     Юрий Светлов's user avatar
17 голосов
7 ответов
43k показов

Чем можно победить input:-webkit-autofill?

Дефолтный стиль хрома не позволяет изменить бэкграунд автоматически заполненного поля. В чем кроется сия загвоздка, может кто знает?
Stepanov Max's user avatar
17 голосов
1 ответ
3k показов

Анимация планет солнечной системы

У меня есть картинка планет солнечной системы. Получилось сделать с помощью команд <circle> орбиты и сами планеты. С помощью линейных и радиальных градиентов придать им объём. Нашел топик, ...
Alexandr_TT's user avatar
16 голосов
5 ответов
8k показов

Как нарисовать сектор круга в CSS?

Нарисовать круг с чистым CSS легко. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } А как нарисовать сектор? ...
Alexandr_TT's user avatar
16 голосов
6 ответов
114k показов

Убрать стрелочки с <input type="number">

Есть input с типом number и при наведении на него появляются такие стрелочки: <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text ...
Вася's user avatar
  • 4,488
16 голосов
3 ответа
457 показов

Как создать эффект затвора камеры с помощью divs

Я попытался сделать круговую камеру затвора фотоаппарата, но у меня проблема с тем, чтобы заставить его выглядеть реалистично. Вот как это должно выглядеть: Ниже код, который я пробовал: let ...
Alexandr_TT's user avatar