css3- все статьи тега ➜ страница 2
Как отобразить список в две строки?
У меня есть список элементов, которые я хочу разместить в пространстве, ограниченном по вертикали: <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 ...
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: размещение стрелки / треугольника с границей в верхней части моего выпадающего меню
Только что запустил этот сайт (http://dovidoved.org / ) и клиент хочет один из этих треугольников / стрелок в верхней части каждого выпадающего меню. Проблема в том, что меню имеет границу вокруг него, и стрелка должна зацепиться как с фоном, так и с границей. Не знаю, как это сделать. Есть предложения? Должен ли я использовать изображение? Вот мой CSS: /* creates triangle */ .main-navigation ul ul:before { border-bottom: 10px solid #fae0bb; border-left: 10px solid transparent; ...
Как переместить круговой радиальный градиент немного вверх?
Как я могу переместить радиальный градиент немного больше вверх, сохраняя ту же круглую ширину и высоту? 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. ...
CSS переменные с резервным вариантом для старых браузеров
TL; DR: как можно использовать SCSS, чтобы иметь переменные CSS с резервным вариантом для старых браузеров. Я пытаюсь разобраться в этой статье . По моему мнению, вы уже должны быть продвинутым пользователем SASS, чтобы понять это, а я нет. Что еще хуже, это единственная статья, которую я нашел на эту тему. Вот чего я пытаюсь добиться: Мои scss должны быть примерно такими: body { @include v(background-color, primary) } Тогда обработанный CSS должен быть body{ background: yellow; ...
CSS box-тень небольшой границы на мобильном телефоне
Я использую тень-прямоугольник, чтобы получить цвет на внешней стороне элемента. На моем рабочем столе это выглядит нормально, но на моем мобильном я вижу небольшую границу, вероятно, вызванную высоким PPI моих мобильных экранов. Смотрите скриншот ниже. Код .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .container.main { background-color: #fff; } .header-main{ height: 90px; box-shadow: 0px -15px 0px 15px #009fe ...
Есть ли способ использовать CSS, чтобы фоновое изображение действовало как "обложка", но на 120%?
Значение CSS background-size: cover растянет изображение, но сохранит его отношение ширины к высоте. Однако он будет растягивать его только до тех пор, пока наименьшая сторона не достигнет 100% той же стороны родительского узла. /* This is an image of 100px Wide x 50px Tall, so it'll stretch to 100% of the window height and then scale the width larger to retain its width-to-height ratio. */ body { background-image: url( "/images/test.png" ); background-size: cover; backgroun ...
в CSS не снимая на цвет текста установить прозрачный
Я пытаюсь после загрузки DOM изменить текст внутри h1, чтобы изменить его цвет на прозрачный, эффект размытия работает, но не цветовой эффект. Вот части моего кода: <script type="text/javascript"> $(document).ready(function() { $('#maintext h1').addClass('blur-text'); }); </script> #main h1 font-family: Neucha font-size: 14em color: $sbbqyellow margin-top: 35vh -webkit-transform: rotate(-10deg) skew(-10deg, 0) -moz-transform ...
Как разместить вывод из внешнего php файла в определенном месте страницы
Я посмотрел на другие сообщения здесь, касающиеся подобных вопросов, но не могу найти ответа. Edit я играл с этим и хочу несколько изменить свой вопрос. У меня возникла проблема с размещением вывода, который повторяется из внешнего файла php. Вот пример кода для демонстрации моей проблемы-это мой основной файл writephp.php: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test Php </title> <link rel="stylesheet" href=" ...
Вогнутый четырехугольник из прямоугольника
Используя только CSS, можно ли создать четырехугольник с внутренним углом больше 180 градусов, манипулируя одним прямоугольником? Я знаю, что произвольный выпуклый четырехугольник может быть создан из стандартного прямоугольника с помощью преобразований CSS3. Мне удалось создать вогнутые многоугольники, используя несколько прямоугольников несколькими различными способами (иногда с помощью скрытого переполнения); некоторая комбинация: соседние прямоугольники. Это проблема в том, что визуальн ...
Div дисплей: начальный не работает, как предполагалось в ie10 и chrome 29
Я хочу отобразить div со следующими ограничениями: автоматически скрывается под шириной 1024px можно переключать кнопкой под шириной 1024px, но если я нажму somwhere (не внутри div), класс activeDiv должен быть удален У меня есть фиктивный пример в codepen Таким образом, возникли следующие проблемы: в IE10 кнопка переключения просто не работает (не Скрыть / показать div) я проверяю с помощью инструментов разработчика, но никаких признаков display: initial в Chrome 29 div появляется ...
Как работают CSS треугольники?
есть много различных форм CSS в CSS трюки-формы CSS и я особенно озадачен треугольником: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> Как и почему это работает? ...
Есть ли способ изменить тип ввода=формат "дата"?
Я работаю с элементами HTML5 на моей веб-странице. По умолчанию ввод type="date" показывает дату как YYYY-MM-DD. вопрос, Можно ли изменить его формат на что-то вроде: DD-MM-YYYY? ...
Как правильно выровнять элемент flex?
есть ли более flexbox-ish способ выровнять "контакт" справа, чем использовать position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class= ...
Как применить фильтр размытия CSS 3 к фоновому изображению
у меня есть файл JPEG, который я использую в качестве фонового изображения для страницы поиска, и я использую CSS, чтобы установить его, потому что я работаю в костяк.js контекстах: background-image: url("whatever.jpg"); Я хочу применить фильтр размытия CSS 3 только в фоновом режиме, но я не уверен, как стиль только один элемент. Если я попытаюсь: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); под background-image в моем C ...
Таблица HTML с шириной 100%, с вертикальной прокруткой внутри tbody
как я могу установить для <table> 100% ширина и положить только внутри <tbody> вертикальная прокрутка для некоторой высоты? table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <t ...
С помощью CSS используйте " ... " для переполненного блока многострочных строк
С overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "..."будет показано в конце строки, если переполнен. Однако, это будет показано только в одной строке. Но я хотел бы, чтобы он был показан в нескольких строках. Это может выглядеть так: +--------------------+ |abcde feg hij dkjd| |dsji jdia js ajid s| |jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */ +--------------------+ ...
CSS3 прозрачность + градиент
RGBA очень весело, и так -webkit-gradient,-moz-gradient, и эээ... progid:DXImageTransform.Microsoft.gradient... угу. :) есть ли способ объединить два, RGBA и градиенты, так что есть Градиент Альфа-прозрачности с использованием текущих/последних спецификаций CSS. ...
Свойство border-radius CSS3 и border-collapse: collapse не смешиваются. Как я могу использовать border-radius для создания свернутой таблицы с закругленными углами?
Изменить - Оригинальное Название: есть ли альтернативный способ достижения border-collapse:collapse in CSS (чтобы иметь свернутый, закругленный угловой стол)? поскольку выясняется, что простое сворачивание границ таблицы не решает корневую проблему, я обновил заголовок, чтобы лучше отразить обсуждение. Я пытаюсь сделать стол с закругленными углами С помощью CSS3border-radius собственность. Стили таблицы я использование выглядит примерно так: table { -moz-border-radius:10px; -webkit-bo ...
Как я могу выбрать все дочерние элементы элемента, кроме последнего дочернего элемента?
Как бы я выбрал все, кроме последнего ребенка, используя селекторы CSS3? например, чтобы получить только последний ребенок будет div:nth-last-child(1). ...