aqua.77

Просто прочитал тут о преимуществах чистого CSS правда статья 5-летней давности.

Есть ли смысл заморачиваться на создания разных фишек типа: слайдеры, модульные окна, выплывающее меню и других интересных фишек которые можно сделать на JS. Просто сделать даже простой слайдер на чистом CSS так утомительно, нужно проводить кучу вычислений чтобы кадры гармонично анимировались и т.д.

Сделал шапку для сайта, не уверен в правильности написания кода. Хотелось бы увидеть объективную критику/советы. Шапка.zip

Как заставить внешний контейнер q2 заставить облегать блоки находящиеся в нём?. Можно указать width:308px пикселов, но есть ли свойство которое автоматом всё делает? https://jsfiddle.net/1ht5mo7o/1/

Как сделать чтобы область в левом нижнем углу не заполнялась фоновым цветом? https://jsfiddle.net/0xhypez7/1/ Конечно можно вставить туда картинку, но может как нибудь тенями?

Спасибо, а расстояние между ними только с задержкой получиться указать? Или подобные вещи на чистом CSS не делаются?

Сложно да?

Чтобы увидеть проблему нудно подождать анимацию. Ничего страшного что картинок не видно, главная суть в том чтобы скорость перед тем как картинка исчезла, и с конца передвинулась на своё место была одинаковая скорость. https://jsfiddle.net/ysggq4pf/. получается так: картинки двигаются налево, после того как появляются в конце начинают двигаться медленнее.

Как настроить анимацию так, чтобы элементы плавно плыли по течению. Думаю проблема в процентный значениях между кадрами. Вот песок: https://jsfiddle.net/8awkpysn/1/ И собственно код. <p class="q1"></p> <p class="q2"></p> .q1{ position:absolute; left:0px; width:100px; height:80px; background:black; animation: c1 5s linear infinite; } .q2{ position:absolute; left:110px; width:100px; height:100px; background:black; animation: c2 5s linear infinite; } @keyframes c1 { 15%{ left:-252px; } 15.1%{ left:450px; } } @keyframes c2 { 15%{ left:-252px; } 15.1%{ left:560px; } to{ left:110px; } }

Ну и чтобы шевелить мозгами, чтобы мозги не сохли от готовых работ)

Подпольным клубом пахнет

А есть ли какой нибудь генератор фигур для блоков? чтобы своими руками лепить фиругы а код генерировался соответственно.

Что посоветуете для того кто знает принципы css но хотел бы делать слайдеры, всплывающие окна, разные фигуры из границ...

Особенно с людьми на обложке)

<a href="#q1" id="q2">132</a> <div id="q1"> <h1>Заголовок</h1> <p>Элемент</p> <a href="#x">Закрыть</a> </div> div{ width:500px; height:400px; background:gray; position:fixed; top:90px; left:30%; display:none; } div:target{ display:block; } body{height:10000px;} https://jsfiddle.net/a9zeppqq/ Вопрос собственно такой: Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы, а если указать href="#x" то блок просто пропадает. И можно ли запретить скролинг страницы когда открыт блок?.

Лучший случай как по мне это в большей части книги(Д. Макфарланд), статьи(Харбр Хтмлбук, ), видео-уроки (Попова), а повторять не зная что делаешь глупо.

Это потому что .q77 потомок ul?

Вот селектор который гласит .q1 ul:not(.q77) li:hover: LI находящийся во всех UL кроме того что с классом .q77. Соответственно почему к LI который находится в .q77 всё ровно применяется правое выравнивание? https://jsfiddle.net/cz8pz484/3/ строка 94. (я уже сам замучился)

Вот и я думаю, у вас абсолютно правильный селектор, но не работает. Я даже так сделал .q1 li:first-child ul:not(.q77) li:hover. https://jsfiddle.net/cz8pz484/1/

Хочешь просто что-то сверстать, или серьёзно этим заняться?

Ваш пример должен работать по логики вещей, этот селектор гласит: применять li относящегося к классу q2 кроме класса .q77. Но почему то проблема осталась(нет саму проблему я решил просто интересно почему этот селектор не работает). Селектор на строке 94 https://jsfiddle.net/cz8pz484/

Всё всё понятно.

Например я хочу закрасить DIV но не трогая P div{ width:400px; height:400px; border:1px black solid; } p{ width:200px; height:200px; border:1px black solid; } div:hover:not(p){ background:black; } <div> <p></p> </div> div:hover:not(p) это применение потомка к not так нельзя https://jsfiddle.net/sm5jr7vd/

Я вроде применил вот .q1 li:first-child .q2 li:not(.q77 li) потомок это .q77 li