css3- все статьи тега
Две колонки flex-box макет
Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item { border: 1px dashed blue; height: 50px; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="i ...
Создание треугольника в css с градиентным фоном
Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже. (Треугольник, прикрепленный к неправильному окну ошибки пароля.) Дизайн в Photoshop Это дизайн, который у меня есть до сих пор в HTML и CSS. Вот css, который у меня есть для треугольника на данный момент. .error-triangle { wwidth: 0; height: 0; border-top: 10px solid transparent; border-botto ...
CSS Media Query и Javascript/jQuery не совпадают
В моем CSS у меня есть медиа-запрос, такой как: @media (min-width: 800px) { /* styles */ } А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия. Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе. $(window).resize(function() { var viewportWidth = $(window).width(); if (viewportWidth >= 800) { // do something } }); ...
CSS3 эффект перехода с onclick
Я работаю над CSS3 и как бы застрял на одной проблеме. Проблема заключается в следующем: У меня есть изображение, которое изначально находится в левой части экрана: .box img{ margin-left:0; -webkit-transition:1s; } Теперь, при наведении, когда я хочу, чтобы эффект имел место, т. е. переместите изображение 500px слева, когда я наведу курсор на изображение, следующий код: .box img:hover{ margin-left:500px; -webkit-transition:1s; } Это работает просто идеально. Единственная проблема за ...
создание линейного градиента путем получения цветов фона из двух дивов с помощью события onclick javascript
Я работаю над проектом, который будет получать цвет фона от двух разных дивов, используя два разных onClick events.My дивы имеют шестнадцатеричные значения цвета фона. Я хочу получить их и объединить в виде линейного градиента, применить их к родительскому div,а также преобразовать тот же код в rgb. Вот мой HTML, CSS и Js <div class="color ForeignCrismon" onClick="GetColorOne(event)"></div> <!--First Color Stop--> <div class="color BrewedBrown" onClick="GetColorTwo(event)" ...
Стоит ли создавать отдельный CSS-файл для каждой HTML-страницы?
Я создаю личную домашнюю страницу. У меня есть 4 HTML-страницы и только один CSS-лист, связанный для всех страниц. То есть внутри одного CSS-файла я настроил макет для всех разных страниц. [На самом деле, каждая страница имеет практически одинаковый макет, только содержание и их стиль выглядят по-разному. И мой сайт не является таким уж продвинутым.] Это хорошая практика? Или я должен создать отдельный CSS для каждой страницы? Пример того, что у меня есть сделано: Страница-1.html: <l ...
CSS calc недопустимое значение свойства
Может кто-нибудь сказать мне, почему эта функция CSS calc не работает? Когда я проверяю элемент в Chrome, он говорит "недопустимое значение свойства". width: calc((100vw - 14px * 2) / (270px + 11px * 2)); ...
CSS Border radius не обрезка изображения на Webkit
Мне трудно понять, почему border-radius исчезает из моего элемента # screen при использовании chrome, но не firefox или ie9? У меня есть все разные префиксы для каждого браузера плюс стандартный радиус границы: Www.cenquizqui.com Верхнее поле содержимого, содержащее изображения, называется # screen Копипаст css экрана: #screen {background: none repeat scroll 0 0 #EEEEEE; display: block; height: 300px; position: relative; width: 960px; overflow:hidden; -moz-border- ...
Кнопка не закрывается?
Вот мой кодовый ключ: http://codepen.io/Chiz/pen/MaBwBb Когда вы нажимаете на кнопки, обычно кнопка дает визуальную обратную связь о том, что она" нажата", но в этом случае ничего подобного не происходит. Как будто кнопки были отключены. Почему это так? $(document).ready(function() { $("#fullpage").fullpage({ verticalCentered: false, resize: true, scrollingSpeed: 700, css3: true, easing: "easeOutBounce" }); }); * { box-sizing: border-box; } html, ...
Safari flex-grow поведение, отличное от Chrome / FF / Edge (css flexbox)
Я получаю различное поведение между Safari и Chrome / FF / Edge с помощью flex-grow. Я пытаюсь получить вертикальный центр, но safari дает больше фиксированного эффекта снизу. Я использую flex-grow с десятичным числом, но Safari, похоже, интерпретирует его как целое значение. HTML <div class="fc"> <div>Align Top</div> <div>Align Center</div> <div>Align Bottom</div> <div class="spacer">Bottom Spacer</div> </div> CSS .fc { ...
Создание выпадающего меню по клику CSS
Я должен построить меню с 5 опциями, при нажатии на определенную появится новое подменю. Я совершенно не представляю, как это сделать. /**Navigation */ nav { border: 1px solid red; float: left; margin-right: 35px; min-height: 280px; } nav li { text-decoration: none; font-weight: normal; color: red; list-style: none; } /**Content */ #section { background-color: ; border: 1px solid; font: normal 12px Helvetica, Arial, sans-serif; margin-le ...
Как создать форму ценника в CSS и HTML
Итак, я нашел этот ответ - CSS3 форма меню, Стиль, но понятия не имею, как поместить его на левую сторону. Я уже искал его, но безуспешно. Вот чего я пытаюсь добиться: И я нашел это тоже - изменить форму треугольника. Как я могу заставить его работать на противоположной стороне? Я имею в виду, что стрелка должна быть с левой стороны. И возможно ли это сделать с одним div? ...
Создание динамической формы в виде стрелки с помощью CSS
Я хотел бы создать сложную стрелкообразную форму с CSS, как это изображение: Это текущий код: .camera_caption { position: relative; background-color: greenyellow; left: 0; margin-top: 263px; width: 717px; /*height: 234px;*/ padding-left: 365px; font: normal 14px/24px 'Roboto'; color: #fff; } .camera_caption:after { content: ""; background: url(../images/capture_bg2.png) 0 0 no-repeat; position: absolute; height: 234px; width: 119px; ...
Остановить переход CSS3 от запуска при загрузке страницы
Я испытываю проблему со свойством CSS transition, которое срабатывает при загрузке страницы. Проблема заключается в том, что когда я применяю color transition для элемента, (например: transition: color .2s), то при первой загрузке страницы Мои элементы мигают от черного до своего собственного назначенного цвета. Предположим, что у меня есть следующий код: CSS p.green { color: green; transition: color .2s; -moz-transition: color .2s; -webkit-transition: color .2s; -o-transiti ...
Flexbox в Chrome-как ограничить размер вложенных элементов? [дубликат]
На этот вопрос уже есть ответ здесь: Chrome / Safari не заполняет 100% высоту Flex parent 3 ответа В Google Chrome Как заставить элемент, вложенный в элемент flexbox (под" элементом flexbox " я подразумеваю дочерний элемент элемента, стилизованного под display:flex), ограничить его размер размером элемента flexbox, в который он вложен под водой? Например, предположим, что у меня есть следующее: < ...
CSS Parallax фоновое изображение пробел в IE
Я использую метод CSS-only кита Кларка для создания двухслойного эффекта параллакса, чтобы фоновое изображение прокручивалось с меньшей скоростью, чем остальной контент сайта. Просто для ясности, изображение покрывает всю страницу,а содержимое располагается на ней. Мой сайт разделен на два основных элемента div (и контейнер div) - один для фонового изображения, а другой для содержимого страницы. Ниже приведен код, который я использовал для различных div элементы. .container { height: 100%; ...
Почему это документ.querySelector не работает на псевдо элементе?
Я играю с псевдоэлементами и javascript, но некоторые из них я не могу стилизовать с помощью javascript. var div = document.querySelector(":before"); div.style["display"] ="none"; div{ width:200px; height:200px; background:red; position:relative; } div:before{ position:absolute; content:''; top:0; right:-100px; width:100px; height:100%; background:green; } <div></div> Не кто-нибудь знает почему это не р ...
Как создать такой "блестящий" эффект, используя CSS градиенты?
Можно ли создать следующее, используя только CSS? Я создал контейнер и закругленные углы. Скрипка здесь . Но я не знаю, как получить легкий блестящий эффект. Можно ли это сделать в CSS? Если да, то как? Ниже приведен код, который я написал до сих пор. HTML <div id="phone-outer"> <div id="phone-inner"> </div> </div> CSS #phone-outer { margin-bottom:200px; margin:0 auto; width:400px; height:500px; background-color:#333; -web ...
Почему translateY (-50%) необходим для центрирования элемента, который находится наверху: 50%?
Я вижу, что этот код работает для выравнивания div по вертикали внутри его родительского элемента: .element { position: relative; top: 50%; transform: translateY(-50%); } Вопрос в том, почему? Моей первой мыслью было, что родительский элемент включает в себя больше, чем видовое окно. Я сделал мой родительский видовой экран высотой 100vh и шириной 100%. Это не сработало. Мне все еще нужен был перевод или отрицательное смещение маржи. Зачем мне нужно отрицательное смещение, если родитель ...
Firefox не допускает пустой области contenteditable
Firefox версии 30. Следующий код отлично работает в chrome, и я могу начать печатать в абзаце. Но он не работает в firefox, никаких подсказок, что не так <div> <div> <span contenteditable="false">Not editable area</span> <p contenteditable="true"></p> </div> </div> JSFiddle - http://jsfiddle.net/THPmr/30/ ...