Launder

Если честно, всё равно пока до конца не ясно. Поигрался немного с z-index результата не получил, помедетирую ещё позже... Вот так работает, вроде, вполне себе не плохо: https://jsfiddle.net/Launder/tmnnyo0L/4/ Постарался все сложные моменты в коде прокомментировать. Если кому интересна тригонометрия, то её можно посмотреть тут: http://htmlforum.ru/index.php?showtopic=49661#entry368125 ну и листик с карандашом Вам в помощь Кому нужен треугольничек, чтобы поиграться, вот заготовка: https://jsfiddle.net/Launder/2kzjq5em/1/

http://htmlforum.ru/index.php?showtopic=54454&hl= в этой теме посмотри, есть пример трёхуровнего меню.

Видимо всё же, понял не до конца... https://jsfiddle.net/Launder/q7vd9ghv/4/ У меня у <ul> (выпадающий список), z-index: 1; для его псевдоэлемента: z-index: auto; То есть, у него должен быть корневой контекст наложения и z-index должен быть численно равен нулю. Почему же <ul>, имеющий свой собственный фон и бОльший z-index, не перекрывает тень от псевдоэлемента? Кстати, интересно как выделяется пункт меню <a> - фон меняется, но через фон, тень всё равно видна. Вроде фон не прозрачный. Объясните, пожалуйста, данное явление...

