css- все статьи тега ➜ страница 24
HTML + CSS: как заставить содержимое div оставаться в одной строке?
у меня есть длинный текст внутри div с определенными width: HTML: <div>Stack Overflow is the BEST !!!</div> CSS: div { border: 1px solid black; width: 70px; } как я могу заставить строку оставаться в одной строке (т. е. быть обрезанной в середине "переполнения") ? Я пытался использовать overflow: hidden, но это не помогло. ...
Как получить box-shadow только на левой и правой сторонах
любой способ получить box-shadow слева и справа (горизонтально?) стороны только без хаков или изображений. Я использую: box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8); но это дает тень все вокруг. У меня нет границ вокруг элементов. ...
Как перевернуть фоновое изображение с помощью CSS?
как перевернуть любое фоновое изображение с помощью CSS? Возможно ли это? currenty я использую это изображение стрелки в background-image на li в css On:visited мне нужно перевернуть эту стрелку по горизонтали. Я могу сделать это, чтобы сделать еще один образ стрелки но мне просто любопытно узнать, можно ли перевернуть изображение в CSS для :visited ...
Преобразование RGB в RGBA поверх белого
у меня есть шестнадцатеричный цвет, например #F4F8FB (или rgb(244, 248, 251)) что я хочу превращается в как-прозрачный-как-можно цвет rgba (при отображении поверх белого). Есть смысл? Я ищу алгоритм или, по крайней мере, идею алгоритма для того, как это сделать. Например: rgb( 128, 128, 255 ) --> rgba( 0, 0, 255, .5 ) rgb( 152, 177, 202 ) --> rgba( 50, 100, 150, .5 ) // can be better(lower alpha) идеи? FYI решение, основанное на ответе Гуффа: function RGBtoRGBA(r, g, b){ ...
Как центрировать текст по вертикали с помощью большого шрифта-удивительный значок?
Допустим, у меня есть кнопка bootstrap со значком Font-awesome и некоторым текстом: <div> <i class='icon icon-2x icon-camera'></i> hello world </div> Как сделать текст вертикально по центру? Теперь текст выравнивается по нижнему краю значка:http://jsfiddle.net/V7DLm/1/ EDIT: У меня есть возможность решение: http://jsfiddle.net/CLdeG/1/ но он чувствует себя немного хаки-вводит дополнительный тег p, использует pull-left и display: table. Может быть, кто-то может ...
Встроенный SVG в CSS
можно ли использовать встроенное определение SVG в CSS? Я имею в виду что-то вроде: .my-class { background-image: <svg>...</svg>; } ...
CSS div элемент-как показать только горизонтальные полосы прокрутки?
У меня есть контейнер div и определили свой стиль следующим образом: div#tbl-container { width: 600px; overflow: auto; scrollbar-base-color:#ffeaff } Это дает мне как горизонтальные, так и вертикальные полосы прокрутки автоматически, как только я заполняю свою таблицу, которая содержится в этом div. Я просто хочу, чтобы только горизонтальные полосы прокрутки появлялись автоматически. Я буду изменять высоту таблицы программно. Как мне это сделать? ...
Вы можете использовать CSS для зеркального отображения / переворачивания текста?
можно ли использовать CSS/CSS3 для зеркального отображения текста? в частности, у меня есть этот ножницы char"✂" (✂), что я хотел бы отобразить указывая влево, а не вправо. ...
В CSS какая разница между"."и" # " при объявлении набора стилей?
в чем разница между # и . при объявлении набор стилей для элемента и каковы семантики, которые вступают в игру при принятии решения, какой из них использовать? ...
Что означает косая черта в стенографии шрифта CSS?
Я вижу следующее объявление CSS в таблице стилей: font: 12px/18px ... Что значит 12px/18px часть означает? ...
HTML list-style-type dash
есть ли способ создать список-стиль в HTML с тире (т. е.-или -– или —), т. е. <ul> <li>abc</li> </ul> вывод: - abc мне пришло в голову сделать это с чем-то вроде li:before { content: "-" };, хотя я не знаю минусов этого варианта (и был бы очень обязан за обратную связь). более обобщенно, я бы не прочь знать, как использовать общие символы для элементов списка. ...
Как сделать мигающий/мигающий текст с помощью CSS 3?
В настоящее время у меня есть этот код: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } он мигает, но он мигает только в "одном направлении". Я имею в виду, он только исчезает, а затем появляется снова с opacity: 1.0, затем снова исчезает, появляется снова ...
курсор меняется на указательный палец
у меня есть это a и я не знаю, что мне нужно вставить в "onmouseover", так что курсор изменится на указатель пальца, как обычная ссылка: <a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a> Я где-то читал, что мне нужно поставить: onmouseover="cursor: hand (a pointing hand)" но это не работает для меня. плюс я не уверен, что это считается JavaScript, CSS или просто HTML. ...
Как настроить поля и отступы в процентах от высоты родительского контейнера?
Я ломал голову над созданием вертикального выравнивания в css, используя следующее .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } и использовал следующую структуру div. <div class="base"> <div class="vert-align"> Content Here </div> </div> хотя это, казалось, работало для этого случая, я был удивлен, что когда я увеличил или уменьшил ш ...
преобразование css, зубчатые края в chrome
Я использую CSS3 transform для поворота изображений и текстовых полей с границами на моем веб-сайте. проблема в том, что граница выглядит неровной в Chrome, как игра (с низким разрешением) без сглаживания. В IE, Opera и FF это выглядит намного лучше, потому что используется AA (который все еще хорошо виден, но не так уж плохо). Я не могу протестировать Safari, потому что у меня нет Mac. повернутая фотография и сам текст выглядят нормально, это только граница, которая выглядит зазубренный. CSS ...
Наложение полосы прокрутки в IE10, как это остановить?
в IE10, полоса прокрутки не всегда есть... и когда он появляется, он появляется как наложение... Это классная функция, но я хотел бы отключить ее для моего конкретного веб-сайта, поскольку это полноэкранное приложение, и мои логотипы и меню теряются за ним. IE10: CHROME: кто-нибудь знает способ всегда иметь полосу прокрутки фиксированной в положении on В IE10? overflow-y: прокрутка, похоже, не работает! он просто помещает его постоянно на мой сайт. это может быть bootstrap вызывает про ...
CSS как установить высоту div 100% минус nPx
У меня есть обертка div, которая содержит 2 дива рядом друг с другом. Над этим контейнером у меня есть div, который содержит мой заголовок. Обертка div должна быть 100% минус высота заголовка. Заголовок составляет около 60 пикселей. Это исправлено. Итак, мой вопрос: Как установить высоту моей оболочки div на 100% минус 60 px? <div id="header"></div> <div id="wrapper"> <div id="left"></div> <div id="right"></div> </div> ...
Как изменить изображение кнопки ввода с помощью CSS?
Итак, я могу создать кнопку ввода с изображением с помощью <INPUT type="image" src="/images/Btn.PNG" value=""> но, я не могу получить такое же поведение с помощью CSS. Например, я пробовал <INPUT type="image" class="myButton" value=""> где "myButton" определяется в файле CSS как .myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } если это все, что я хотел, я мог бы использовать оригинальный с ...
Как стилизовать dt и dd, чтобы они находились на одной линии?
используя CSS, как я могу стилизовать следующее: <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 AU) is the largest and densest of the inner planets, th ...
CSS-граница только внутри таблицы
Я пытаюсь выяснить, как добавить границу только внутри таблицы. Когда я это делаю: table { border: 0; } table td, table th { border: 1px solid black; } граница проходит вокруг всей таблицы, а также между ячейками таблицы. То, что я хочу достичь, - это иметь границу только внутри таблицы вокруг ячеек таблицы (без внешней границы вокруг таблицы). вот разметку я использую для таблиц (хотя я думаю, что это не важно): <table> <tr> <th>Heading 1</th> ...