Вопросы с тегами [css3]

1

голосов
1

ответ
39

Просмотры

Косые только одну сторону до того и после того, как получить плоский стрелку

Я создал несколько фиктивных Иерархических-шагов. Первая крошка шагу нужно иметь нормальную плоскую границу влево, что делается. А при наведении курсора мыши, мне нужно, чтобы показать черную рамку для каждого элемента крошек. Но единственная проблема заключается в парении, для 1-го крошек шага, я не получаю, что плоскую границу слева, как и ожидалось. Вот что, как ожидается, при наведении курсора мыши: Вот мой код: тело {утеплитель: 0; Маржа: 0; } .breadcrumbs {фонового цвета: белый; ширина: 100%; обивка: 0 1rem; Размер шрифта: 0; Маржа: 1rem; } .Breadcrumbs .breadcrumb-шаг {дисплей: встроенный блок; ширина: 12,33%; высота: 5rem; текст-отделка: нет; черный цвет; } .Step-заголовок {дисплей: нет; } .Breadcrumb шаг: до {содержания: ''; Дисплей: блок; преобразование: перекос (30deg); границы: 1px твердые светло-серый; граница дно: нет; высота: 50%; ширина: 100%; } .Breadcrumb шаг: после того, как {содержания: ''; Дисплей: блок; преобразование: перекос (-30deg); границы: 1px твердые светло-серый; границы сверху: нет; высота: 50%; ширина: 100%; } .Breadcrumb шаг: парения: до {границы-цвета: черный; } .Breadcrumb шаг: парения: после того, как {границы-цвета: черный; } .Breadcrumb шаг: п-й ребенок (1): {Перед преобразованием: нет; границы права: нет; } .Breadcrumb шаг: п-й ребенок (1): после того, как {преобразования: нет; границы права: нет; } .Breadcrumb шаг: п-й ребенок (1): парения: перед тем {преобразования: перекос (30deg); границы справа: 1px черного цвета; } .Breadcrumb шаг: п-й ребенок (1): парения: после того, как {преобразования: перекос (-30deg); границы справа: 1px черного цвета; } / * .Breadcrumb-шаг: п-й ребенок (1) {границы: 1px твердого вещества светло-серого; } .Breadcrumb шаг: п-й ребенок (1): {Перед преобразованием: нет; границы: нет; } .Breadcrumb шаг: п-й ребенок (1): после того, как {преобразования: нет; границы: нет; } * / Главная О нас Контакты
Sunny
1

голосов
2

ответ
33

Просмотры

Есть ли способ, чтобы объединить входные и его заполнители классов в CSS?