Как раз заинтересовался темой в заглавии и нашёл ссылочку: http://www.internet-technologies.ru/articles/article_2075.html Почитал, видно что в CSS можно сделать действительно много. Особенно заинтересовала реализация звезды. Решил её сделать, вот получилась такая хрень: https://jsfiddle.net/Launder/vdspdkf3/ Начал думать что сделал не так, вроде сделал всё по уму, а грани не совпадают. Стал разбираться подробно по исходной ссылке, там многое сделано с конкретными размерами, но откуда все эти цифры? Можно, конечно, мой пример допилить: https://jsfiddle.net/Launder/vdspdkf3/2/ Звезда кажется ровненькой, но такая ли она на самом деле? И потом, интересно понять принцип... Вроде, интуитивно ясно, что дело в средней точке. Все лепестки звезды должны находится в одинаковом положении по отношению к центру, и если провести из центральной точки отрезок до торца лепесков (вершин треугольника), то есть, до самой дальней точки каждого лепестка, то эти отрезки между вершиной и центром должны быть равны. Верно и обратное - отрезки проведённые из вершины каждого лепестка должны пересекаться в одной точке. Так что же это за точка? Вроде она должна совпадать с центром треугольника, но что считать центром?... Постепенно до меня дошло, чем и спешу с Вами поделиться! Вот возьмём такой простой, исходный треугольник: https://jsfiddle.net/Launder/vdspdkf3/5/ По умолчанию, поворот фигуры в CSS осуществляется через его центральную точку. Достаточно очевидно что она по горизонтальной координате совпадёт с верхним углом треугольника, а по вертикали будет равна половине его высоты. Если этой вертикалью разделить исходный треугольник, то мы получим два одинаковых треугольника, левый и правый. Поскольку вертикаль перпендикулярна нижней грани нашего большого треугольника, то рассечение вертикалью на двое делает получившиеся треугольники прямоугольными, поскольку их угол между нижней гранью и общей вертикалью - прямой. Отметим это, поскольку с прямоугольными треугольниками можно взаимодействовать с помощью тригонометрии. Если из левой вершины левого треугольника, и из правой вершины правого направить луч, попадающий в нашу центральную точку, которая задана правилами CSS, то эти лучи делят вертикальный отрезок на две равные части, что означает, что такой луч - медиана этих углов. А теперь давайте вспомним какая же должна быть та центральная точка, которую мы ищем. Из неё всё исходит, а значит "корень" каждого лепестка должен из неё как бы исходить, и луч соединяющий центральную точку с торцом лепестка(вершиной угла) должен идти ровно посередине этого лепестка. Верно и обратное, луч исходящий из вершины и идущий к центральной точке должен идти ровно посередине каждого лепестка (то есть быть его биссектрисой), а значит в каждой его точке он должен быть равноудалён от обоих боковых граней своего лепестка. Очевидно, что этот перпендикуляр будет немного наклонён, иначе наш луч, делящий боковой угол попалам, должен идти горизонтально, а боковые грани должны расходится вверх и вниз. https://jsfiddle.net/Launder/vdspdkf3/6/ (представим себе идущий горизонтально из левой вершины луч, он будет делить угол попалам, при этом попалам будет делиться и треугольник, до тех пор, пока грани сохраняют первоначальное направление) Но поскольку, в исходном треугольнике, одна грань (нижняя) у нас лежит на горизонтальной плоскости, луч уже направлен под углом, верхняя грань под ещё большим (вдвое) углом. Перпендикуляр же к лучу окажется наклонён! А теперь давайте посмотрим на нашу медиану. Её отрезки равны, но поскольку она не наклонена, то соединяет она более дальнюю точку верхней грани и более ближнюю нижней. Если взять точку на верхней грани и провести отрезок перпендикулярный нашему лучу, то точка на нижней грани будет дальше центра. Если взять центральную точку на нижней грани и провести перпендикуляр к лучу, то точка на верхней грани будет ближе центра. Если же взять пересечение вертикали треугольника и луча исходящего из боковой вершины (и делящего боковой угол попалам), то центральная вертикаль находится как бы под углом к перпендикуляру луча, соответственно, одна часть вертикали (верхняя) будет как бы тянутся к более удалённой точке на боковой грани, а другая её часть(нижняя) к более ближней точке на боковой грани. Поэтому эти отрезки будут не равны! А значит срединная точка, в любом случае не будет совпадать с серединой вертикали (иначе отрезки были бы равны). Как же нам выяснить её местоположение? Вспомним, что вертикаль делит большой треугольник на два маленьких. Наш биссектриса отсекает ещё половину бокового угла и делает треугольник более низким. Итак у нас есть маленький прямоугольный треугольник. Нам нужно найти противолежащую биссектрисе сторону, зная размер его прилежащей стороны - 100px. Для этого нам нужно найти угол получившегося треугольника, между нижней гранью и биссектрисой, а далее воспользоваться тригонометрией. Понятно, что этот угол будет вдвое меньше исходного. Размер исходного нам не известен. У нас есть только размеры его прилежащего и противолежащих сторон. Прилежащая - 100px, противолежащая 70px. Если б наша биссектриса и медиана совпадали (как, например, у большого треугольника вертикаль), то мы могли бы сразу сказать что противолежащая сторона нашего маленького треугольника равно половине от большого - 50px, но поскольку биссектриса и медиана боковой стороны у наших маленьких треугольников не совпадают, то это не так. Поэтому нам придётся сначала найти угол большого треугольника, потом его разделить попалам, а потом уже искать размер стороны, исходя из полученного значения. Итак - прилежащая - 100px, противолежащая - 70px. Делим противолежащую на прилежащую - получаем 0.7. Итак тангенс равен 0.7. Арктангенс получается равен 0.61 радиан. Поскольку 180 градусов соответствует пи (3.1415) радиан, а нам нужно выяснить сколько градусов составляет 0.61 радиан - делаем пропорцию. Получаем 35 градусов. Интересно что 36 градусов - десятая часть полного круга, а поскольку наша пентограмма делит круг на 5 частей, то 36 градусов это половина от этой части. Получается, если бы наши лучи звезды не вершинами бы замыкали лепестки, а, наоборот, вершинами исходили бы из центральной точки, то грани бы заняли бы в сумме как раз половину круга. В нашем неидеальном случае соотношение получается такое, что угол лепестка - 35 градусов. Едем дальше - делим его попалам, получае 17,5 градусов, округляем до 18 градусов (кстати как раз половина от 36, о которой мы говорили). Теперь, зная угол и прилежащую сторону в сто пикселей, нам нужно найти противолежащую сторону. Вычисляем тангенс 18 градусов, это чуть меньше 0.325, округляем до 0.32, и умножаем прилежащую сторону на тангенс: 0.32 x 100px получаем 32 пикселя высоты. И вот она искомая точка! Осталось за малым, ВСЕМ нашим треугольникам, образующим звезду поставить это значение центральной точки (ну а дальше уже их двигать на нужный угол). Поскольку плоскость идёт у нас от верхнего левого угла и ось Y направлена вниз, то координаты вычисляются так: X - 50%, Y вычислим - исходная высота равна 70px, от 70 - 32 = 38 пикселей от верхней точки. Итого, для КАЖДОГО треугольника ставим: transform-origin: 50% 38px (можно 100px 38 px); а дальше вращаем их как хотим. А хотим мы разнести их на 72 градуса (360/5) друг от друга. Это, в общем-то не сложно и реализация видна из кода. Чтобы центр круга совпал с центральной точкой нашего треугольника, нужно сделать следующее. Во-первых нужно учесть, что те относительные размеры, которые мы давали при трансформации (100% - размер фигуры), не совпадают с размерами абсолютного позиционирования. Фигура начинается с точки left: 0 top: 0 (помним что <li> находит в контейнере <ul>, поэтому эта точка не совпадает с левой верхней частью экрана, а совпадает с верхней левой частью контейнера <ul>), после того как я компенсирую размеры самой фигуры transform: translate(-50%, -50%) точка left: 0 top: 0 совпадает с центром фигуры. Поскольку мы знаем, что центр треугольника считается CSS как центр его вертикальной медианы, а нам нужен центр биссектрисы, то мы считаем центр медианы - 70 / 2 = 35px, центр биссектрисы мы уже посчитали - 38px вниз, поэтому нам круг нужно сдвинуть на три пикселя вниз, тогда его центр совпадёт с центром треугольников. https://jsfiddle.net/Launder/vdspdkf3/4/ Вот и всё. Алкогоритм, вроде, более-менее ясен =)

