body {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 80px 80px repeat(4, 1fr);
min-height: 100%;
height: 100vh;
margin: 0;
}
.slider {
grid-area: 3 / 1 / 7 / 13;
}
Можно ли вынести input radio в другой div за пределы контейнера слайдера.
В общем как задать этому слайдеру определённую высоту = всей области экрана - верхние 2 строки.
Чтоб этот размер можно было прописать в сдвиг translateY(%).
translateY(100%)
или translateY(-100%)
(раз их нельзя выносить за пределы контейнера слайдера)
Суть в том чтоб header засунуть в слайдер
header, input и остальное что там z-index вынести в перёд
В том слайдере там label который и есть страницами он 100vh, если его место положения будет ограничено ячейками грида, листать то будет уже именно они ?
Как бы лучше объяснить.
+
и ~
.:target
, тоже чисто в познавательных целяхТак вам нужно чтобы хедер был поверх слайдера или наверху страницы, а ниже слайдер?
Давайте отталкиваться нет от мною предложенного слайдера а от вашего минимального, на tab.
Просто по задумке, при листании слайдера в последствии, задумана и авто перекраска всего что выше в ту же гамму что и страница. Но это не сейчас.
Но как добавить label-у before и after, мне нужно нажатую кнопку доделать не только фоном, а after нужен чтоб выводил название страницы не напротив каждого кругляшка, а в одном месте между лого и донатом.
И цвета каждой страницы как менять ? псевдо ребёнком у slides.
Значит, выносите инпуты раньше .wrapper
Во-вторых, если это название слайда (страницы), то с чего это оно будет псевдо от лейбла.
И название, как и думалось вывести ::after прекрасно вышло (нормально только анимировать осталось его), добавил
Если нетрудно подскажите как теперь убрать cursor pointer с того места куда выводится этот текст.
cursor: default
Он почему то только на 6 и 8 label показывает.
@keyframes
, чтобы слайд уезжал и с какой-то задержкой приезжал обратно с прозрачностью. Но не уверена, что анимации двух слайдов гарантировано состыкуются.Или аналогичная логика.
И сделать его таким-же коротким при моей структуре html не возможно ?