Search the Community

Не работает transition при появлений модального окна: <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально. Что делать?

Здравствуйте дорогие специалисты програмирования. Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят! Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту. Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit С уважением к Вам, за ранее спасибо.

Может кто-то оценить уже готовый сайт? Заранее спасибо.

Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо! <div class="three navigation items"> <nav> <ul> <li> <div class="navigation__item"></div> <a href="#">Hot themes</a> </li> <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a> </li> <li> <div class="navigation__item"></div> <a href="#">El'Classico</a> </li> </ul> </nav> </div> .navigation { background-color: rgba(31, 30, 30, 0.438); width: 900px; height: 30px; } .navigation li { display: inline-block; padding: 5px 15px; &:hover { content: ""; background-color: rgb(36, 36, 36); cursor: pointer; } } a { color: black; text-decoration: none; font-family: sans-serif; &:hover { content: ""; color: white; } }

Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла. Суть в следующем: Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств. Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл. Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.

Привет форумчане! Раньше работал один и бед не знал в этом плане, но теперь попал в небольшую фирму, где каждый работает сам по себе, нет единого рабочего процесса. Я привык работать через Prepros, он многофункционален и требует минимальных знаний в "компиляторстве". Так вот, я хотел бы продолжить работать с препроцессором вместо чистого CSS, но проблема в том, что стили проекта могут также править и другие мои коллеги, и если они через какой нибудь фтп клиент внесут изменения в файл со стилями на сервере, то я потом не смогу с ним дальше работать, т.к. затру все их изменения. Можно ли как-то выйти из этой ситуации? Как вариант, можно мониторить изменения в файле стилей перед началом работы, но здесь есть риск ,что я однажды попросту забуду это сделать. Также, слыхал о возможности компиляции прямо на сервере. Прошу помочь в этом вопросе.