А мне нравится Но я соглашусь в том, что некоторые элементы бы чуть-чуть затемнить, например как вот тут меню навигации: https://webref.ru/layout/howtocodeinhtml Это, кстати, вносит некоторое разнообразие в цветовую гамму и не отвлекает.

@Vlad, когда в html-справочнике убираешь галочки, например с нестандартных и осуждаемых тегов, а дальше заходишь в любой оставшийся, а потом по стрелочке назад возвращаешься обратно, то все галочки сохраняют своё значение, но настройки сбиваются - отображаются все теги, а не только те, которые должны отображаться в соответствии с галочками.

Всем здоровья, хорошего настроения, профессионального роста, творческих успехов и удовлетворения от достигнутого и проделанного, а также чтоб в личной жизни всё складывалось..., в общем, счастья и процветания!

Вы уверены что правильно указали название сайта? 503 Service Temporarily Unavailable

@Chaffee, я правильно понимаю, что одна из проблем это то, чтоб футер был всегда внизу, даже если в колонках мало содержимого? ну а если много, то футер сдигался бы этим содержимым. Если да, то в теме аналогичный пример приведён с шапкой, с той лишь разницей, что для шапки добавлено относительное позиционирование и зет-индекс, а для подвала это не обязательно, поскольку по-умолчанию отображается те элементы, которые располагаются в коде ниже.

Я прошу прощения, но не похожая ли тема была совсем недавно: http://htmlforum.ru/index.php?showtopic=54877

