-
Posts
14 -
Joined
-
Last visited
Information
-
Sex
мужской
-
From
Москва
Odinokiy_volk's Achievements
Explorer (1/14)
0
Reputation
-
Разные градиенты в Photoshop и браузерах
Odinokiy_volk replied to Odinokiy_volk's topic in Web Design
Да, вот 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; } -
Разные градиенты в Photoshop и браузерах
Odinokiy_volk replied to Odinokiy_volk's topic in Web Design
Да, спасибо - с ними стало намного лучше)) Я вспоминал вчера об их существовании но не думал все же что браузеры до сих пор не могут отобразить правильно все цвета и нужно пользоваться безопасными.. Получается это недоработка дизайнера, который использовал небезопасные цвета -
Привет, вопрос почему градиент указанный в фотошопе отличается от того, который задается CSS.. Настройки профиля фотошоп - sRGB.. Сохраняю тоже с галочкой конверт в sRGB, пробовал и без нее.. Подробнее все настройки - https://ibb.co/bZg5a7, https://ibb.co/g1RtTS, https://ibb.co/dMwGhn.. Blend-mode слоя в фотошопе - normal Начальный и конечный цвета совпадают, написаны в одном формате.. В браузерах цвет получается тусклее, менее насыщенным чтоли чем в фотошоп.. На картинке первый желтый градиент создан через background: linear-gradient, а второй вставлен через .png..
-
Наложение резинового фона поверх формы
Odinokiy_volk replied to Odinokiy_volk's question in HTML Coding
Всё получилось.. Если кому интересно как - оба облака сделал как img сразу после body с абсолютным позиционированием.. И ещё интересную закономерность выявил.. Получилось что у облака z-index 1 а у формы по умолчанию 0.. Соответственно по идее для полей формы нельзя поставить индекс выше чем у формы, думал уже обрезать картинку придется.. НО! для полей установил индекс 2 и он сработал - видимо потому что для формы индекс вообще не устанавливал, осталось по умолчанию 0.. Да и облака при img как то красивее растягиваются, при background они словно проваливались вниз при увеличении окна браузера.. Всем спасибо -
Наложение резинового фона поверх формы
Odinokiy_volk replied to Odinokiy_volk's question in HTML Coding
Привет!.. Выложил на гитхаб - 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> идет в каскаде ниже?