css3- все статьи тега ➜ страница 5
Производительность CSS относительно translateZ(0)
ряд блогов выразили прирост производительности в "обмане" GPU, чтобы думать, что элемент является 3D с помощью transform: translateZ(0) для ускорения анимации и переходы. Мне было интересно, есть ли последствия для использования этого преобразования следующим образом: * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } ...
Произведите повторяя шестиугольную картину с CSS3
Итак, мне нужно сделать повторяющийся шестиугольный узор, используя CSS. Если нужны изображения, я могу пойти туда, но я бы предпочел просто использовать CSS, если это возможно. вот идея того, что я пытаюсь создать: в принципе, мне просто нужен способ создать шестиугольные фигуры, а затем наложить текст/изображения поверх них. У меня пока мало кода, потому что я не совсем уверен, с чего начать. Проблема в том, что я мог бы просто использовать <div>s в форме a шестиугольник, как показан ...
Черный прозрачный наложения на изображения при наведении курсора с помощью CSS?
Я пытаюсь добавить прозрачное черное наложение на изображение всякий раз, когда мышь нависает над изображением только с помощью CSS. Это возможно? Я попробовал это: http://jsfiddle.net/Zf5am/565/ но я не могу заставить div появиться. <div class="image"> <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> <div class="overlay" /> </div> .image { position: relative; border: 1px solid black; width: 200px; height: 200 ...
Любой способ объявить размер / частичную границу в поле?
любой способ объявить размер / частичную границу в поле в css3? Например, коробка с 350px, которая показывает только нижнюю границу в ее первых 60px. Я думаю, что это может быть очень полезно. примеры: ...
Применение многоточия к многострочному тексту
есть ли решение для добавления многоточия на последней строке внутри div с высотой жидкости (20%)? нашел -webkit-line-clamp функция в CSS, но в моем случае номер строки будет зависеть от размера окна. p { width:100%; height:20%; background:red; position:absolute; } <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus ...
Анимация CSS3: дисплей + непрозрачность
у меня проблема с анимацией CSS3. .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } этот код работает только в том случае, если я удалю изменение display. Я хочу изменить дисплей сразу после наведения, но непрозрачность должна быть изменена с помощью перехода. ...
Вращающийся глобус в CSS
Я создаю эффект вращающейся Земли в CSS. Я создал глобус в CSS: body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; ...
CSS: создание белого свечения вокруг изображения
Как я могу создать белое свечение в качестве границы изображения неизвестного размера? ...
box-shadow на IE9 не отображает с помощью правильного CSS, работает на Firefox, Chrome
Я пытаюсь имитировать плавающий модальный тип коробки, но у меня проблема с IE9 и его теневой реализацией коробки. вот краткое описание кода, который я использую, который может дублировать проблему: <html> <head> <title>Sample page</title> <style> .content-holder { border-collapse: collapse; } .back { background-color: #a8c0ff; padding: 100px; } .inner { background-col ...
:не (: пустой) селектор CSS не работает?
у меня чертовски много времени с этим конкретным селектором CSS, который не хочет работать, когда я добавляю :not(:empty) к нему. Кажется, он отлично работает с любой комбинацией других селекторов: input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } если я удалить :not(:empty) часть, он работает просто отлично. Даже если я изменю селектор на input:not(:empty) он по-прежнему не будет выбирать поля ввода, в которые введен текст. Это сломано или я просто не могу исполь ...
iPhone 6 и 6 Plus медиа-запросы
кто-нибудь знает конкретные размеры экрана для целевых медиа-запросов для iPhone 6 и 6 Plus? кроме того, размеры значков и заставки? ...
Как нарисовать сектор круга в CSS?
ну, рисовать круг с чистым CSS легко. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } как нарисовать сектор? Учитывая степень X [0-360] я хочу нарисовать сектор х градусов. Могу ли я сделать это с помощью чистого CSS? например: Спасибо + Пример спасибо, Джонатан, я использовал Первый способ. Если это кому-то помогает, вот пример функции JQuery, которая получает процент и рисует сектор. Сектор находится ...
контур только на одной границе
Как применять вставка границы в HTML-элемент, но только на одной стороне его. До сих пор я использовал изображение для этого (GIF/PNG), которое я затем использовал бы в качестве фона и растягивал его (repeat-x) и немного удалял от верхней части моего блока. Недавно я обнаружил контур CSS свойство, которое отлично! Но, кажется, обходит весь квартал... Возможно ли использовать это свойство структуры, чтобы сделать это только на одной границе? Кроме того, если нет, у вас есть какой-нибудь CSS трюк ...
Определенные края с размытием фильтра CSS3
Я размываю некоторые изображения с этим кодом img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } края изображения тоже размываются. Можно ли размыть изображение, сохраняя при этом определенные края? Как вставное пятно или что-то еще? ...
CSS: выбранный псевдокласс похож на: проверено, но для элементов
есть ли способ стилизовать выбранный в данный момент <option> элемент <select> элемент? я мог бы тогда дать цвет фона для выбранного в данный момент элемента опции? Таким образом, я могу стилизовать параметр, который в настоящее время отображается в закрытом раскрывающемся списке. ...
CSS фон-изображение-непрозрачность?
связано с тем, как я могу дать текст или изображение прозрачный фон с помощью CSS? но немного по-другому. Я хотел бы знать, можно ли изменить Альфа-значение фона изображения, а не просто цвет. Очевидно, что я могу просто Сохранить Изображение с разными значениями Альфа, но я хотел бы иметь возможность динамически настраивать Альфа. до сих пор лучшее, что у меня есть: <div style="position: relative;"> <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; ...
Сделать гибкие элементы принимают ширину содержимого, а не ширину родительского контейнера
у меня есть контейнер <div> С display: flex. У него есть ребенок <a>. как я могу заставить ребенка появляются "рядный"? в частности, как я могу сделать ширину ребенка, определяемую его содержимым, и не расширяться до ширины родителя? что я пробовал: Я поставил ребенка в display: inline-flex, но он все равно занял всю ширину. Я также попробовал все другие свойства отображения, но ничего не повлияло. пример: .container { background: red; height: 200px; flex-dire ...
CSS-перехода, когда класс удаляется
у меня есть форма, которая функционирует как параметры страницы. При изменении элементов формы они помечаются как unsaved и имеют другой цвет границы. Когда форма сохраняется, они помечаются как сохраненные, имея другой цвет границы. Я хочу, чтобы при сохранении формы граница постепенно исчезала. заказ пойдет: <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the border is green <input type='text' class='' /> ...
Как создать импульсный эффект с помощью-webkit-анимация-внешние кольца
Я нашел эту статью: http://www.zurb.com/article/221/css3-animation-will-rock-your-world на CSS3 анимации. Я пытаюсь создать аналогичный эффект, наблюдаемый на сайте выше, но на личном сайте по адресу: www.imfrom.me где у меня есть штат Мэн, есть красный наконечник коробки. Я хочу создать импульсное кольцо стрелкой, указывающей местоположение. ОБНОВЛЕНО С КОДОМ: I придумал это ниже (попробуйте здесь:http://jsfiddle.net/ftrJn/) Как вы можете сказать его близко, любые мысли о том, как я м ...
Проблема CSS в Twitter Typeahead с Bootstrap 3
С выпуском Bootstrap 3. Typeahead был удален в пользу этого:https://github.com/twitter/typeahead.js Ive успешно интегрировал его на удаленной выборке данных но у меня возникли проблемы с автозаполнением Как вы можете видеть, в текстовом поле появляются два текста. Я включил css (https://github.com/jharding/typeahead.js-bootstrap.css) как сказано в документации, но не повезло. любая помощь или предложения будут оценены. jsfiddle показывает проблему:http://jsfiddle.net/KrtB5/ HTML <b ...