css- все статьи тега ➜ страница 15


CSS fade слева направо

Есть ли способ выцветания элементов (по крайней мере, только текста) слева направо или наоборот, используя только CSS? Вот пример того, что я имею в виду: На самом деле, если это требует jQuery, я тоже приму это, просто как второй приоритет. ...

Как отобразить список в две строки?

У меня есть список элементов, которые я хочу разместить в пространстве, ограниченном по вертикали: <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul> Поскольку я не хочу, чтобы список имел больше определенной высоты, но я могу расширить его по горизонтали, я хочу разделить список на столбцы, например: One Two Three Four Five Six ...

Найти элемент, который вызывает отображение горизонтальной полосы прокрутки в Google Chrome

Когда я увеличиваю размер окна Chrome до 328 x 455 пикселей, я все еще вижу горизонтальную полосу прокрутки. Как я могу узнать, какой элемент является причиной этого? Я искал элементы через консоль разработчика, но не могу найти элемент. Затем я попробовал скрипт, который я нашел здесь , но ничего не регистрируется. Я попробовал его на элементе body, section1 и куча других, но не знаю, что еще делать. $(function () { var f = $('body'); //document.getElementById("body"); var ...

Функция наведения курсора повторяется всякий раз, когда вы перемещаете мышь внутри селектора

У меня есть анимация, которая срабатывает при наведении внутри некоторых дивов. Когда мышь находится в div, перемещение ее в другое место в div вызывает повторное срабатывание эффекта наведения. Я пробовал использовать mouseenter/mouseleave, и это делает то же самое. Как я могу сделать функцию триггером только на mouseenter и mouseleave, а не всякий раз, когда она перемещается внутри селектора? Демо $('#nav, #footer, #leftNav, #rightNav').hover(function() { $('#navFill').animate({ lef ...

React Native font outline / textShadow

Можно ли добавить абрис или textShadow к шрифту в react native, чтобы добиться чего-то вроде этого (белый шрифт с черным абрисом): В CSS в интернете можно добавить текстовую тень или контур к шрифту, чтобы дать тексту границу, которая следует за шрифтом, что-то вроде этого: h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } <h1>Hello World</h1> Можно ли сделать что-то подобное в react native? Я взял пример фрагмен ...

CSS заполнить оставшееся пространство ширины

У меня есть проблема с созданием CSS для заполнения оставшегося пространства ширины. Я пробовал так много других ответов в stackoverflow, и та же проблема возникает, div продолжает ломаться в новую строку. Вот мой код: Http://jsfiddle.net/YSLJX/ Я пробовал их, но ничего не работает... width: 100% width: available width: auto ...

CSS позиционирование для заполнения контейнера: ширина против левого / правого?

Учитывая: для элементов, которые абсолютно расположены внутри относительно расположенный контейнер. Если вы хотите, чтобы элемент заполнял ширину контейнера. элемент также выровнен снизу. Лучше всего для максимальной совместимости браузера установить width в пикселях для элемента, или просто использовать left и right? Любые распространенные ошибки, чтобы следить за любой из них метод? Очевидно, что использование left: 0; и right: 0; сделало бы код более управляемым в тех случаях, когда ...

CSS: размещение стрелки / треугольника с границей в верхней части моего выпадающего меню

Только что запустил этот сайт (http://dovidoved.org / ) и клиент хочет один из этих треугольников / стрелок в верхней части каждого выпадающего меню. Проблема в том, что меню имеет границу вокруг него, и стрелка должна зацепиться как с фоном, так и с границей. Не знаю, как это сделать. Есть предложения? Должен ли я использовать изображение? Вот мой CSS: /* creates triangle */ .main-navigation ul ul:before { border-bottom: 10px solid #fae0bb; border-left: 10px solid transparent; ...

Что происходит, если видовой экран макета меньше визуального?

Объяснениевидового экрана компоновки ивизуального видового экрана можно найтиздесь . Я прочитал здесь и здесь , что следует использовать <meta name="viewport" content="width=device-width,initial-scale=1.0"> Если вы хотите оптимизировать веб-страницу для мобильных устройств. Я хотел бы понять последствия этого для iphone4 в ландшафтном режиме. Я думаю, что происходит следующее: Width=device-width Ширина устройства iphone4 составляет 320px в ландшафте (смотрите здесь ), хотя ipho ...

Textmate переключить свернуть / развернуть CSS команду правила?

Кто-нибудь знает команду (не макрос) для Textmate / E текстовый редактор / красный автомобиль / и т. д. . это свернет многострочное правило CSS до одной строки или, Если правило уже находится на одной строке, развернет его до многострочного? Я уже знаю о сворачивании кода, и это не то, что мне нужно - мне нужно уметь переключать правила между однострочными и многострочными и редактировать и сохранять их таким образом. Например, если я имеем: h1 {font-size:3em;line-height:1;margin-bottom:0.5e ...

Как переместить круговой радиальный градиент немного вверх?

Как я могу переместить радиальный градиент немного больше вверх, сохраняя ту же круглую ширину и высоту? div { line-height: 100px; text-align: center; color: #333; width: 100%; background: radial-gradient(ellipse 115px 102px, #fff, #516e8e); } <div>text</div> Я нашел это решение, но затем градиент становится растянутым. background: radial-gradient(at top,red,yellow,green); Вот Codepen. ...

Как изменить цвет шрифта маркера Google maps clusterer

Кто-нибудь может сказать мне, как изменить цвет шрифта маркера markerclusterer. Это мой текущий код для стилизации маркера mcOptions = {styles: [{ height: 27, url: "image.png", width: 35 }], maxZoom: 8 } var markerCluster = new MarkerClusterer(map, markers, mcOptions); ...

Можно ли сделать волнистую линию?

Если бы я хотел сделать горизонтальную линию, я бы сделал это: <style> #line{ width:100px; height:1px; background-color:#000; } </style> <body> <div id="line"></div> Если бы я хотел сделать вертикальную линию, я бы сделал это: #line{ width:1px; height:100px; background-color:#000; } </style> <body> <div id="line"></div> Изогнутая линия сложнее, но возможна с использованием border-radius и обертыванием элемента: ...

weboptimization css bundle не найден (404)

Я сделал Asp.Net WebForms website на языке C# с использованием .net framework 4.6.1. Сайт работает отлично, но когда я пытаюсь оптимизировать загрузку CSS с помощью компонента weboptimization , я получаю 404 от запроса url css. Пожалуйста, обратите внимание, что у меня также есть пакет js, который отлично работает. В г.страница aspx у меня в голове: <webopt:BundleReference runat="server" Path="~/stylesheets" /> Связка.config находится в корне структуры сайта и его содержимое: <? ...

Отобразить диалоговое окно внутри родительского див с overflow:скрыты

Я пишу на angularJS и не могу найти удобного решения для этой проблемы- У меня есть элемент div со свойством overflow: hidden (так как я использую внутреннюю полосу прокрутки), а внутри этого элемента div у меня есть меню dropdown, вызываемое нажатием кнопки. к сожалению, dropdown частично скрыт (так как он выходит за границы своего div родителя. Лучшее решение, которое я нашел до сих пор, - это динамическое добавление всплывающего окна в тело и вычисление его положения для каждого нажатия кноп ...

Создать отраженное изображение с помощью HTML Canvas?

У меня есть следующий код, который пытается объединить вертикальное зеркальное изображение с прозрачным градиентом цвета фона. Если объединить эти два эффекта не удается, нужно ли накладывать градиент PNG на холст вместо того, чтобы пытаться заставить холст выполнять обе операции? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi ...

Хром полоса прокрутки исчезает (не переполнение-у)

Страница (live-версия) состоит (грубо говоря) из трех частей: левая боковая панель центрированное содержание правая боковая панель Правая боковая панель должна быть прокручиваемой, поэтому я установил overflow-y: scroll; right: -17px;, чтобы просто скрыть полосу прокрутки. Body, html Есть overflow-y: auto;. Таким образом, мне не нужно иметь две полосы прокрутки (для страницы и для правой боковой панели). Выпуск: (только в CHROME, протестировано на версиях 62 и 63) Почему-то на разны ...

Как избавиться от границы вокруг и изображения, используемого в качестве ссылки в Firefox?

Странный вопрос, я думаю, что это больше из-за того, что я не уверен, как это называется. Но у меня есть img, завернутый в ссылку Пример ...<li> <a href="#link"> <img ...> </a> </li> ..... Теперь у меня есть правила CSS границы все до 0. Так что у них нет голубой границы. Но в Firefox их, кажется, розовая мини-пунктирная граница только тогда, когда я нажимаю на изображение? В других браузерах нет границы в любое время. Я не уверен, если его из самого ...

Как я могу растянуть пустой плавающий div на всю высоту, доступную с помощью css?

У меня есть два плавающих дива рядом друг с другом, и я хочу, чтобы левый ДИВС растянулся до любого размера правого. Возможно ли это только с помощью css? <div class="page"> <div class="left-sidebar"> </div> <div class="right-content"> </div> </div> .left-sidebar { background: url('ImageUrl') no-repeat right top #F8F1DB; float: left; width: 203px; min-height: 500px; height : auto; } .right-content { background: #F8F1D ...

CSS переменные с резервным вариантом для старых браузеров

TL; DR: как можно использовать SCSS, чтобы иметь переменные CSS с резервным вариантом для старых браузеров. Я пытаюсь разобраться в этой статье . По моему мнению, вы уже должны быть продвинутым пользователем SASS, чтобы понять это, а я нет. Что еще хуже, это единственная статья, которую я нашел на эту тему. Вот чего я пытаюсь добиться: Мои scss должны быть примерно такими: body { @include v(background-color, primary) } Тогда обработанный CSS должен быть body{ background: yellow; ...