У меня есть простой входной элемент, как следующее: Я стилизованный элемент и его замещающий текст следующим образом: входной {высота: 40px; ширина: 600px; } Вход :: заполнитель {обивка: 10px; высота строки: 1.5em; цвет: # 959595; Размер шрифта: 14px; } Можно ли объединить эти два в один блок в CSS? Это возможно? Спасибо
Tums
1

голосов
3

ответ
38

Просмотры

Как исправить мои пункты сетки от исчезновения, когда данный атрибут стиля «область Сетки»

Я настраиваю страницу, содержащую сведения о служащих компании. моя проблема заключается в том, что я пытался дать моим деталям сетки «площадь сетки» атрибут стиля, так что я могу использовать «имя сетки» при определении своих областей шаблона сетки для моего контейнера. но вдруг мои вещи исчезают. Пожалуйста, что мне нужно сделать, чтобы исправить эту проблему? .container {границы справа: 2px твердый серый; границы слева: 2px твердый серый; Дисплей: сетка; Сетка-шаблон-столбцы: 1fr 1fr 1fr; сетки разрыв: 10px; обосновывать-элементы: центр; Запас-топ: 100px; Сетка-шаблон-областей { «голова голова голова» «сторона». «Нога нога нога»; }} .Grid-1 {дисплей: сетки; Сетка-зона: голова; } .Grid-2 {дисплей: сетки; Сетка-зона: со стороны; }. Сетка-3 {дисплей: сетки; Сетка-зона: нога; } Я ожидать, что выход моей сетки по-прежнему показывают, независимо от «сетки области» атрибут стиля используется, но он исчезает.
Japhheth
1

голосов
3

ответ
42

Просмотры

How to start a new line with a particular item with Flexbox?

This is a very simple exercise but I can't seem to find a neat way to solve it (just started learning about HTML and CSS). I need the 5th block ("bloque 5") in red to be under the other four using Flexbox. The result should be: Could somebody help me with this, please? This is what I have so far: div { margin: 5px; border: 1px solid pink; padding: 5px; font-family: arial, sans-serif; font-size: 14px; } .contenidor { width: 760px; display: flex; } div[class*=element] { width: 100%; padding: 2px 30px 5px 2px; } .element5 { background-color: red; } bloque 1 bloque 2 bloque 3 bloque 4 bloque 5
Carolina Zhou Lin
1

голосов
1

ответ
43

Просмотры

Is it possible to apply a different horizontal color gradients to each line of text using CSS

Есть несколько примеров использования горизонтального цветовой градиента к телу текста. Тем не менее, метод, используемый в каждом из этих примеров, чтобы сделать фон иметь градиент, а затем сделать текст ясным, и тогда текст будет иметь градиент. Примеры включают Можно установить горизонтальный градиент к тексту с помощью CSS? (Левая буква один цвет, справа - другой цвет) Градиент цвет текста CSS текст градиент Это не будет работать для своей цели. Я ищу, чтобы он таким образом, что там будет другой градиент для каждой строки текста. Например, строка 1 будет иметь градиент от красного до черного. Линия два будет иметь градиент от черного до синего. Линия 3 будет иметь градиент от синего до красного. Вот пример того, что я ищу: Я знаю, что радиальный градиент может быть применен также,
Patrick J Fitzgerald
1

голосов
0

ответ
54

Просмотры

Применение двух отдельных чистых CSS3 анимации на кнопку элемента

Мне нужно запустить две CSS3 анимации на кнопки элемента (в идеале в чистом CSS, полу идеально в кросс-браузер, ваниль JS) для веб-мобильное приложение шахты. Первая выпуклость-что-либо в анимации; это играть при загрузке кнопки элемента. Второй вращающийся анимации применяется на кнопку элемента; это играть, когда кнопка прослушиваются. Знайте, что нажатие кнопки приводит к странице, чтобы обновить. Таким образом, идея заключается в том, что пользователь увидит кнопку спины после нажатия его, а затем его выпуклость-вне-и-в (ровно один раз) после обновления страницы. Однако поведение непредсказуемо. Ergo, я вижу в несколько раз выпуклость анимации огонь (последовательно). Если я утрирую эту выпуклость-аут, это, кажется, только играть один раз, но есть са видна дрожь в кнопке, прежде чем он играет (почти как если анимация стрельбы и отбрасывание на полпути несколько раз). Я не могу сказать, почему это происходит. Можете ли вы помочь мне выполнить этот cleaninly без махинаций? button.refresh: фокус {-webkit-анимация: вращение 0.5с 20 линейный; } @ -Webkit-ключевые кадры поворота {от {-webkit-преобразования: поворот (0deg); } До {-webkit-преобразование: Поворот (359deg); }} @Keyframes выпуклость {0% {преобразования: шкала (1); } 20% {преобразования: масштаб (1.1); } {100% преобразования: шкала (1); }} .Load {-webkit-анимации: выпирать 0.5с 1; } Пс игнорировать {{}} введите синтаксис - это Джанго рамки вещь. фокус {-webkit-анимация: вращение 0.5с 20 линейный; } @ -Webkit-ключевые кадры поворота {от {-webkit-преобразования: поворот (0deg); } До {-webkit-преобразование: Поворот (359deg); }} @Keyframes выпуклость {0% {преобразования: шкала (1); } 20% {преобразования: масштаб (1.1); } {100% преобразования: шкала (1); }} .Load {-webkit-анимации: выпирать 0.5с 1; } Пс игнорировать {{}} введите синтаксис - это Джанго рамки вещь. фокус {-webkit-анимация: вращение 0.5с 20 линейный; } @ -Webkit-ключевые кадры поворота {от {-webkit-преобразования: поворот (0deg); } До {-webkit-преобразование: Поворот (359deg); }} @Keyframes выпуклость {0% {преобразования: шкала (1); } 20% {преобразования: масштаб (1.1); } {100% преобразования: шкала (1); }} .Load {-webkit-анимации: выпирать 0.5с 1; } Пс игнорировать {{}} введите синтаксис - это Джанго рамки вещь.
Hassan Baig
1

голосов
0

ответ
90

Просмотры

колонка подсчета и Угловая Материал: кнопка не кликабельна в Chrome

Я использую Угловое v5.1.3 + Угловая Материал v5.0.3 для веб-сайта. У меня есть проблема с кнопкой, не будучи интерактивной в Chrome (v63.0.3239.84), в то время как он отлично работает в Firefox (v57.0.3). Вот демо. Кнопки Test 1 и Test 2 должны быть интерактивными. Как я вижу это выглядит следующим образом: при использовании вложенных столбцов, кнопки остаются интерактивными в Chrome, если и только если в первом столбце. если часть контейнера кнопки находится в первом столбце, то кнопки работают нормально (раскомментировать первый DIV в демо), хотя отображаются странным образом. если кнопка находится в невложенном столбце, то он работает отлично (раскомментируйте кнопку Test 7 в демке). если удалить CSS атрибут преобразования из кнопок, то все они работают хорошо, даже если она изменяет дисплей (раскомментировать последний CSS свойство приложения»
Moi
1

голосов
0

ответ
1k

Просмотры

CSS сетка питания таблица с прокруткой TBODY и авто-шириной на столбах

Я читал другие сообщения на SO о материи, но, прежде чем все начинают кричать на меня просто использовать таблицы для табличных данных! позвольте мне сказать, что это попытка решить конкретные проблемы: наличие прокручивать TBODY: обязательные для больших объемов данных и виртуальной прокрутки иметь в потоке, а колонны и TBODY колонна автонастройки с лучшей подгонкой на основе содержимом ячейки (не все одинаково широко и без ручного указания ширины по каждому из них): которые теперь свободно когда вы объявляете дисплей: блокировать TBODY Я пытался использовать дисплей: содержимое или дисплей: Подсеточный (FF и хром с экспериментальными флажками включены) для этого. Это то, что я пытаюсь достичь даже возможно? В своей попытке я отправляю здесь: я теряю шанс, чтобы установить высоту на моем TBODY из-дисплея:
Damiano Barbati
1

голосов
1

ответ
67

Просмотры

Creating responsive flexbox layout containing images in a certain pattern

Я пытаюсь создать адаптивный макет, содержащие изображения, используя Flexbox. Я достиг шаблон, который я хочу, но он не отвечает. Ниже картина: https://jsfiddle.net/wcep5tuk/16/embedded/result/ Даже если картина выглядит хорошо, при изменении размеров окна, все падает apart.Here в моем CSS: .my-контейнер {маржа: 0 авто ; высота: авто; макс-ширина: 70%; Дисплей: сгибать; } .Left-флекс-контейнер {ширина: 59,4%; высота: авто; Дисплей: сгибать; сгибать-обертку: плед; } .Right-флекс-контейнер {ширина: 35%; высота: авто; } Div.left-флекс-контейнер> IMG, div.right-флекс-контейнер> IMG {макс-ширина: 100%; высота: авто; границы: 1px твердый # 000; } И мой HTML https://jsfiddle.net/wcep5tuk/16/ Любая помощь будет оценена.
John Smith
1

голосов
0

ответ
18

Просмотры

Writer вертикально и разрыв Sentance после некоторой определенной высоты

введите описание изображения здесь ssdasdad sdadasd ssdasdad sdadasdssdasdad sdadasdssdasdad sdadasdssdasdad sdadasdssdasdad sdadasd X CSS .relative {позиция: относительная; } {Оболочка тд-преобразование координат: 0 50%; преобразования: поворот (-90deg); бело-пространство: Nowrap; Дисплей: блок; позиция: абсолютная; слева: 50%; внизу: -400px; } Это наш HTML strucuture и CSS. что делать, что тд в 2 линии. Для более подробной информации посетите: https://jsfiddle.net/nilang_nil/r4cq9u64/
Nilang
1

голосов
0

ответ
96

Просмотры

Мерцание при удалении размытости класса CSS с JQuery

У меня есть проблема, мой IMG элемент размыт с CSS3, после обновления сайта я хотел бы изображение, чтобы удалить класс размытия из него с JQuery. Все прекрасно работает, однако, есть странное мерцание при удалении класса размытия. Проблема видима на Chrome. Я уже пробовал: -webkit-преобразование: translate3D (0, 0, 0); и -webkit-противоположная сторона-видимость: скрытая Вот скрипка
Peter
1

голосов
0

ответ
48

Просмотры

Позиционирование анимированного текста в CSS3

мой первый вопрос здесь. В первую очередь английский не является моим родным языком, поэтому будьте терпеливы, если я сделаю какую-то ошибку. Я нашел анимацию текста, который мне нравится, и я хотел бы добавить его на мой сайт, вот оригинальная версия: http://codepen.io/bennettfeely/pen/lgybC @import «компас / CSS3»; @import URL (https://fonts.googleapis.com/css?family=Finger+Paint); тело {фон: черный; переполнение: скрытый; Шрифт: 5vw / 100vh "Finger Paint"; выравнивания текста: центр; Цвет: прозрачный; противоположная сторона-видимость: скрытый; } {Оболочка дисплей: встроенный блок; Текст-тень: 0 0 0 WhiteSmoke; анимация: дымчатый 5s 3s обоих; } Продолжительность: п-й ребенок (даже) {имя-анимации: дымчато-зеркало; } @Keyframes дымный {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (15rem, -8rem, 0) вращаются (-40deg) skewX (70deg) шкала (1.5); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} @Keyframes дымчато-зеркалу {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (18rem, -8rem, 0) вращаются (-40deg) skewX (-70deg) шкала (2); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} $ @For пункт от 1 до 21 {пролета: п-о-типа (# {$ пункт}) {анимации задержка: # {(3 + ($ Пункта / 10))} s; }} CSS Smoky Text Effect Теперь, я хотел бы, что после первого слова / фразы исчезает еще один появляется вскоре после того, как в том же месте, используя эффект обратимой (от дымного облака появляются текст). Я попытался изменить CSS для того чтобы достигнуть того, что я описал выше, но без успеха. Вот мой отредактированный вариант: @import URL (http://fonts.googleapis.com/css?family=Finger+Paint); тело {фон: черный; переполнение: скрытый; Шрифт: 5vw / 100vh "Finger Paint"; выравнивания текста: центр; Цвет: прозрачный ;; противоположная сторона-видимость: скрытый; } {Оболочка .a дисплей: встроенный блок; Текст-тень: 0 0 0 WhiteSmoke; анимация: дымчатый 5s 3s обоих; } .A охватывают: (даже) {анимации имя-п-й ребенок: дымчато-зеркало; } @Keyframes дымный {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (15rem, -8rem, 0) вращения (-40deg) skewX (70deg) масштаб (1.5); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} @Keyframes дымчато-зеркалу {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (18rem, -8rem, 0) вращаются (-40deg) skewX (-70deg) шкала (2); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} .A период: п-го из-типа (1) {анимации задержки: 3.1s; } .A период: п-оф-типа (2) {анимации задержки: 3.2s; } .A охватывают: п-й-о-типа (3) {анимационной задержки: 3.3s; } .A охватывают: п-й-о-типа (4) {анимационной задержки: 3.4s; } .A охватывают: п-й-о-типа (5) {анимационной задержки: 3.5с; } .A охватывают: п-й-о-типа (6) {анимационной задержки: 3.6s; } .B Span {дисплей: встроенный блок; Текст-тень: 0 0 0 WhiteSmoke; анимация: дымчатый 5s 3s и наоборот; } .B период: п-й ребенок (даже) {имя-анимации: дымчато-зеркало; } @Keyframes дымный {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (15rem, -8rem, 0) вращения (-40deg) skewX (70deg) масштаб (1.5); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} @Keyframes дымчато-зеркалу {60% {текст-тень: 0 0 40px WhiteSmoke; } До {преобразования: translate3d (18rem, -8rem, 0) вращаются (-40deg) skewX (-70deg) шкала (2); Текст-тень: 0 0 20px WhiteSmoke; Непрозрачность: 0; }} .B SPAN: п-го из-типа (1) {анимации задержки: 3.1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! 0; }} .B SPAN: п-го из-типа (1) {анимации задержки: 3.1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! 0; }} .B SPAN: п-го из-типа (1) {анимации задержки: 3.1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! п-оф-типа (1) {анимации задержки: 3.1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! п-оф-типа (1) {анимации задержки: 3.1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! 1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! 1s; } .B период: п-го из-типа (2) {анимации задержки: 3.2s; } .B период: п-го из-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! п-оф-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! п-оф-типа (3) {анимации задержки: 3.3s; } .B период: п-го из-типа (4) {анимации задержки: 3.4s; } .B период: п-го из-типа (5) {анимации задержки: 3.5с; } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! } .B период: п-го из-типа (6) {анимации задержки: 3.6s; } Smoky Текст Романья Как вы можете видеть, что что-то не так в моем редактируемого CSS, на самом деле, если отключить «переполнения: скрытый;» в элементе тела, вы увидите, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! увидит, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо! увидит, что второе слово появляется в нижней части окна браузера, а не в том же месте первого слова. Имейте в виду, я хочу, чтобы добавить анимированный текст в заголовке моего сайта, так что я искал простой способ легко расположить слова. Есть ли кто-то хочет помочь мне? Заранее спасибо!
John Shot
1

голосов
0

ответ
41

Просмотры

Что особенное ширинов приграничного 0.015625px?

Я был дурачиться с CSS и нашел кое-что любопытное. Я хотел бы предварить с этим я знаю, что все это не документировано, а это означает неопределенное поведение, но я все равно хочу понять немного лучше, как это работает. У меня есть правило CSS, как это: .foo {границы: твердый черный; границы-ширина: 1; } Я заметил, что, когда я установил ширину границы с очень низким числом, он получает «округлый» до 0 (например, нет никакой границы визуализации). Затем я попытался найти где порог для ширины границы, чтобы оказать на Google Chrome. Я узнал (с помощью ручного бинарного поиска), что порог 0,015625, или 1/64. Например. .foo {граница: твердый черный; границы ширина: 0.015625; } Делает границу, но .foo {границы: твердый черный; границы ширина: 0.015624; } Не, как показано на фрагменте (вероятно, будет работать только на Chrome). .thin,. толщиной {границы: твердый черный; } {.Thin границы ширина: 0.015624px} {.thick границы ширина: ширина 0.015625px} Border ширина 0,015625 Border 0.015624 Что происходит под капотом здесь? Почему 2 ^ -6? Но это не останавливаться на достигнутом. Я пытался найти порог с более высокой точностью. Я получил номер 0.015624999534338711824899004199096 ... и отказался после того, как при условии, что он не сходится к рациональному числу. Можно ли иметь смысл этого числа? Почему не так просто укоротить в какой-то момент? Как вычислительную точность работы здесь? В других браузерах, конечно, порог разный. Firefox имеет порог, близкий к 1/120, а после получения более точной, она становится диким (как и ожидалось) с 0.00833333330228929 ... 015625 Пограничная ширина 0,015624 Что происходит под капотом здесь? Почему 2 ^ -6? Но это не останавливаться на достигнутом. Я пытался найти порог с более высокой точностью. Я получил номер 0.015624999534338711824899004199096 ... и отказался после того, как при условии, что он не сходится к рациональному числу. Можно ли иметь смысл этого числа? Почему не так просто укоротить в какой-то момент? Как вычислительную точность работы здесь? В других браузерах, конечно, порог разный. Firefox имеет порог, близкий к 1/120, а после получения более точной, она становится диким (как и ожидалось) с 0.00833333330228929 ... 015625 Пограничная ширина 0,015624 Что происходит под капотом здесь? Почему 2 ^ -6? Но это не останавливаться на достигнутом. Я пытался найти порог с более высокой точностью. Я получил номер 0.015624999534338711824899004199096 ... и отказался после того, как при условии, что он не сходится к рациональному числу. Можно ли иметь смысл этого числа? Почему не так просто укоротить в какой-то момент? Как вычислительную точность работы здесь? В других браузерах, конечно, порог разный. Firefox имеет порог, близкий к 1/120, а после получения более точной, она становится диким (как и ожидалось) с 0.00833333330228929 ... и сдался после того, как при условии, что он не сходится к рациональному числу. Можно ли иметь смысл этого числа? Почему не так просто укоротить в какой-то момент? Как вычислительную точность работы здесь? В других браузерах, конечно, порог разный. Firefox имеет порог, близкий к 1/120, а после получения более точной, она становится диким (как и ожидалось) с 0.00833333330228929 ... и сдался после того, как при условии, что он не сходится к рациональному числу. Можно ли иметь смысл этого числа? Почему не так просто укоротить в какой-то момент? Как вычислительную точность работы здесь? В других браузерах, конечно, порог разный. Firefox имеет порог, близкий к 1/120, а после получения более точной, она становится диким (как и ожидалось) с 0.00833333330228929 ...
BoltKey
1

голосов
1

ответ
29

Просмотры

установка карты на сайте

У меня есть имидж страны, для моего сайта. Есть ли способ, я могу добавить точки в различные области на карте, связывающей его с изображением местоположения с пунктом объясняющего о месте? Например нажмите на Бангкок на карте, которая приведет вас к изображению и пункт с кратким описанием города. Каждый раз, когда я ищу онлайн для ответа единственное, что продолжает придумывать в Google карты. Что не хочу я хочу! заранее спасибо
Simon Tough
1

голосов
1

ответ
36

Просмотры

Прокрутка производительности

У меня есть пример, который содержит некоторые элементы. Когда я прокручивать так быстро элементы не отображаются и медленно загружаются. Является ли это ошибка или любая другая проблема? Мой HTML структура: Это заголовок сайта Hello World я создал пример. Вот ссылка. Вы должны проверить его с помощью мобильного устройства.
Kh Shuren-Erdene
1

голосов
1

ответ
21

Просмотры

Проблемы Центрирование элементов и создание коробки

Я строю немного играть HTML страницу как я учу себя, как код. Я наблюдал несколько пошагового руководство видео и хочу, чтобы включить то, что я узнал без просмотра видео, так что он прилипает лучше. Вот образ того, что я имею дело с. Я хочу, чтобы эти три раздела, «Learn HTML», «Учись CSS3» и «Learn Javascript», чтобы быть в центре страницы. Я создал тег центрировать все на странице под витриной и 3 отдельно для каждой коробки. Моя проблема заключается в два раза, не только пограничные коробки не центрирования на странице, но коробки даже не появляются. Вот код ... тело {фонового цвета: # FFFAF0; черный цвет; семейство шрифтов: Garamond; начертание шрифта: нормальный; Маржа: 0; высота строки: 1.6em; обивка: 0; } .Container {ширина: 80%; Маржа: авто; переполнение: скрытый; } #Topheader {фонового цвета: # 228B22; белый цвет; Маржа: авто; обивка: 15px; выравнивания текста: центр; } {#Navbar цвет фона: черный; белый цвет; } {#Navbar уль обивка: 0; список-стиль: нет; } {#Navbar литий дисплей: встроенный; Маржа: авто; обивка-направо: 50px; выравнивания текста: центр; } #Navbar в {цвет: белый; текст-отделка: нет; } {#Showcase фоновое изображение: URL ( '../ кодирование / codage.png'); фон положение: в центре справа; мин-высота: 300px; край дно: 30px; выравнивания текста: центр; белый цвет; } #Main {ширина: 33,3% обивка: 10px; Маржа: авто; } {.Top с плавающей точкой: слева; границы: 3px черный; коробчатого проклейки: граница-бокс; выравнивания текста: центр; } Как создать сайт самостоятельно Изучение HTML5 и CSS3 Home Learning HTML5 CSS3 обучения О нас Как научиться создавать веб-сайт с нуля! Код Будущее! Подробнее HTML5 Шаг 1 - Смотреть Учебники Шаг 2 - Take Notes Шаг 3 - Повторяйте, пока он не тонет в ЖЖ CSS3 Шаг 1 - Часы Учебники Шаг 2 - Возьмите Примечания Шаг 3 - Повторите, пока он не тонет в ЖЖ Javascript Шаг 1 - Часы Учебники Шаг 2 - Делайте заметки Шаг 3 - Повторяйте, пока он не тонет в
Brian M.
1

голосов
1

ответ
69

Просмотры

Как вертикально центрирования DIV относительно оставшейся высоты

Я сделал веб-страницу с «липкой» сноской (нижний колонтитул в нижней части содержания, если содержание велико, или в нижней части окна просмотра, если содержание мала), с помощью Flexbox. Я сейчас пытаюсь сделать так, содержание будет в центре оставшейся высоты (Vh - высота навигационной панели - высота колонтитула), если содержание достаточно мало. Ниже приводится изображение demostrate, что я только что сказал. Вот мой код. Добавить описание тест v1.0.0 Copyright © 2018 Some текст здесь # Div-1 {цвет фона: # 00ff00; } .Full высота {высота: 100vh; } .Footer {маржа: авто авто 0 авто; ширина: 100%; обивка-топ: 1.2rem; обивка-дно: 1.2rem; цвет фона: # ff0000; } Высота содержание не изменится, я просто пытаюсь поддерживать несколько размеров экрана. Я столкнулся с 2 проблемы с использованием этого подхода. Во-первых, он не работает на ландшафтном режиме на мобильных (эмулировать с помощью инструментов хром Дев). Во-вторых, Navbar уменьшается в высоту. jsfiddle доступна здесь. Вы можете также сравнить его с оригинальной версией. Добавление / встроенный / результат / к концу URL откроет результат в полноэкранном режиме. Спасибо за помощь!
Jeremy
1

голосов
3

ответ
114

Просмотры

Как установить право собственности loadgo.js налево?

Могу ли я знать, что, как я могу установить право собственности .loadgo-наложению влево? Я следовал всем инструкциям по реализации loadgo анимации. Тем не менее, анимация появилась на правой стороне, а не появляется вместе с изображением, которое с левой стороны. Я даже пытался изменить значения слева: 0px; права: нет; в loadgo.js файла, когда код пытается создать, хотя стиль loadgo-наложению добавил левую собственность, но право собственности еще стать на 0px даже то я изменил нет. Мой ожидаемый результат будет анимация появляться вместе с изображением на левой стороне. частичный loadgo.js: вар overlayTemplate = ''; вар overlayWithOptions = overlayTemplate .Надеть ( '% BGCOLOR%', pluginOptions.bgcolor) .Надеть ( '% непрозрачности%', pluginOptions.opacity) .Надеть (» Ширина%%», _W) .Надеть ( 'Высота%%', _h); $ Оверлей = $ (overlayWithOptions); Вот, моя скрипка, чтобы проверить код. https://jsfiddle.net/4vfxfjxr/5/ Ожидаемый результат
Drew
1

голосов
0

ответ
187

Просмотры

CSS, повторив-линейный градиент разрушал при Safari 11?

Я просто повышен OSX в High Sierra и Safari в 11.01, и мой повторив линейный градиент все в порядке. Это известная проблема с последней версией Safari? фон: повторение-линейный градиент (-64deg, прозрачный, прозрачный 5px, RGBA (191, 159, 209, 0,8) 1px, RGBA (191, 159, 209, 0,8) 6px); Изображение показывает сравнение с Chrome, который до сих пор ведет себя, как и ожидалось (codepen здесь).
Andy Westmoreland
1

голосов
4

ответ
47

Просмотры

CSS - установить различные стили других узлов, где применяется класс

Я пытался установить различные стили к одному классу (если он появляется во второй раз в разметке), используя Последующий-родственный комбинатор «~», но кажется, что это не работает, может быть, я опускаю деталь с использованием «~», также ... к сожалению, я не могу изменить HTML, поскольку он порождается СМ Red 3 Blue 4, и это CSS .root> .container> .mosaic.big {цвета: красный}. корень> .container> .mosaic.big ~ .root> .container> .mosaic.big {цвет: синий} также ... вот jsfiddle https://jsfiddle.net/chinoche/wd1rhg11/ Спасибо заранее
chinoche
1

голосов
2

ответ
34

Просмотры

Ширина изображения решений сети для мобильного и настольного зрения

HELP.ive искал много о том, как кодировать изображения, где он может перекрывать поля на странице в сети solutions.im не так хорошо, но пока поверьте мне я ночевал уже методом проб и ошибок, и им не так хорошо еще, особенно в css.and им не с помощью мобильного зрения на сайте им делать, но это возможно, что, если есть код ширины изображения, как он будет расширить с обоих концов экрана, но он будет автоматически изменять размер, чтобы поместиться в мобильный режим просмотра мольбы sombedy помочь это мой последний кодирования, который в штрафной work.Please помочь мне мой попытался код: # отзывчивым-образ {ширина: 100%; высота: авто; } КАРТИНА Я хочу БЫВАЕТ:
marv
1

голосов
1

ответ
23

Просмотры

CSS только поисковый вызов с переходом / трансформациями

Есть ли способ, чтобы реализовать что-то подобное только это с помощью CSS (для обработчиков кнопки щелчка, кроме)? Рассмотрим панель подкачки: >> При нажатии на правую кнопку>, я хочу, чтобы слайд Записи с 1 по 5 влево «за» кнопки >>). Полученный результат должен быть >> То же самое должно работать в другом направлении.
Alexander Zeitler
1

голосов
0

ответ
31

Просмотры

With flexbox aligned center, why aren't children also aligned vertically centered? [duplicate]

This question already has an answer here: Proper use of flex properties when nesting flex containers 1 answer How to vertically align text inside a flexbox? 6 answers See the following: .header { background-color: black; height: 100px; min-height: 100px; display: flex; box-sizing: border-box; align-items: center; } .itemLeft { background-color: yellow; box-sizing: border-box; width: 50%; padding-left: 20px; padding-right: 20px; padding-top: 18px; padding-bottom: 18px; } .logo { font-size: 32px; background: green; } small { background: Red; } .itemRight { background-color: darkgoldenrod; box-sizing: border-box; width: 50%; padding-left: 20px; padding-right: 20px; padding-top: 18px; padding-bottom: 18px; } Logo tag Menu See the code snippet, why isn't tag also being vertically aligned to the vertical center of the div? My goal is for Logo and Tag to both be vertically aligned in the center of the yellow div. Thanks for any tips.
AnnaSm
1

голосов
1

ответ
282

Просмотры

Изменение CSS ходовой элемент счетчика стиля после нескольких страниц

Я генерация PDF документа с помощью FlyingSaucer с номерами страниц в заголовке работает. То, что я пытаюсь добиться, чтобы иметь возможность изменить стиль счетчика, приложенный к работающему элементу, используемый для заголовка. Так как CSS применяется FlyingSaucer я не могу использовать JavaScript. Пример HTML: CSS: # правой кнопкой заголовок {дисплей: блок; выравнивания текста: справа; Положение: бег (справа-заголовка); } # Правой кнопкой заголовок: после того, как {содержания: счетчик (страницы, нижняя-римской)} @page: правая {@ верхнем правом углу {содержание: элемент (справа-заголовка); }} Этот кусок CSS правильно применяет заголовки ко всему документу после того, как помещен. Я пытаюсь начать свой документ выше страница стайлинга (нижний римский) и после того, как определенное место в моем документе - давайте s сказать, что я хотел бы либо содержание изменения правого заголовка или заменить @page содержимого с различным беговым элементом для остальной части документа с моделированием, установленным для десятичных чисел. Я знаю, что FlyingSaucer имеет ограниченную поддержку CSS3, но я не могу найти какое-либо решение (не ограничено только FlyingSaucer) для такой задачи. Содержание под управлением заголовком может быть изменено без влияния на предыдущих заголовках, как FlyingSaucer позволяет сбросить счетчик в любой точке документа, используя правило CSS. -fs-страница последовательности: старт; и изменения видны только после этого момента. Так что мой текущий статус, что у меня есть страницы, пронумерованные с более низким романским I-IV (для заголовка страницы, TOC и т.д.), а затем сбрасывается обратно в I и приращение до конца документа. Все, что мне нужно сделать, это изменить # правый заголовок: после того, как {содержания: счетчик (страницы, ниже-романском)} для .right-заголовок: после того, как {содержания: счетчик (страница)} или переключатель отображается элемент работает на новый. Другим решением я попытался который добавляет еще одну возможность, чтобы решить эту проблему: #forcontent {дисплей: нет} #Before: после того, как {содержания: счетчик (страницы, нижняя-римской)} #forcontent: после {Содержание: счетчик (страницы)} с это код, который я думаю, что решение было бы включить и отключить #forcontent #Before в начале #content. Я пытался работать с селектором ~ но он не работает для изменения предыдущих элементов. Кто-нибудь знает, как это может быть достигнуто или может указывать мне различные решения я мог бы попробовать? счетчик (страницы, низший романский)} #forcontent: после того, как {содержания: счетчик (страницы)} с этим кодом, я считаю, что решение было бы включить и отключить #forcontent #Before в начале #content. Я пытался работать с селектором ~ но он не работает для изменения предыдущих элементов. Кто-нибудь знает, как это может быть достигнуто или может указывать мне различные решения я мог бы попробовать? счетчик (страницы, низший романский)} #forcontent: после того, как {содержания: счетчик (страницы)} с этим кодом, я считаю, что решение было бы включить и отключить #forcontent #Before в начале #content. Я пытался работать с селектором ~ но он не работает для изменения предыдущих элементов. Кто-нибудь знает, как это может быть достигнуто или может указывать мне различные решения я мог бы попробовать?
Krokiet
1

голосов
5

ответ
78

Просмотры

Rectangle start fixed at top center animates to full screen

I am trying to animate a small rectangular div that is centered/fixed at the top of the screen and will scale from the center into a full screen overlay. Here is a wireframe of the animation I am trying to create. I have a solution now but it is definitely not the most clean or elegant: .step1 { border:none; background:none; text-align: Center; font-size: 1.6em; height: 200px; width: 300px; background-color: blue; position: fixed; left: 47%; margin-left: -1.75em; top: 0; z-index: 1; transition: all .2s; } .step2 { height: 100%; width: 100%; left: 0%; top: 0; margin: 0; border:none; background:none; color: white; text-align: Center; background-color: blue; position: fixed; z-index: 1; border-radius: 0; } I am also getting a janky animation and I know there must be a better way. Can anyone offer a cleaner solution?
Joel Hoelting
0

голосов
0

ответ
6

Просмотры

Мой Контейнерный Div собирается за пределами Particle.js фона

Я сделал particle.js фон и на том, что я сделал контейнер. В этом контейнере, у меня есть две таблицы с некоторыми данными, и когда я уменьшить размер экрана, сам контейнер, выходящий за пределы фона particle.js. Я прикрепил изображения тоже мои проблемы, пожалуйста, посмотрите на это. Это один из моих проектов колледжа, и я пытаюсь решить ее из последних двух дней, но не получил никакого конкретного решения. Имя Фамилия Email John Doe [email protected] Mary Moe мэри @ пример. ком июля Дули [email protected] холст {дисплей: блок; вертикально-Align: снизу; } # частицы-JS {позицию: абсолютная; ширина: 100%; высота: 100% важно;! фон: # 00356B; } {.Container рентабельность-топ: 20px; позиция: абсолютная; верх: 50%; справа: 50%; -webkit-преобразование: переводить (50%, -50%); преобразование: переводить (50% -50%); цвет: #fff; макс-ширина: 90%; обивка: 2em 3em; цвет фона: # 131415; Текст-тень: 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона ком холст {дисплей: блок; вертикально-Align: снизу; } # частицы-JS {позицию: абсолютная; ширина: 100%; высота: 100% важно;! фон: # 00356B; } {.Container рентабельность-топ: 20px; позиция: абсолютная; верх: 50%; справа: 50%; -webkit-преобразование: переводить (50%, -50%); преобразование: переводить (50% -50%); цвет: #fff; макс-ширина: 90%; обивка: 2em 3em; цвет фона: # 131415; Текст-тень: 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона ком холст {дисплей: блок; вертикально-Align: снизу; } # частицы-JS {позицию: абсолютная; ширина: 100%; высота: 100% важно;! фон: # 00356B; } {.Container рентабельность-топ: 20px; позиция: абсолютная; верх: 50%; справа: 50%; -webkit-преобразование: переводить (50%, -50%); преобразование: переводить (50% -50%); цвет: #fff; макс-ширина: 90%; обивка: 2em 3em; цвет фона: # 131415; Текст-тень: 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона 100% важно!; фон: # 00356B; } {.Container рентабельность-топ: 20px; позиция: абсолютная; верх: 50%; справа: 50%; -webkit-преобразование: переводить (50%, -50%); преобразование: переводить (50% -50%); цвет: #fff; макс-ширина: 90%; обивка: 2em 3em; цвет фона: # 131415; Текст-тень: 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона 100% важно!; фон: # 00356B; } {.Container рентабельность-топ: 20px; позиция: абсолютная; верх: 50%; справа: 50%; -webkit-преобразование: переводить (50%, -50%); преобразование: переводить (50% -50%); цвет: #fff; макс-ширина: 90%; обивка: 2em 3em; цвет фона: # 131415; Текст-тень: 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона 0px 0px 2px # 131415; семейство шрифтов: 'Open Sans', без засечек; } Я хочу, чтобы контейнер быть в фоновом режиме particle.js но это происходит за пределами background.Image этой проблемы, я havingContainer, выходящий за пределы фона
Satyam Kumar
1

голосов
1

ответ
183

Просмотры

Индикатор Выбор календаря должен быть по умолчанию

Когда я наведите курсор мыши на него я получаю индикатор, но мне нужно, чтобы установить в качестве входных данных по умолчанию [тип = «дата»]: по умолчанию :: - WebKit-календарь-сборщика-индикатор {дисплей: блок; } Пожалуйста, помогите с этим
girish
1

голосов
0

ответ
64

Просмотры

CSS Slideshow with wrong timing of last image

I have a little problem with css3 slideshow. I am trying to run this https://www.cssscript.com/pure-css-css3-slideshow-with-image-panning-and-zooming-effect/ with 10 pictures. And my problem is that all slides don't have same duration. Now my nine slides goes correct for 5 seconds each. But there is problem that last tenth image stops for much more time. I think over 10 seconds. My source code is same as in example in link. Only changes are: animation: slideShow 50s linear infinite 0s; -o-animation: slideShow 50s linear infinite 0s; -moz-animation: slideShow 50s linear infinite 0s; -webkit-animation: slideShow 50s linear infinite 0s; .pic-2 { animation-delay: 5s; -o-animation-delay: 5s; -moz--animation-delay: 5s; -webkit-animation-delay: 5s; and same for pic-3 with 10s ..... pic-10 with 45s Is it possible to fix it? Thanks for answers Edit: Now my code in body for overall duration 40s is and it still not working: * { margin: 0; padding: 0; } .pic-wrapper { position: absolute; width: 100%; height: 100%; overflow: hidden; } figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /*animation*/ animation: slideShow 40s linear infinite 0s; -o-animation: slideShow 40s linear infinite 0s; -moz-animation: slideShow 40s linear infinite 0s; -webkit-animation: slideShow 40s linear infinite 0s; } figurecaption { position: absolute; top: 50%; left: 50%; color: #fff; } .pic-1 { opacity: 1; background: url(pic1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-2 { animation-delay: 4s; -o-animation-delay: 4s; -moz--animation-delay: 4s; -webkit-animation-delay: 4s; background: url(pic2.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-3 { animation-delay: 8s; -o-animation-delay: 8s; -moz--animation-delay: 8s; -webkit-animation-delay: 8s; background: url(pic3.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-4 { animation-delay: 12s; -o-animation-delay: 12s; -moz--animation-delay: 12s; -webkit-animation-delay: 12s; background: url(pic4.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-5 { animation-delay: 16s; -o-animation-delay: 16s; -moz--animation-delay: 16s; -webkit-animation-delay: 16s; background: url(pic5.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-6 { animation-delay: 20s; -o-animation-delay: 20s; -moz--animation-delay: 20s; -webkit-animation-delay: 20s; background: url(pic6.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-7 { animation-delay: 24s; -o-animation-delay: 24s; -moz--animation-delay: 24s; -webkit-animation-delay: 24s; background: url(pic7.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-8 { animation-delay: 28s; -o-animation-delay: 28s; -moz--animation-delay: 28s; -webkit-animation-delay: 28s; background: url(pic8.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-9 { animation-delay: 32s; -o-animation-delay: 32s; -moz--animation-delay: 32s; -webkit-animation-delay: 32s; background: url(pic9.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-10 { animation-delay: 36s; -o-animation-delay: 36s; -moz--animation-delay: 36s; -webkit-animation-delay: 36s; background: url(pic10.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* keyframes*/ @keyframes slideShow { 0% { opacity: 0; transform:scale(1); -ms-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; transform:scale(1.1); -ms-transform:scale(1.1); } 100% { opacity: 0; transform:scale(1); -ms-transformm:scale(1); } } @-o-keyframes slideShow { 0% { opacity: 0; -o-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -o-transform:scale(1.1); } 100% { opacity: 0; -o-transformm:scale(1); } } @-moz-keyframes slideShow { 0% { opacity: 0; -moz-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -moz-transform:scale(1.1); } 100% { opacity: 0; -moz-transformm:scale(1); } } @-webkit-keyframes slideShow { 0% { opacity: 0; -webkit-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -webkit-transform:scale(1.1); } 100% { opacity: 0; -webkit-transformm:scale(1); } }
user3166987
1

голосов
1

ответ
91

Просмотры

Nav бар коллапс не работает самозагрузка 3.3.6

Я хочу, чтобы мой навигации, чтобы свернуть вниз, хотя она идет вниз, но когда я нажимаю кнопку еще раз, чтобы вернуться вверх не работает. Ссылка 1 Ссылка 2
Victori
1

голосов
6

ответ
40

Просмотры

Проблемы с позиции: абсолютная при его применении

Я пытаюсь создать Navbar ти белых полос на вершине вариантов, но позиция: абсолютная не отвечает, как я ожидал, даже если поместить его после позиции: относительная, белые полосы шире, чем ширина варианты: Как вы можете видеть здесь Это код, я вытекающий из учебника, я был бы признателен за вашу помощь. Тело {поле: 0; фон: # 222; семейство шрифтов: без засечек; начертание шрифта: 400; } .Container {ширина: 80%; Маржа: 0 авто; } Заголовка {фон: # 151515; } {.Logo с плавающей точкой: слева; обивка: 10px 0; } Нав {поплавок: право; } {Нав уль поле: 0; обивка: 0; список-стиль: нет; } {Нав Li дисплей: встроенный блок; Левое поле: 70px; обивка: 40px; позиция: относительная; } {Nav в цвет: белый; текст-отделка: нет; } Nav а: зависать {цвет: черный; } Nav A :: до {содержания: " «; Дисплей: блок; высота: 5px; фон-цвет: белый; позиция: абсолютная; верх: 0; ширина: 100%; } Contacto INGRESAR Зарегистрируйтесь
Leon
1

голосов
1

ответ
65

Просмотры

How to apply this preloading screen in angular 4 app?

I've been trying to apply this preloading screen in angular 4. Here is the code of my index.html Here is the link to the code pen of this css effect . I don't want any other preloading screens . Please be specific why this is not working not even in a dummy project. I've tried some other css screens but they are also not working. I've suspected the problem is in keyframes , they work with only transform property of css. Test4preloadingscreen @import url('https://fonts.googleapis.com/css?family=Roboto:700'); *, *:after, *:before { margin: 0; padding: 0; box-sizing: inherit; } app-root { margin: 0; padding: 0; height: 100vh; background: #262626; display: flex; justify-content: center; box-sizing: border-box; align-items: center; } ul { display: flex; } li { list-style: none; color: #484848; font-family: roboto, Arial, Sans-serif; font-size: 5em; letter-spacing: 15px; animation: loading 1.4s linear infinite; } @keyframes loading { 0% { color: #484848; text-shadow: none; } 90% { color: #484848; text-shadow: none; } 100% { color: #fff900; text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00; } } li:nth-child(1) { animation-delay: .2s; } li:nth-child(2) { animation-delay: .4s; } li:nth-child(3) { animation-delay: .6s; } li:nth-child(4) { animation-delay: .8s; } li:nth-child(5) { animation-delay: 1s; } li:nth-child(6) { animation-delay: 1.2s; } li:nth-child(7) { animation-delay: 1.4s; } L O A D I N G
Harkamal Singh
1

голосов
0

ответ
44

Просмотры

Как сохранить пропорции изображения на изменение размера

У меня есть эта ситуация, в которой я хочу вынести DIV как квадрат, где высота определяет ширину. До сих пор единственным решением, которое приходит очень близко использовать 1px на 1px изображения: .square {дисплей: инлайн-флекс; высота: 100%; фон: darkorange; } {IMG дисплей: блок; высота: 100%; ширина: авто; } (Источник) JSFIDDLE Но все, что я стараюсь, когда я изменить высоту, квадрат растянуть по вертикали (не квадрат больше). Вы должны ударить перезагрузить, чтобы сделать его квадрат снова. Это, кажется, происходит только в Chrome. Хотя в первоначальном посте предлагается использовать дисплей: встроенный-Flex для .square это не похоже на работу. Может быть, я что-то пропустил. Какие-либо предложения?
Jeanluca Scaljeri
1

голосов
3

ответ
66

Просмотры

CSS - Image height won't scale with width

Earlier I was pointed out how to achieve a certain layout I wanted to have for my page. However, this messes with my image height. As far as I understand, height: auto; should set the height to right proportion when a certain width is set. Here's my code: .floatingImage { width: 50px; height: auto; } #floatingImageContainer { background-color: red; width: 75%; height: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; } My guess is that it's got to do with the display property or maybe the flex-wrap, but that was the solution for my last problem and I'm not entirely sure yet how it could effect my image height... haven't added a margin in the screenshot, however that wouldn't change the height. here's a screenshot of the issue: what the hell Thank you in advance! New problem:
Konsti Lackner
1

голосов
0

ответ
72

Просмотры

Отображение сообщения, если разрыв страницы происходит при печати HTML?

Я работаю на веб-приложение, которое генерирует кавычки. В конце цитаты, есть «Детали и условия» блок, который я не хочу, чтобы разделить на печать. Для этого я использую этот CSS код: @media печати {{#conditions страниц обкатки внутри: избегать; }} Однако, когда блок перемещается на следующую страницу, она не может быть понятно для клиента, что есть больше, чтобы прочитать на другой стороне страницы. Таким образом, я хотел бы добавить сообщение на главной странице, когда это произойдет. Что-то вроде «Детали и условия на следующей странице». Но я не могу придумать способ, чтобы знать, когда показывать это сообщение, для этого я должен был бы знать, что разрыв страницы произошло, и я не могу найти способ сделать это, так как это браузер вещь. HTML код генерируется сочетанием PHP (на стороне сервера) и JavaScript (на стороне клиента) кода, так что у меня совсем немного гибкости. Любая идея?
François
1

голосов
1

ответ
41

Просмотры

Круглые границы вокруг DIV / изображений с различными цветовыми секторами

Я пытаюсь применить круглую рамку вокруг изображения и в то же самое время, чтобы сделать это несколько секторов разных цветов. Нужный результат будет выглядеть примерно так: В сниппета ниже я пытался добиться этого, используя информацию здесь, но кажется, что это не очень легко изменить и отладки кода. Даже если есть несколько решений там, я протянул с помощью градиентов, поскольку он не требует несколько элементов (возможно, со стоимостью не является очень гибким?). Есть ли способ, чтобы достичь того же результата, возможно, в более элегантный и настраиваемый способ? Спасибо! Примечание: изображение из доказательства концепции изображения, а не фактический сайт .profile-инфо-контейнер {фонового цвета: белый; Маржа: 20px 10px; мин-высота: 300px; позиция: относительная; выравнивания текста: центр; высота: авто; ширина: 100%; Дисплей: сетка; }. профиль-инфо-контейнер :: после {содержания: ''; границы: 2px твердый # 7EA2BC; границы радиус: 10px; Сетка-ряд: 2/4; Сетка-колонок: 1; } .Profile-инфо-изображения {преобразования: поворот (45 градусов); граница радиуса: 100%; высота: авто; Маржа: авто; ширина: 50%; граница: 10px твердый прозрачный; фон-размер: 100% 100%, 50%, 50%, 50%, 50%, 50% 50%; фон-повторить: не повторять; Фоновое изображение: линейно-градиент (белый, белый), линейно-градиент (60deg, красный 36%, красный 30%), линейно-градиент (120deg, желтый 36%, желтый 30%), линейно-градиент (240deg, синий 36%, синий 30%); фон положение: центр-центр, левый верхний, правый верхний, левый нижний, правый нижний; фон-происхождения: содержание ящик, границы окно, границы окно, границы окно, граница коробка; фон-клип: контент-окно, границы окно, границы окно, границы окно, граница коробка; Сетка-строка: 1/3; Сетка-колонок: 1; } {H2 сетки ряд: 3; Сетка-колонок: 1; } .Profile-инфо-изображения IMG {преобразования: поворот (-45deg); границы: 1px твердых # 7ea2bc; граница радиуса: 100%; высота: 100%; ширина: 100%; } .Half {ширина: 50%; } Джон Доу
Adrian Pop
1

голосов
2

ответ
48

Просмотры

Gap between DIVs AND floating FOOTER

I know this (or a variant) has been asked a lot... but nothing I have seen pertains to what I am dealing with here. I still have a 14px gap between vertical DIV elements. When I inspect the page, it is not accounted for (nothing highlighted). It goes from one div (with no margin or padding at the bottom) to the next (with no margin or padding at the top). The only solution I have come up with so far is to set the margin of the lower DIV to -14px, but I feel like that should't be necessary. Also, my FOOTER is floating in the middle of the screen! Title Some text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius. These are services This is content something something else and the css html,body,main { height: 100%; } footer { background-color: #000; color: white; min-height: 120px; width: 100%; } .banner { background: url('/img/laptop.jpg') no-repeat center fixed; background-size: cover; color: white; height: 100%; text-align: center; } .banner div { /* padding-top: 200px;*/ position: absolute; top: 40%; width: 100%; } .banner div h3 { font-size: 36px; text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9); } .banner div p { font-size: 18px; } .services-section { background-color: #eee; min-height: 520px; margin: 0; padding: 0; } .contact-section { background-color: #1C74BB; min-height: 400px; margin: 0; padding: 0; } fiddlen https://jsfiddle.net/1vLzvb0k/9/ thanks
1

голосов
1

ответ
25

Просмотры

CSS границы и границы радиуса для текста

Я наткнулся на этот трюк, когда я хотел, чтобы показать некоторый заголовок текста. Я люблю смотреть его, как было интересно, если есть способ, чтобы концы направлены вверх. .pagebreaker {обивка: 10px; край дно: -5px; границы сверху: 4px твердый # f6d241; границы радиус: 35px; } Иого Изображение: Я пробовал отрицательные границы радиус и отрицательные отступы. Есть ли что-то я здесь не хватает? Или это что-то, что не может быть сделано? Благодарю.
Singed Phoenix
1

голосов
2

ответ
68

Просмотры

Таблица шириной 100% не работает и таблица не подходит размер окна браузера хром

Таблица ширины: 100% не работает в Chrome Как установить всю таблицу размеров окна браузера хром. Множественные таблицы внутри таблицы вызывают таблицу, чтобы стать больше. У меня есть несколько таблиц в таблице, как показано ниже:
Navya Nagaraj
1

голосов
1

ответ
30

Просмотры

CSS Transition from Animated State

Можно ли заставить элемент с свойством анимации, затрагивающей непрозрачность для перехода из текущего состояния в другое заданное состояние при наведении курсора мыши? Нулевое состояние объекта анимация между различным помутнением: #thumb {непрозрачность: +0,33; -webkit-анимация: импульсный 2.7s бесконечной легкость входа-выхода; -o-анимация: импульсный 2.7s бесконечной легкость входа-выхода; -MS-анимация: импульсный 2.7s бесконечной легкость входа-выхода; -moz-анимация: импульсный 2.7s бесконечной легкость входа-выхода; анимации: импульсный 2.7s бесконечная легкость входа-выхода; } @ -Webkit-ключевые кадры импульс {0% {непрозрачность: 0,23; } 50% {непрозрачности: 0,42; } {100% непрозрачность: 0,23; }} {@Keyframes импульса 0% {непрозрачность: 0,23; } 50% {непрозрачности: 0,42; } {100% непрозрачность: 0,23; }} И я хотел бы это легкость в к другому образу и непрозрачности на состояние парения: #thumb: зависания {Непрозрачность: 1; изображение на заднем плане: URL (hover.png); -webkit-анимация: начальная; -o-анимации: начальное; -MS-анимация: начальный; -moz-анимация: начальная; анимация: начальный; -webkit-переход: .23s простота в выкатывания; Переход: .23s легкость в выкатывания; } Я был в состоянии достигнуть прямой переход к непрозрачности: 1 ;, но не удалось добиться плавного перехода. Прототип можно найти здесь, на Codepen: https://codepen.io/anon/pen/oqmMEV
1

голосов
0

ответ
71

Просмотры

Nested inline-flex containers overlap parent elements in Internet Explorer

I have a component that is building sections in menus. This component uses flexbox in a few locations. My approach seems to be working for most browsers, but IE10/11 run into issues. I've tried looking through some common flexbox issues in IE, but I can't seem to narrow down my issue to the specific problem. The snippet below is a close representation of the problem. Essentially I want the purple box to fully contain the green box. I'm guessing the issue is related the min-width I've supplied to the menu-section rule, but I can't seem to find a good solution to the nested flex container overflowing the section. .menu-wrapper { height: 250px; display: inline-flex; box-sizing: border-box; padding: 0.5em; outline: 1px solid red; margin: 1em; } .menu-section { outline: 3px solid purple; box-sizing: border-box; padding: 0 0.5em; min-width: 150px; } .menu-items-wrapper { height: 100%; outline: 1px solid green; box-sizing: border-box; display: inline-flex; display: -ms-inline-flexbox; flex-flow: wrap; /* Using this writing mode hack to get columns to respect wrapped element size in Chrome/FF */ writing-mode: vertical-lr; -ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; } .menu-items-wrapper > * { writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; } .menu-item { background: hsla(0, 0%, 0%, 0.1); padding: 1em 0.5em; margin-right: 1em; outline: 1px solid black; display: inline-block; } One Two Three Four Five Six Seven Eight Nine Ten Below is a screenshot of what this looks like in IE11:
ramblingWrecker

Просмотр дополнительных вопросов