http://jsfiddle.net/Launder/00f4k26w/4/ А вот способ растянуть колонки с минимальным изменением исходного кода. 1. добавил html, body{height: 100%} 2. значение overflow: auto для основного контейнера (вместо hidden); там же поменял height c auto на 100%. 3. Добавил к левой колонке свойство min-height: 100%. Вроде всё. ЗЫ: это не отменяет вышесказанного, что минимальную высоту лучше назначить как для левой, так и для правой колонки, также добавить и для левой колонки псевдоэлемент для отмены обтекания, да и сам псевдоэлемент, по-моему лучше использовать такой, какой я указал в своём примере (блочный, невидимый с нулевой высотой), ну с высотой плавающих блоков также можно проделать некоторые манипуляции с помощью calc.

А вот Вам вариант с пушером: http://jsfiddle.net/Launder/o4g74cqj/2/ Там два блока с классом пушер, они вставлены в начала левого и правого блока. Когда мы задаём им высоту, они сдвигают текст вниз, а когда задаём отрицательный верхний марджин они уходят вверх, но не меняют размеры плавающего элемента. В результате, всё что может дать нам такой блок - дополнительный верхний отступ. На размеры плавающих блоков он, похоже, не влияет, если только не сдвигает содержимое вниз. Вы можете включить закомментированное свойство бекграунд и увидеть этот блок, посмотреть как и поверх чего он располагается, и что меняется, когда изменяешь его размер и марджин. ЗЫ: ну и, наверное, стоит сказать, что в самой теме задано, что речь идёт о плавающих элементах, а для подобной задачи можно применять разные подходы. UPD: Когда мы добавляем отрицательный отступ плавающему элементу, он располагается поверх фона блочных элементов и под строчными. Отмечу в обычном варианте он строчные элементы сдвигает (чтоб они его обтекали).

Вот если по первому примеру, где используется подкладка tint, с твоим кодом, получилось так: http://jsfiddle.net/Launder/o4g74cqj http://jsfiddle.net/Launder/o4g74cqj/1/- это через calc у высоты получилось убрать лишние 20 пикселов, которые, как я понимаю, добавляет padding, прибавляя с верху и с низу по 10 пикселов. Можно таким же образом посчитать сколько места занимает шапка, главное меню и все отступы, по моим прикидкам получилось где-то 130-140 пикселей, с паддингом 150-160 пикселей и задать соответственно минимальную высоту, тогда и на большой страничке конец блока навигации будет как раз растягиваться ровно до самого низа. Идея такая, берём пустой блок, размерами равный шапке и добавляем его вверху содержимого. Итого у нас шапка, пустое содержимое равное шапке, и содержимое, материалы сайта. А далее, пустое содержимое прячем под шапку, в результате чего у нас низ блока получается как раз внизу странички. Для этого мы для неё min-height: 100%, а для того, чтоб она понимала откуда брать эти 100%, то для родительского блока body мы тоже размер поставили 100%, а для него, в свою очередь для html задали тоже 100%. Итого хтмль берёт размер от размера странички, а дальше 100% от хтмль идёт для body ну и так далее до нашего блока. Поскольку, по умолчанию, сверху показывается то, что находится в коде ниже, то для того, чтоб шапка была вверху я ей добавил position: relative. Если бы мы проделывали подобную операцию для подвала, то это было бы не обязательно. Можно, но тогда жёлтый фон будет прокручиваться. А Вы попробуйте в песочнице поэкспериментировать. Это и есть тот самый пустой блок. Да, я добавил отмену обтекания и для левого блока и немного изменил код в псевдоэлементе, впрочем, последнее, возможно и не обязательно, если для таблицы задать height: 0. В противном случае таблица, вероятно в сочетании с min-height самого элемента, может растягивать блок.

@wwt, вот смотрите: https://jsfiddle.net/Launder/w092L3qL/1/ для level два можно закомментировать (отменить) любое свойство что height, что min-height - рояли не играет, они будут работать одинаково, а для level1 когда height указываешь, появляется высота и для level2, когда высоту для level1 комментируешь, то высота для level2 исчезает. Зато для level1 когда height указан, его высота получается строгой, вне зависимости от наличия min-height и от того, что из них находится в коде ниже, а когда остаётся только min-height, то высота level1 растягивается по содержимому. Как сделать так, чтоб высота для level1 имела минимальный размер и растягивалась по содержимому, при этом level2 также растягивался от содержимого и имел минимальную высоту равную 1) 50% от заданной высоты level1 2) 50% от реальной высоты level1, то есть чтоб когда растягивался level1, пропорционально растягивалась минимальная высота и level2?

