css3- все статьи тега ➜ страница 4
Почему многоточие CSS не работает в ячейке таблицы?
рассмотрим следующий пример: (видео здесь) HTML: <table> <tbody> <tr><td>Hello Stack Overflow</td></tr> </tbody> </table> CSS: td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } JS: $(function() { console.log("width = " + $("td").width()); }); выход: width = 139, и многоточие не появляется. чего мне здесь не хватает? ...
CSS3 непрерывный поворот анимации (так же, как загрузка солнечных часов)
Я пытаюсь скопировать индикатор активности Apple style (значок загрузки солнечных часов) с помощью анимации PNG и CSS3. У меня есть изображение, вращающееся и делающее это непрерывно, но, похоже, есть задержка после того, как анимация закончилась, прежде чем она сделает следующий поворот. @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #loading img { -webkit-animation-name: rotate; -webkit-an ...
Заполнение css заполнителя HTML5
Я видел этот post уже и пробовал все, что мог, чтобы изменить отступы для меня прототип, но увы, похоже он просто не хочет сотрудничать. в любом случае, вот код для CSS. (EDIT: это сгенерированный css от sass) #search { margin-top: 1px; display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 220px; } #search form { position: relative; } #search input { padding: 0 10px 0 29px; color: #555555; border: none; background: url('/images/bg_searchbar.png?12 ...
CSS: анимация против перехода
Итак, я понимаю, как выполнять как переходы CSS3, так и анимации. Что не ясно,и я погуглил, когда это использовать. например, если я хочу, чтобы мяч отскочил, ясно, что анимация-это путь. Я мог бы предоставить ключевые кадры, и браузер будет делать промежуточные кадры, и у меня будет хорошая анимация. , есть случаи, когда указанный эффект может быть достигнут в любом случае. Простой и распространенный пример был бы реализуйте меню выдвижного ящика в стиле facebook: этот эффект может быть дос ...
Почему не может быть гибких контейнеров?
я пытался стиль a fieldset элемент display: flex и display: inline-flex. однако, это не работает: flex вели себя как block и inline-flex вели себя как inline-block. это происходит как на Firefox и Chrome, но странно это работает на IE. это баг? Я не мог найти это fieldset должно иметь какое-либо особое поведение, ни в HTML5, ни в CSS гибкий макет коробки характеристики. fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> < ...
CSS для захвата курсоров (drag & drop)
у меня есть JavaScript webapp, где пользователь должен захватить фон, чтобы переместить весь экран вокруг. Поэтому я хочу, чтобы курсор менялся, когда они зависают над фоном. Элемент -moz-grab и -moz-grabbing CSS курсоры идеально подходят для этого. Конечно, они работают только в Firefox... существуют ли эквивалентные курсоры для других браузеров? Должен ли я сделать что-то немного более обычное, чем стандартные CSS-курсоры? ...
Как использовать новый плагин affix в bootstrap 2.1.0 twitter?
загрузочная документация по этой теме немного сбивает меня с толку. Я хочу добиться аналогичного поведения, как в документах с affix navbar: navbar находится ниже заголовка абзаца / страницы, и при прокрутке вниз он должен сначала прокручиваться до достижения верхней части страницы, а затем придерживаться там фиксированной для дальнейшего прокрутки. поскольку jsFiddle не работает с концепцией navbar, я создал отдельную страницу для использования в качестве минимального примера: http://i08fs1.ir ...
Есть ли CSS не равно селектор?
есть что-то вроде != (не равно) в CSS? например, у меня есть следующий код: input { ... ... } но для некоторых входов мне нужно аннулировать эту. Я хотел бы сделать это, добавив класс "reset" к тегу ввода, например <input class="reset" ... /> а затем просто пропустите этот тег из CSS. как я могу это сделать? единственный способ, который я могу видеть, это добавить некоторый класс к тегу ввода и переписать CSS следующим образом: input.mod { ... ... } ...
CSS - как стилизовать выбранную метку переключателей?
Я хочу добавить стиль к выбранной метке переключателя: HTML: <div class="radio-toolbar"> <label><input type="radio" value="all" checked>All</label> <label><input type="radio" value="false">Open</label> <label><input type="radio" value="true">Archived</label> </div> CSS .radio-toolbar input[type="radio"] {display:none;} .radio-toolbar label { background:Red; border:1px solid green; padding:2px 10px; } .radio-to ...
CSS3 100vh не константа в мобильном браузере
у меня очень странный вопрос... в каждом браузере и мобильной версии я столкнулся с этим поведением: у всех браузеров есть верхнее меню при загрузке страницы (например, показ адресной строки), которое скользит вверх при запуске прокрутки страницы. 100vh рассчитываются только на видимой части видового экрана, поэтому, когда панель браузера скользит вверх 100vh увеличивается (в пересчете на пиксели) все макет перекрасить и заново настроить, так как размеры имеют изменилось плохой нервный эффект ...
Изменить цвет всплывающей подсказки bootstrap
то, что я пытаюсь сделать, это изменить цвет подсказки на красный. Однако я также хочу иметь несколько других цветов, поэтому я не просто хочу заменить цвет исходной подсказки. Как бы я это сделал? ...
Форматирование чисел (десятичные знаки, разделители тысяч и т. д.) С помощью CSS
можно ли форматировать числа с помощью CSS? То есть: десятичные знаки, десятичный разделитель, разделитель тысяч и т. д. ...
Как стиль только с CSS?
Примечание: этот вопрос не о создании пользовательского выпадающего списка. Речь идет только о возможностях укладки <option> элементы в элементе select в CSS как я могу стиль <option>С <select> элемент с кроссбраузерной совместимостью? Я знаю много способов JavaScript, которые настраивают выпадающий список для преобразования в <li>, о котором я не спрашиваю. <select class="select"> <option selected>Select</option> <option>Blue</option& ...
Выберите второй последний элемент с помощью css
Я уже знаю: последний ребенок. Но есть ли способ, чтобы выбрать элемент div: <div id="container"> <div>a</div> <div>b</div> <div>SELECT THIS</div> <!-- THIS --> <div>c</div> </div> Примечание: без jQuery, только с CSS ...
Текст в контейнере flex не переносится в IE11
рассмотрим следующий фрагмент: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> </div> в ...
Как я могу центрировать div в другом div? [дубликат]
этот вопрос уже есть ответ здесь: Как горизонтально центрировать a ? 90 ответов у меня проблема. У меня есть HTML код такой: <div id="main_content" > <div id="container"> </div> </div> css вот так: #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #conta ...
Центрирование разбиения на страницы в bootstrap
у меня есть этот код в разбивке на страницы <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> но мой ul выравнивается по левому краю. Есть ли способ центрировать ul wrt div? пробовал margin: auto auto и margin :0 auto но они не работают. ...
Как нормализовать функции перехода CSS3 между браузерами?
событие конца перехода Webkit называется webkitTransitionEnd, Firefox-transitionEnd, opera-oTransitionEnd. Каков хороший способ решения всех из них в чистом JS? Должен ли я делать браузер нюхать? или реализовать каждый из них отдельно? Каким-то другим способом, который мне не приходил в голову? ie: //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ ...
CSS3 Flexbox поддерживает соотношение сторон изображения
используя модель CSS flex box, как я могу заставить изображение поддерживать его соотношение сторон? JS Скрипка http://jsfiddle.net/xLc2Le0k/2/ обратите внимание, что изображения растягиваются или сжимаются, чтобы заполнить ширину контейнера. Это нормально, но можем ли мы также растянуть или сжать высота для сохранения пропорций изображения? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" ...
Понимание классов сетки (col-sm - # и col-lg -#) в Bootstrap 3
Я начинаю работу на Bootstrap 3, и у меня возникли некоторые проблемы с пониманием того, как классы сетки предназначены для использования. вот что я уяснил: похоже, что классы col-sm-# и col-lg-# отличаются от старых добрых col-# в том, что они будут применяться только тогда, когда экраны выше определенного размера (768px и 992px соответственно). Если вы опустите-sm - или-lg-divs никогда не свернется в один столбец. однако, когда я создаю два дива внутри строки, которые оба col-sm-6 кажется, ...