Всем доброго дня. Копаюсь в sass (scss), возник вопрос, ответ на который либо я не понимаю, либо не могу найти) Собственно такая структура .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: ; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } } сам вопрос такой: Допустим у меня 50 категорий, для каждой своя иконка, как видно из кода это спрайт. В таком варианте как сейчас мне нужно писать очень много (ну или копировать), то есть выглядит примерно так: .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: 0; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } &.cars2 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars3 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars4 { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars2{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars3{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars4{ @include sprite(url(../img/sprite.png), -14, -22); } } если честно я даже не особо понимаю как правильно объяснить, но примерно так: есть ли возможно обратиться к названию родительского класса, чтобы вместо &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } писать &:hover тут что-то что заменит (span.inner > a span.icon_cat).cars{ @include sprite(url(../img/sprite.png), -14, -22); } Ну или может есть какой-то другой короткий способ записи? Подскажите пожалуйста

В IT компанию (разработка ПО) приглашается Frontend developer. Требования: - знание JavaScript, jQuery, AngularJS или BackboneJS; - знание и понимание HTML5 технологий; - знание ReactJS (как преимущество); - умение верстать кроссбраузерные адаптивные страницы; - понимание современных тенденций в области Front-end разработки; - опыт работы с Grunt / Gulp, SCSS и другими инструментами; - опыт работы с системами версионирования; - владение английским языком (чтение документации). Обязанности: - создание SinglePage Application разного уровня сложности; - реализация интерфейсов по макетам дизайнеров; - оптимизация существующих приложений. Условия: - оформление согласно трудовому законодательству и «белая» заработная плата; - размер заработной платы обсуждается с успешными кандидатами, по результатам собеседования; - пятидневная рабочая неделя, график работы с 9 до 18 часов, - офис расположен в историческом центре города; - возможности для роста и обучения. Контакты для связи: E-mail: itincorp@gmail.com Skype - valeriya390 Тел.: +7 (916) 072 29 58 Валерия

Доброго времени суток, частично выполнил задание предложенное на форуме. Сам сайт. Исходник тут. Там же чуть больше деталей об этом проекте, не буду повторяться. Сразу отмечу, что не придерживался ТЗ доскональна, так как это учебная верстка, а ТЗ ставило рамки и задачи не подходящие под мои цели. Специально и сразу не соблюдалась поддержка IE8, так как AngularJS давно прекратил его поддержку(все замечательно работает под IE9), так же мне не очень понравилось качество макета, поэтому раз деньги мне все равно не заплатят, я решил не грузится подгонкой пикселей . Было сделано 3 представления сайта, заместо 4, так как этого вполне достаточно, возможно я и не прав, но спорить было не с кем, а учебного интереса эта работа не представляла. Прошу обратить внимание на AngularJS, если среди вас окажется человек хорошо разбирающийся в вопросе, я буду безмерно рад любому вашего комментарию, пожалуйста, не оставайтесь равнодушным. Спасибо господину klierik за Ваш труд.

Здравствуйте, скачал макет, начал верстать. Для написания стилей использовал SCSS. Стал наводить порядок в SCSS и столкнулся с проблемой организации цветов и шрифтов. Мои цвета: Мои шрифты: Цветов много, какова вероятность того что дизайнер при создании макета ошибся на пару тонов и такие цвета как #808080, #868585, #8b8b8b, #8d8c8c можно объеденить? Как лучше их организовать? Использовать функцию darken или математические вычисления или присваивать переменные grey_dark, grey_very_dark, grey_superdark? Вариаций сочетананий шрифтов тоже много. Как их правильно организовать? В некоторых случаях размер, начертание и семейство совпадает, а line-height нет. Или отчилается размер. Как вы боритесь со шрифтами? Где можно посмотреть примеры хорошего SCSS в проектах (не библиотеках)?

Здравствуйте, оцените, пожалуйста верстку. Делал с помощью Susy 2. Верстка адаптивная, резиновая. Макет взял с интернета. Ссылка на гитхаб; Демо; Есть также пара моментов: 1. Возможно как-то сделать чтобы при добавлении контента див этот растягивался и не выезжал текст 2. Социальные иконки идут в мобильной версии после блока с текстом, а в десктопной до и справа, флоатом и относительным позиционированием я этого добился, но порядок у них изменился. Есть другие решения? Спасибо!

Вчера начал читать небольшую книжку о SCSS, решил освоить препроцессоры. Уже половину книги прочитал, а все никак не могу настроить командную строку. ОС: Windows XP Что я сделал, шаг за шагом: 1) скачал ruby installer 1.9.3, установил его 2) прописал в командной строке gem install sass 3) sass установился. Но директория по умолчанию не та, которая мне нужна. 4) меняю директорию: cd /d D:\Dropbox\Верстка\Workshop 5) теперь я хочу, чтобы sass автоматически компилировал sass файл в css. Этот файл лежит по адресу: D:\Dropbox\Верстка\Workshop\Mold\style\scss\style.sass 6) Для этого пишу в командной строке: sass --watch Mold\style\scss\style.sass:Mold\style\style.css 7) Результат - ошибка: no such file or directory - style\scss\style.sass ERRNO::ENOENT: No such file or directory - D:\Dropbox\Верстка\Workshop\Mold\style\scss Но директория правильная, и файл лежит на месте! Файл style.css создается там, где нужно. Правда вместо результата компиляции -- сообщение об ошибке (такой же как и в командной строке). Почему появляется эта ошибка? Что сделано не так?

привет, народ кто пользуется sass - можно ли какой то командой отслеживать изменения в общем css файле - который генерируется из нескольких scss, командами sass. (для пояснения sass --watch path/sass-directory:path/css-directory.) Для чего это нужно, если делать мелкие правки в самом инспекторе хрома то они делаются в style.css (работают живые стили - то есть изменения переносятся из хрома в файлы) и их вручную нужно переносит в соответствующий *.scss файл. Может sass отслеживать эти изменения . Пока он следить за scss, и собирает их в один style.css. Нужно что бы, Если что то меняется в style.css. он отслеживал соответствующий *.scss файл. Например выдает такую ошибку.

Если представить, что у вашего друга верстальщика была лёгкая степень комы. После которой он вернулся в мир верстки зная один CSS, что бы вы ему посоветовали для своего нового суперпроекта? LESS, SASS, SCSS?