Launder

Вот.

По информации, из "этих Ваших интернетов", The Bat! поддерживает язык гипертекста HTML 4.0 и стили форматирования документа CSS v2.0, игнорирует скрипты и исполняемый код. У Thunderbird, поскольку его разработка давно уже приостановлена (по крайней мере, Мозилой, подхватил ли кто эстафету, не в курсе), думаю, ситуация не лучше... Впрочем, что касается Бата, то я бы поискал более точную информацию на сайте производителя, в первом приближении, её там нет, но зато там есть форум, думаю, можно поинтересоваться...

Да и формат форума, как-то удобнее... ИМХО.

@by chris, 24 пример - кубик-рубик :-) @WhatIsHTML, вот эта статья помогает понять, откуда растут ноги =)

Вот к Вам и вопрос :-) Дело в том, что 100% для радиального градиента, это расстояние от центра до угла квадрата. Когда же мы углы срезаем, через border-radius: 50%, то радиусом нашего круга становится расстояние не от центра до вершины, а от центра до середины любой стороны. Не сложно вычислить, что для квадрата соотношение получится: расстояние до вершины = корень из двух умноженное на расстояние до середины любой из сторон. Иными словами, проценты можно тупо делить на корень из двух и получим, в принципе адекватный результат (ну то есть 50%, которые хотим, делим на 1,41 и получаем примерно 35%, что и подставляем). Но всё-таки это как-то криво. Как же так красиво спозиционировать так, чтоб радиальный градиент считал 100% краем нашей окружности?

А просто радиальным градиентом ещё не предлагали?

CSS'ом вроде не сделать, т.к. треугольник делается с помощью свойства border, а при назначении этому border'у градиента (через свойство border-image: linear-gradient(...) ) назначенный градиент будет иметь приоритет перед цветом transparent у border'ов справа и слева и "эффект треугольника" пропадет. Можно сделать ромбик, это будет трансформированный(transform) прямоугольник(div). Исходную заготовку наклоняем (skewX или Y). Поворачиваем(rotate). Делаем градиент из одного угла в другой. Например, из левого нижнего в правый верхний(linear-gradient(to right top, ....)). Можно на 50% сделать ромбик прозрачным (transparent 50%, .... 50%), поскольку половинка ромбика - треугольник, который будет повёрнут таким образом, в зависимости от того, что Вы сделали прозрачным. Ну и Ваша фигура получится прямоугольник с границей + треугольник (половинка ромбика). У меня ощущение что градиент в Вашей заготовке не линейный, а радиальный. В принципе, их оба можно использовать одновременно, но для радиального нужно тогда у обоих фигур точку из которой он исходит сделать одну, возможно, придётся повозиться с позиционированием. Ну или не делать верхнюю часть ромбика прозрачной, а сделать скажем фон для прямоугольника и ромбика одинаковым (жёлтым), а для ромбика сделать ещё и оранжево-персиковый радиальный градиент. Как это будет выглядеть - вопрос, но можно поэксперементировать по всякому! И что-нибудь, да получится Интересно что углы немного закруглены и граница сделана, как мне кажется с небольшой прозрачной областью, между фоном и границей. Видимо, нужно для фона ставить content-box и делать небольшой отступ (padding). Можно, наверное, попытаться решить через border-image. PS: Учтите что если Вам придётся двигать ромбик относительно прямоугольника, то придётся двигать обе координаты translateY(..) translateX(..), поскольку из-за трансформации фигуры, сдвигается и координатная сетка, в которой лежит фигура. Ну и тема была, уже похожая: http://htmlforum.ru/index.php?showtopic=49661&hl= Ну такие задачи решаются, как мне кажется, больше в учебных целях...

Выложите код, пожалуйста, сюда или в другую песочницу.

А чем плохо для новичка сначала посидеть на htmlbook.ru? а потом почитать что-нибудь, скажем, на webref.ru?

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

Ну этот пример по логике практически полностью повторяет пример в теме.

Ну, понятно. Но, Вы обратили внимание, что если у исходного примера просто убрать высоты (всю эту конструкцию height:190px и по 100% у потомков), то вёрстка немного съедет? Я исходил, что задача, прежде всего, учебная, а значит её цель, в первую очередь, увидеть как можно больше градаций применимости. Ведь если размеры должны быть одинаковыми, то и картинки также должны иметь одинаковые размеры, что маловероятно - даже если они примерно одинаковые, соотношения сторон, скорее всего, будут немного различаться. Кстати, в реальной жизни, наверное, нужно учитывать не только соотношения сторон, но и абсолютные размеры. Не уловил, идеи, если честно Это что-то из методологии БЭМ? Мне решение, представляется следующим: у нас картинки могут быть либо слишком высокие, либо слишком широкие. Как измерить это средствами CSS я мало себе представляю... Нет идей? Так вот, и в том, и в другом случае, нужно просто менять угол "обрезающих дивов". Только в случае широких небольшие углы будут относительно горизонтальной нормали, в случае высоких - относительно вертикальных. Технически соотношение углов плоскостей также, возможно, будет отличаться. В исходном примере это 120 = 60 + 60, а там может оказаться скажем 150 = 100 + 50. Но может и не будет - это я навскидку говорю. Главное тут углы относительно нормалей. Просто в моём примере, нужно просто внимательно посмотреть геометрию, и это, в общем-то не сложно. И дальше, с небольшими изменениями можно адаптировать пример под задачу. Вот, кстати, такое решение мне представляется ещё более универсальным. Почему? Да потому, что, как раз, всё что нужно, это в одном месте менять угол, а в двух других ставить угол в два раза меньше. И рамочка получится или более плоской или более вытянутой. Попробуйте В исходной геометрии такого не получится, Вам придётся высчитывать всё относительно нормалей, а тут я привязал углы к горизонтальной нормали и обрезающие дивы двигаются относительно неё.