Жест однозначно более родной для человека, поскольку более непосредственен, но жесты ограничены тем, что видно, а знаки дают более обобщённый смысл. В результате когда человек имеет дело с любой знаковой системой происходит преобразование смысл -> знаки <—> знаки -> расшифровка смысла. Для передачи сложного смысла может потребоваться несколько итераций в обе стороны, но результатом будет понимание "на уровне жеста". Поэтому правильная методология, как мне кажется, тяготеет к жесту (наглядности), но стремится к такому разнообразию знаков (слов), чтоб легко можно было закодировать любой жест. В общем, слова и жесты дополняют друг друга, ну если, конечно, используются к месту.

Для нерушимого жёлтого фона можно использовать две заглушки: первая она более топорная, и вторая она посложнее, но наверное, концептуально чуть более правильная...

http://jsfiddle.net/Launder/e951gm6t/3/ Наверное, как-то так...

А почему min-height от min-height не работает? https://jsfiddle.net/Launder/w092L3qL/ если в #level1 вместо height поставить min-height, то браузер не сможет подсчитать размер для #level2 И как же быть, если нам нужно сделать именно растягивающийся блок, минимальный размер которого задан в %?

Вот оно что. Ну тогда более-менее ясно. Иными словами если бы у <a> было любое количество потомков, то они все бы были укладывались относительно <ul>, поскольку у <a> нет условий для создания своего стекового контекста. Я про это свойство читал вот тут: http://resources.webknowledge.ru/digests/css/property/z-index/ но про наследование, видимо, до конца не понял. Кстати, если мы назначим <a> свойство overflow: hidden, то тень исчезнет, какой бы у неё не был z-index, ну, конечно, если тень не направлена внутрь. Это пожалуй, немного про другое, но я как-то долго не мог понять, куда исчезает мой псевдоэлемент, когда он выходит за границы родительского элемента, и искал где я нахимичил с z-index, а дело оказалось в overflow. Это значение по умолчанию. А оно всегда численно равно нулю?

Спасибо за столь наглядное объяснение, идея более-менее ясна: если элемент лежит внутри стекового контекста, он не может быть "ниже" родителя (корня стекового контекста), даже если у него z-index: -1000000; Когда я назначаю свойство z-index: auto для <a>, то я вывожу <a> из стекового контекста, который я задал назначив z-index: 0 для моего списка <ul>. Соответственно, тень между пунктами меню исчезает, поскольку <ul> перестаёт быть для неё элементом формирующим стековый контекст, а значит её элементы перекрывают тень, которая, имея свойство z-index: -1, скрывается за элементами <ul>, z-index которых равен нулю. http://jsfiddle.net/Launder/tr0zurq1/3/ Но тогда почему тень от псевдоэлемента <a> должна быть меньше нуля, даже если я для <ul> назначил z-index: 1? http://jsfiddle.net/Launder/tr0zurq1/4/ я закомментировал 31 строку, в котором задано свойство z-index для псевдоэлемента и тень между элементами <li> появилась снова. Более того, если я введу вручную z-index: 0 то тень между элементами никуда не исчезнет. Вот я задал, с Вашей помощью, для элемента ul a свойство z-index: auto; Тем самым, как я понял, я вывел <a> из стекового контекста <ul>. Поскольку я задал для ul z-index равным единице, то, если считать z-index <a> равным нулю, по-идее, <a> вообще не должно выделяться, но оно выделяется. Значит z-index <a> должен быть не меньше единицы. По какому принципу назначается значение z-index: auto? Это первый вопрос. И второй: если я задаю для псевдоэлемента, содержащего тень, z-index: 0, что явно меньше единицы, почему тогда тень между элментами отображается? Почему нужно именно отрицательное значение? Значит я как-то не правильно понимаю логику. Не могли бы Вы её объяснить на этом конкретном примере?

