Questions tagged [css3]

CSS3 — третья версия формального языка описания внешнего вида документа CSS.

Границы


Медиа-запросы

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Переходы и анимация


Селекторы


Текст и шрифт


Тени


Фон


Цвет

  • HSL
  • HSLA
  • RGBA

Полезные ссылки

Исчерпывающий справочник CSS

4456 questions
11
votes
2 answers

Возможно ли реализовать такой эффект плавной смены изображений на чистом css?

Увидел сайт с очень интересным эффектом: https://travelshift.com/ В правом верхнем углу есть круглая кнопка со стрелкой, если нажать на неё начинается нужный эффект, все мои попытки провальные и кода нету. Может быть у кого то не будет это…
6
votes
1 answer

Градиенты в CSS3

Помогите решить вопрос с градиентами в CSS3. Имеется следующий блок фиксированной высоты и ширины - Я не понимаю, как к центру изображения сделать "смещение / уменьшение" линии градиента, чтобы получилось так, как на картинке. Линии, как бы…
Leonid
  • 61
5
votes
4 answers

Поворот блоков по оси Y при наведении

Есть два блока, наложенных друг на друга. один повернут на 90 град по оси Y то есть нам не виден, а другой повернут на 0 град, нужно чтобы при наведении, первый блок поворачивался на -90 град, то есть его поворот по оси Y становился 0, и второй блок…
engenes
  • 1,963
  • 2
  • 30
  • 67
5
votes
3 answers

Как избавится от минуса в переменной?

Сделал пример вёрстки по просьбе, всё круто и всё работает но есть маленькое НО. Я хочу избавится от минуса в css переменной.И вот как это выглядит: :root { --wrap: 500px; /* размер wrap-ui */ --radius1: 140px; /* первая большая обводка…
4
votes
2 answers

Тень без использования фотошопа

Возможно ли реализовать такую тень без фотошопа?
4
votes
3 answers

Изменить стиль родителя в CSS3

Как изменить стиль родительского контейнера при фокусе текущего силами CSS? Например, есть внутри . При фокусе на input надо изменить цвет фона td. Остальные варианты сведутся к написанию js, т.к. инпут добавляется по событию, а у td…
ordman
  • 3,294
4
votes
2 answers

Как вырезать угол блока с помощью CSS3?

Необходимо вырезать все углы блока с помощью CSS3. Как на картинке
TF03
  • 341
3
votes
1 answer

flexbox верстка

Мне нужно выровнять блок вертикально и горизонтально по центру. У меня выравнивание происходит только горизонтально. В чем проблема? body { display: flex; justify-content: center; align-items: center; background-color: black; }
forzeeh
  • 165
3
votes
1 answer

Не появляется линия

Не появляется линия но при уменьшении размер окна появляется. линия должна появляться средину ---or--- .border-line { background: #8e8e8e; min-height: 1px ; max-height: 1px; min-width: 100%; margin: 15px 0; } .border-or { …
frank
  • 64
3
votes
1 answer

nth-child, сменить background

встретилась такая интересная задачка. Как можно реализовать такое с помощью nth-child? подобие шахматной доски, как написать правильную выборку? Через один элемент это понятно (2n), но как быть с моментом когда должны быть 2 черных квадрата подряд.…
user298256
3
votes
2 answers

Скруглить углы на фоне

Подскажите пожалуйста, есть ли какой приём, чтобы скруглить углы, как на картинке у серого фона http://joxi.ru/l2Z61exIwOkzW2 ? Буду очень благодарен.
3
votes
2 answers

Ключевые кадры в анимации

Доброго времени суток. Не могу вникнуть в ключевые кадры анимации, а точнее, например делаю слайдер, в нем 3 картинки, задаю анимации 15 секунд скорости, и infinite. Теперь например хочу сделать что бы картинка стояла 3 секунды далее уходила влево…
Dolphin
  • 185
3
votes
1 answer

Задать стиль для одного пункта SELECT

Есть выпадающий список и нужно задать отступы, верхнюю границу только для одного пункта из всего списка. Присвоила класс, работает только бекграунд. Задаю границу, отступы, ничего не отображается. .non-eu { background:#ccc; border-top:1px…
Geranya
  • 73
3
votes
2 answers

Как сделать эффект колокольчика?

На примере этой вёрстки , как сделать эффект колокольчика , что бы при событие hover блок (ротате) покачивался ? section{ display:table; margin:30px auto; } div{ width:100px; height:100px; display:block; position:relative; …
user33274
3
votes
1 answer

Зациклить анимацию посредством css3

Есть у меня вот такой указатель: ssmaker.ru/622c6439. jpg Интересно, можно ли его зациклить посредством css3? То есть, сделать прыгающим в низ в верх без помощи js. .down { display: block; width: 20px; height:…
1
2 3
8 9