Odinokiy_volk

Да, вот css-код для всей ленты.. Правда я там уже поменял цвета на безопасные, но все остальное осталось тоже самое .ribbon { color: #34abd6; position: absolute; top: 20px; left: -11px; background: rgba(255,255,51,1); background: -moz-linear-gradient(top, rgba(255,255,51,1) 0%, rgba(204,204,0,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,51,1)), color-stop(100%, rgba(204,204,0,1))); background: -webkit-linear-gradient(top, rgba(255,255,51,1) 0%, rgba(204,204,0,1) 100%); background: -o-linear-gradient(top, rgba(255,255,51,1) 0%, rgba(204,204,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,51,1) 0%, rgba(204,204,0,1) 100%); background: linear-gradient(to bottom, rgba(255,255,51,1) 0%, rgba(204,204,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff33', endColorstr='#cccc00', GradientType=0 ); -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 1px 0 1px #dcd437, inset -1px 0 1px #dcd437, inset 0 -1px 1px #dcd437, inset 0 1px 1px #dcd437, 0 3px 0 rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 1px 0 1px #dcd437, inset -1px 0 1px #dcd437, inset 0 -1px 1px #dcd437, inset 0 1px 1px #dcd437, 0 3px 0 rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 1px 0 1px #dcd437, inset -1px 0 1px #dcd437, inset 0 -1px 1px #dcd437, inset 0 1px 1px #dcd437, 0 3px 0 rgba(0,0,0,0.25); font-size: 14px; line-height: 14px; padding: 10px 121px 10px 26px; width: 236px; height: 30px; -moz-border-top-right-radius: 17px; -moz-border-top-left-radius: 17px; -moz-border-bottom-right-radius: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-top-left-radius: 17px; -webkit-border-bottom-right-radius: 17px; border-top-right-radius: 17px; border-top-left-radius: 17px; border-bottom-right-radius: 17px; }

Да, спасибо - с ними стало намного лучше)) Я вспоминал вчера об их существовании но не думал все же что браузеры до сих пор не могут отобразить правильно все цвета и нужно пользоваться безопасными.. Получается это недоработка дизайнера, который использовал небезопасные цвета

Привет, вопрос почему градиент указанный в фотошопе отличается от того, который задается CSS.. Настройки профиля фотошоп - sRGB.. Сохраняю тоже с галочкой конверт в sRGB, пробовал и без нее.. Подробнее все настройки - https://ibb.co/bZg5a7, https://ibb.co/g1RtTS, https://ibb.co/dMwGhn.. Blend-mode слоя в фотошопе - normal Начальный и конечный цвета совпадают, написаны в одном формате.. В браузерах цвет получается тусклее, менее насыщенным чтоли чем в фотошоп.. На картинке первый желтый градиент создан через background: linear-gradient, а второй вставлен через .png..

Всё получилось.. Если кому интересно как - оба облака сделал как img сразу после body с абсолютным позиционированием.. И ещё интересную закономерность выявил.. Получилось что у облака z-index 1 а у формы по умолчанию 0.. Соответственно по идее для полей формы нельзя поставить индекс выше чем у формы, думал уже обрезать картинку придется.. НО! для полей установил индекс 2 и он сработал - видимо потому что для формы индекс вообще не устанавливал, осталось по умолчанию 0.. Да и облака при img как то красивее растягиваются, при background они словно проваливались вниз при увеличении окна браузера.. Всем спасибо

Привет!.. Выложил на гитхаб - https://knyaz85.github.io/SafariToursS/indexS.html div.cloud2 - нижнее синее облако должно перекрыть форму .form-online-booking .cloud2 { background: url("img/cloud2.png") left top no-repeat; height: 882px; background-size: cover; min-width: 1280px; position: relative; z-index: 999; } .form-online-booking { ..... position: relative; z-index: 0; } Получается только с отрицательным z-index - если задать его форме, НО тогда не работают поля формы и им уже нельзя повысить индекс так как это дети формы.. И кстати мне тут мысль пришла в голову может быть положительный индекс не работает просто потому что это фон, т.е. бэкграунд?? Может он в принципе должен быть ниже всех элементов несмотря на индексы.. Просто неудобно делать это синее облако с помощью img опять все позиционировать на этом облаке потом чтоб на него залезть да и сама картинка неизвестно как будет масштабироваться в зависимости от размера окна браузера..

Привет! Подскажите как наложить нижнее синее облако поверх формы что справа.. Пробовал позиционировать этот фон относительно body и других контейнеров, мало того что не получилось расположить поверх формы так он ещё и обрезается, а он должен быть резиновым.. Пробовал поставить z-index выше относительно самой формы, body, а также других элементов но также ничего не вышло.. Пробовал эксперименты с opacity - тоже не помогает.. Для элементов формы применяется абсолютное позиционирование, видимо это не дает вытащить синий фон поверх нее, но должно же быть решение

если для строчного элемента указать float, его значение display изменится на block https://webref.ru/layout/learn-html-css/positioning-content

Как все сложно)) ладно, благодарю за критику)

хз мне казалось это не имеет значения.. значит надо просто применить флот к ссылке в которую обернут img

<a href="index.html"><img height="150" src="assets/images/logo.jpg" alt="Логотип (мое фото)"></a> header img { border-radius: 50%; margin: 5px; float: left; } h1 и nav обтекают img справа поэтому для header применяется .clear

В моем случае clearfix применяется к header и footer, если ты обратишь внимание)) они как раз выступают здесь вместо container и row.. как раз внутри header и footer расположены элементы c float и обтекаемые их элементы - в моем случае картинки и меню.. то есть к родителям header и footer у которых дочерние элементы флотятся я и применяю .clear а колонки уже в секции .container безо всякого флота.. расположены как строчно-блочные элементы с шириной в процентах поэтому там и нет .clear для .section и кстати.. с бутстрапом я еще не работал но мне кажется для семантики лучше использовать section aside article чем бесконечные div

andrew312, Почти все сделано на основе руководства Шэя Хоу, переведенного Владом Мержевичем https://webref.ru/layout/learn-html-css. Там советуется все элементы где применяется float, а также элементы которые их обтекают брать в группу очистки содержимого float (в моем примере .clear) НА ВСЯКИЙ СЛУЧАЙ, даже если бы другие элементы до или после нее не смогли бы испортить верстку в результате, обтекая элемент с float. Как я понял это делается ВСЕГДА для страховки чтоб точно быть уверенным что верстка не испортиться. Что-то свое я конечно тоже добавил, например не знал как на одной строке одновременно расположить часть текста выровненной по левому краю, а часть по правому потому и применил позиционирование, получилось может быть не совсем правильно. Ну и другие подобные мелочи. В общем, спасибо за критику!

Сайт https://knyaz85.github.io/ Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др. Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер.. Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)

Здравствуйте! Изучаю html и css не так давно хотелось бы уяснить для себя один вопрос.. Почему в некоторых случаях селекторы типа все же имеют приоритет над селектором класса?? В литературе ( https://webref.ru/layout/learn-html-css) поясняется что селектор класса имеет больший вес специфичности, но так получается не всегда.. Ситуация для примера - https://jsfiddle.net/bnzgw6af/ . Заголовок <h2>, абзац <p> и ссылка <a> обернуты классом .hero, для которого применяется белый цвет. Отдельно же для заголовка и ссылки с помощью селекторов типа применяется зеленый.. Почему белый цвет действует только для абзаца? Ведь класс .hero охватывает и заголовок и абзац и ссылку.. Также почему например цвет <body> не перекрывает своим цветом цвет <h2> ведь это оба селекторы типа и селектор <body> идет в каскаде ниже?