Вопросы с меткой [css]
CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.
28,751
вопрос
82
голоса
14
ответов
4k
показов
Новогодний конкурс 2020 года!
В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso.
Было весело, люди хотели продолжение праздника вновь и вновь.
К слову, было проведено 4 конкурса с ...
68
голосов
18
ответов
7k
показов
Анимация новогодней ёлочки
Наступает Новый год!
Хорошо бы поднять настроение себе и другим.
Копировать и рассылать открыточки с красивыми картинками и гифками, скаченными из сети, уже как-то не интересно.
Хочется чего-то ...
53
голоса
9
ответов
62k
показов
Как прижать footer к низу экрана?
Есть основной блок <div class="container"></div> с контентом различной высоты, а под ним размещён футер.
Если контент не достигает всей высоты экрана, нужно чтобы минимальная ...
49
голосов
1
ответ
10k
показов
Верстка под ретину -- как определять плотность пикселя?
Это вопрос из прошлого и поставлен он был несколько странно. Но ответ ниже более чем актуален.
Перелопатив с десяток статей я начал осознавать, что ppi - большая палка в колеса. Как с ним бороться, ...
41
голос
7
ответов
2k
показов
Как сверстать границу в виде уголков?
Подскажите, как сверстать такой бордер?
33
голоса
4
ответа
1k
показов
Новогодний конкурс 2022 года!
У нас, на RuSO каждый Новый Год организуются Новогодние конкурсы:
Анимация новогодней ёлочки - 2018г.
Новогодний конкурс 2020 года!
Новогодний конкурс 2021 года!
В этом году было выбрано ...
32
голоса
5
ответов
2k
показов
Хаотичное движение букв, складывающихся в слово
Как реализовать хаотичное движение букв, которые на финише складываются в слово.
В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают ...
32
голоса
4
ответа
2k
показов
Выполнить html, css, js написанные в textarea
Как можно сделать простой скрипт?
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на ...
30
голосов
8
ответов
2k
показов
Tooltip с вырезами у стрелки
Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.
Мой ...
30
голосов
10
ответов
252k
показов
Как при наведении на один элемент менять стили другого элемента?
Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали ...
30
голосов
1
ответ
900
показов
Как сделать выравнивание текста по наклонной линии?
Даже примера кода нету : так как в голову не приходит как сделать
Гуру CSS3 как такое реализовать ?
Источник
Нашёл интересный вариант решение Пример
Вопрос задал на SO
Решение нашлось на SO
...
29
голосов
4
ответа
1k
показов
Как нарисовать конус на CSS?
Хочу сделать Гюнтера из «Adventure Time», а именно клюв как на этой картинке:
Как нарисовать такой клюв (конус) средствами CSS?
28
голосов
3
ответа
3k
показов
Как создать эффект Воды?
Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья тут
Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидите картинки с эффектами воды или ...
27
голосов
6
ответов
1k
показов
Можно ли контенту псевдоэлемета css задать повторение?
Допустим, есть код:
div {
position: relative;
background: blueviolet;
height:100px;
}
div:before {
content: 'продано';
color: white;
}
<div></div>
Хочу ...
27
голосов
2
ответа
2k
показов
Как сделать необычную рамку при наведении на элемент?
Как лучше реализовать такую рамку при наведении на элемент?
27
голосов
6
ответов
1k
показов
Как увеличить скорость работы сайта Front?
На сайте backend отрабатывает за 50 мс, а фронт забирает кучу времени. В итоге полсекунды на отображение страницы с использованием кэша, без кэша 700 мс. Есть правила и способы увеличить скорость ...
26
голосов
5
ответов
9k
показов
column-count и перенос блоков. Нюанс с column-count
Здравствуйте! Имеется контейнер .block, в котором размещены три блока .item-block. Контейнер необходимо разделить на две колонки, в первой из них будут два первых блока, во второй - соответственно, ...
26
голосов
3
ответа
9k
показов
Как сделать прозрачный текст?
Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
26
голосов
1
ответ
4k
показов
Круговой процентный прогресс бар
Мне хотелось бы иметь круговой процентный показатель на моем сайте:
В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано?
У меня есть желтый круг в image-file, но может быть ...
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:...
25
голосов
6
ответов
27k
показов
Псевдокласс :root и работа с ним
Сегодня случайно наткнулся на примеры работы с псевдоклассом :root. Сфера применения достаточно широкая. Хотелось бы услышать мнение тех, кто пользовался или пользуется. Реальный опыт эксплуатации, а ...
25
голосов
1
ответ
358
показов
Заполнение объекта водой
Как сделать чтобы вода в этом примере https://jsfiddle.net/wsygj8q4/2/
обтекала бутылку, а не накладывалась на нее?
.body {
width: 149px;
height: 706px;
background-image: url("http://...
25
голосов
2
ответа
3k
показов
Как взаимодействуют между собой viewport и viewBox
Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад.
Рисует ли браузер то, что находится за областью видимости SVG холста?
Взаимодействие между собой viewport ...
24
голоса
12
ответов
3k
показов
Как анимировать слово StackOverflow
У меня есть слово StackOverflow:
<h1>StackOverflow</h1>
Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой?
Я ...
24
голоса
6
ответов
50k
показов
Нарисовать круг, используя только CSS
Можно ли нарисовать круг, который будет отображаться в большинстве браузеров (IE, Mozilla, Safari), используя только CSS?
Перевод вопроса: Draw Circle using css alone
24
голоса
1
ответ
527
показов
Анимация персонажа улитки
У меня есть, вот такая картинка симпатичного семейства улиток - 🐌
Хочется сделать анимацию движения улиток, плюс к этому анимацию тела улитки, её усиков, глаз.
Понятно, что нужно искать ...
24
голоса
3
ответа
1k
показов
Как повторить этот css эффект?
Подскажите, как я могу повторить эффект появления блока, как на этом видео?
На данный момент имею что-то вот такое.
Появление реализовано через свойство clip-path. Не могу додуматься как мне ...
23
голоса
4
ответа
1k
показов
Как нарисовать автомобиль с помощью команд SVG
Ниже изображение автомобиля в формате PNG.
Я хочу сделать анимацию движения автомобиля вдоль какой-нибудь траектории. Желательно, чтобы колёса автомобиля вращались. Я понимаю, что для этого ...
23
голоса
4
ответа
1k
показов
Как сделать баннер с капающим краном
Как сделать баннер с капающем краном.
У меня есть изображение капающего крана
Сценарий анимации
Водопроводный кран, из которого тянется и падает капелька воды.
Цикл повторяется несколько раз
Кран ...
23
голоса
4
ответа
5k
показов
Как сделать фон из точек на css?
Как сделать на css такой фон из точек?
.bg {
width: 100%;
height: 50px;
background: url(https://sport.mail.ru/img/_main/subnav.png)
}
<div class="bg"></div>
23
голоса
3
ответа
5k
показов
Линия до и после текста над картинкой
Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ...
22
голоса
4
ответа
458
показов
верстка 6-угольников
Подскажите, кто знает как это сверстать? В интернете мало инфы по этому поводу. Спасибо)
21
голос
10
ответов
251k
показов
Как убрать обводку при клике на input
При клике и фокусе на элементе input появляется обводка. Как её убрать?
21
голос
7
ответов
1k
показов
Как сделать плавный изгиб - переход от красной части меню к чёрной
Это можно сделать используя CSS? Или придётся картинкой делать?
21
голос
5
ответов
4k
показов
Как сделать адаптивный svg?
Необходимо сделать адаптивный SVG.
Как сделать так, чтобы при изменении размеров изображения (или viewport-а), дочерние элементы SVG перемещались и перестраивались (как в адаптивной вёрстке HTML).
...
20
голосов
3
ответа
600
показов
Как сделать Radial blur с помощью SVG?
Такой вопрос, как сделать Radial blur с помощью SVG? Порыв в гугле я понял что либо он в SVG не так называется, либо способа нет...
20
голосов
1
ответ
969
показов
Как выстраиваются строковые блоки внутри контейнера строки?
Вопрос по CSS. Если задать font-size > line-height, например, font-size: 24px и line-height: 12px, то половинный интервал будет отрицательным (-6px). Не могу представить поведение строчного элемента, ...
19
голосов
4
ответа
2k
показов
Как создать 3D сферу в CSS?
Я пытался создать 3D сферу, используя только чистый CSS, но я не смог сгенерировать требуемую форму. Я видел цилиндр , но я не могу найти ссылку на создание реальной сферы.
.red {
...
19
голосов
3
ответа
331
показ
Как сделать эффект трещины у текста
Данный Q-A является продолжением прошлого(стилизация текста SVG).
В этом Q-A(Question-Answer) мы рассмотрим Crack effect, ниже будут приведены примеры этого эффекта, всего их будет 3 штуки.
Первый ...
19
голосов
4
ответа
1k
показов
Как лучше сделать виджет погоды?
В голове есть несколько вариантов:
1) Есть контейнер, в который используя jquery всё грузится:
<script src="http://example.com/weather/script.js" type="text/javascript"></script>
<div ...
18
голосов
2
ответа
951
показ
Время окончательного применения свойств CSS
Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код).
В ...
17
голосов
4
ответа
1k
показов
Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора
На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными небольшими участками. Смотрится хорошо. Как повторить данный эффект?
У меня получилось вырезать один сегмент ...
17
голосов
3
ответа
2k
показов
Как в CSS сверстать неровную фигуру?
Нужно сверстать вот такую фигуру, но не знаю как правильно это сделать. Делал квадрат и через before добавлял обрезанный border, но на разных разрешениях экранов он как будто "отклеивался".
17
голосов
1
ответ
52k
показов
Можно ли сделать резиновый шрифт в css?
Скажите, можно ли сделать шрифт на сайте резиновым — размер которого будет изменяться в зависимости от изменения размеров браузера?
17
голосов
4
ответа
1k
показов
Базовые стили браузеров
Какое решение в настоящий момент времени популярно, для нормализации (приведение всех стилей браузеров, к общему единому состоянию) базовых стилей браузеров, в процессе разработки проекта?
Пока я ...
17
голосов
7
ответов
43k
показов
Чем можно победить input:-webkit-autofill?
Дефолтный стиль хрома не позволяет изменить бэкграунд автоматически заполненного поля. В чем кроется сия загвоздка, может кто знает?
17
голосов
1
ответ
3k
показов
Анимация планет солнечной системы
У меня есть картинка планет солнечной системы.
Получилось сделать с помощью команд <circle> орбиты и сами планеты.
С помощью линейных и радиальных градиентов придать им объём.
Нашел топик, ...
16
голосов
5
ответов
8k
показов
Как нарисовать сектор круга в CSS?
Нарисовать круг с чистым CSS легко.
.circle {
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}
А как нарисовать сектор? ...
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 ...
16
голосов
3
ответа
457
показов
Как создать эффект затвора камеры с помощью divs
Я попытался сделать круговую камеру затвора фотоаппарата, но у меня проблема с тем, чтобы заставить его выглядеть реалистично.
Вот как это должно выглядеть:
Ниже код, который я пробовал:
let ...