http://jsfiddle.net/tr0zurq1/ Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>. По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент. Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню? <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }

Вот этот, на мой взгляд, очень удачный пример: http://codepen.io/anon/pen/pgvoWo?editors=110 Как раз по прочтении указанной выше книжечки, я понял примерно так: 1. базовая линия в лайн-боксе (строке) определяется самым высоким инлайн-элементом и распологается на 0.5ex ниже центра лайн-бокса. 2. для того чтоб шрифт был ровно по-середине базовую линию нужно сначала поднять "обратно" на 0.5ex тогда базовая линия будет ровно по середине. 3. А затем опустить на половину высоты шрифта -0.5em. ЗЫ: нужно помнить что ex от ем отличаются.

Ну да, согласен. Но visibility при этом, включается сразу, а выключается только в конце функции перехода. За счёт этого, видимо, и появляется возможность использовать для самого перехода свойство opacity. Логично. Только visibility можно использовать косвенно, через opacity, а через display плавный переход, похоже, вообще никак не подключишь. Спасибо за наводку. Но в первом приближении, получается вообще интересно: мало того, что изменение отображения подменю происходит за счёт изменения свойства opacity, свойсво box-shadow должно по-идее накладываться сверху (Слава Богу, почему-то не накладывается). А если ещё добавить изменение прозрачности тени, то получится сразу наложение трёх функций opacity, box-shadow и изменения прозрачности в box-shadow. Можно, конечно, box-shadow включить по-умолчанию, а изменять, при выделении, прозрачность через альфа-канал. Наверное, стоит поэксперементировать.

Похоже, что в указанном примере, всё работает ровненько именно потому, что изменение тени происходит НЕЗАВИСИМО от изменения прозрачности остальных элементов. Почему так происходит - непонятно. Ведь в случае задания свойства opacity: 0 тени видно не будет. Соответственно и при изменении прозрачности с нуля до единицы тень также должна менять прозрачность, то есть для неё должны работать две функциии, общее изменение прозрачности, а поверх неё - функция измения самой тени. Но она меняется буд-то бы для неё прозрачность сразу установили на единицу, а изменения отображения тени происходят только по той функции, котороую в transition установили для box-shadow. ЗЫ: кстати свойство visibility, в сочетании с transition также работает интересно, сначала оно просто включается без задержки, а при выключении, задержка составляет всё время изменения, затем оно сразу становится скрытым. Это работает как бы по-умолчанию, и, если почему-то не работает эти параметры можно поставить их вручную. Постепенное нарастание/убываение происходит из-за изменения прозрачности. При этом, для ul.list меняется свойство opacity, а для главного меню, изменение цвета от прозрачного до нужного, происходит через задания измения свойства background для тега <a>. ЗЫЗЫ: а свойство transition нужно задавать одним правилом для свойства, то есть: transition: all 1s ease, box-shadow .5s ease .5s - правильно, а вот два транзишна, один для всех, другой персонально для box-shadow - не получится. Но при этом можно задавать разные transition для прямых и обратных изменений, например: UL#menu > li { transition: all 1s ease, box-shadow .5s ease; }UL#menu > li:hover { transition: all 1s ease, box-shadow .7s ease .3s; }ЗЫЗЫЗЫ: ну и к слову об актуальности темы - оказывается что свойство display не работает со свойством transition. Соответственно, приходится пользоваться свойством visibility совместно с opacity, если есть желание задать плавный переход.

Да, похоже, Вы правы. В общем, нужно либо через .d1 p отменять для <p> отступы (и вместо div class="blabla" оборачивать в <p>), либо оборачивать в span и назначать .d1 span {display: block} либо иную подобную заглушку...