ТС: Сочетание цветов, вроде, более-менее нормальное, единственное меню вверху видно немного тускло. У того сайта интересная история, создатель заработал миллион долларов, продавая рекламу на сайте по цене 1$ за 1 пиксель. Да тот сайт вообще бомба, можно ради прикола мышкой возюкать туда-сюда, кликать наугад и смотреть, куда тебя занесёт :-)

Ну и рябь :-) А зачем столько свободных квадратиков?

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

Я прошу прощения, а что означает margin: 3? Что-то я сходу не пойму во что он безразмерную величину преобразовывает. Может задав им относительные размеры? через @media задав минимальную ширину, меньше которой width сделав 33%? ну и сделать отступы по полпроцента. Аналогичные действия, наверное, можно сделать и для высоты, если, как я уже говорил, задать и то, и то, в относительных размерах. Можно, наверное, также попробовать следующее: 1. сделать <a> блоками. 2. сделать сетку для ширины и высоты <a> через @media. Ну то есть для определённых абсолютных размеров, задать относительные в процентах. Чтоб область картинки была и не слишком маленькой, и не слишком большой. 3. для IMG поставить максимальную ширину и высоту как 100%.

Ну а чем мы рискуем? Более того, работает, даже вот так. И в данном случае уже мы можем запросто менять изображение.

Вот так, пожалуй, чуть поаккуратнее

input:focus ~ label,label:activeПочему нужно использовать оба этих правила, чтоб стили применились? Почему каждого из этих правил, в отдельности, не достаточно?

А зачем в 9 строчке кода CSS width: 100%?

Да, лучше, но только карандаш бы я повернул в другую сторону. Всё-таки для нашего восприятия, более естественно направление, соответствующее чтению, слева направо. И острый он уж больно :-) Я понимаю, что карандаш должен быть хорошо заточен, но не должен же он превращаться в пику. Ну а так, пожалуй, поинтересней. Да, и Вам тут написали, что Валидатор ругается на ошибки: https://validator.w3.org/nu/?doc=http%3A%2F%2Fplan47.ru%2F Изучите что он там пишет... Оригинальное сообщение исчезло, видимо, из-за переезда форума на новый хостинг.

Кстати, вот тут соглашусь. Карандаш-меню смотрится немного простовато (и выделяется пункт меню тоже еле заметно), на фоне довольно-таки интересного логотипа. Впрочем, в верхушке логотипа, а именно в утолщениях, возможно, лучше бы смотрелся какой-нибудь тёмный цвет, чем чёрный. Впрочем, если в работе архитектора больше уклон в сторону проектирования, а не дизайна, то некоторая "чертёжность" логотипа, вероятно, уместна. И ещё: http://plan47.ru/indes.html- вот тут страничка производит впечатление насыщенности. А вот тут: http://plan47.ru/index.htmlсверху как буд-то много свободного места.

Добрый день! В целом, впечатление нормальное. По крайней мере сочетания цветов глаз не режет, как говориться, простенько, но со вкусом. Интерьеры красивые! Что касается более глубокого анализа, то тут надо представить себя на месте заказчика, вжиться в роль предвкушающего новое жильё... И прикинуть, хватит ли мне информации, представленной на сайте, для того чтоб отметить Вас как интересный вариант. Как Вы будете выглядеть на фоне Ваших коллег... Стоит ли рассмотреть возможность сотрудничества с Вами более подробно, имеет ли смысл с Вами встретится, обсудить какие-то идеи... Тут сложно сказать... http://plan47.ru/port.html- вот здесь, в Мозиле, в каждом готовом проекте, каждый следующий пример съезжает вправо.

А почему нельзя сделать межсайтовую авторизацию? Скажем, влад@хтмльбук.ру пишет на css-live? А на css-live, скажем, дать возможность всем пользователям авторизованным на хтмльбук писать на css-live.ru? то есть сайт css-live доверяет сайту хтмльбук и даёт его пользователям какие-то минимальные права, достаточные для дискуссии?

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