Jump to content

Schamil74

User
  • Posts

    116
  • Joined

  • Last visited

  • Days Won

    8

Everything posted by Schamil74

  1. Всем привет! Наткнулся на такой макет https://mega.nz/#!5XYwxYrK!CKPEpk5YklPP-_QThH67BoTQLVQfDvzt1cmVoO9hFRo На картинке проблемные элементы выделены синими стрелками: - листы с загнутыми уголками и тенями (Блоки с заголовками Documents и Photos) - иконки планшетов с тенями - линия разрыва (если так понятно о чем я) - иконки ноутбука с тенями Можно сверстать так: загнутые листы и иконки блоков docs и photos наверное можно в одну png сохранить. можно разбить на два файла. Планшеты(ноут) и тени сделать отдельными картинками. Т.е. тень будет фоном у компа и ноутов. Планшеты и ноут в SVG. Но больше всего интересна полоса разрыва))))Как? Просто взять и наложить фоном в виде картинки? А как бы вы сверстали эти элементы? Какое решение будет оптимальным?
  2. Всем привет! Занимаюсь версткой 3,5 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 7 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка, 1 резиновый-адаптивный без фреймфорка и последний с анимированным скроллингом, адаптивный, резиновый, под ретину https://schamil74.github.io/Mogo/
  3. Спасибо. Дело в том, что я с js на вы. Хотел реализовать такую обычную идею как предлагаете вы, увы не вышло. Вышел из положения через jquery.accordion, наткнулся случайно при поиске решений
  4. Всем привет! Подскажите с задачей! Как сделать нормальную работу стрелок? При втором цикле кликанья нормально работает только третий элемент. Здесь можно экспериментировать
  5. а если с сылкой поиграть? оставить только /check_param.php или убрать http? если ссылка внутренняя конечно)))
  6. Всем привет! Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка. Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах. Все иконки svg-спрайты (с ними помучился). В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было. https://schamil74.github.io/Mishka/
  7. Разобрался! Дело в том, что нужно было удалить содержание тега <g>, а именно атрибуты transform.
  8. В продолжение Ссылку на сайт я давал. Не пойму, почему топик так отображается неверно. Сравните их. Который свежее более полный. Через инспектор не умею это смотреть. Да, какая-то ошибка была. Эту тему можно удалить.
  9. Вы меня простите, но видимо что-то пошло не так! Я тему не дублировал. Может на моей стороне баг какой-то или руки-крюки. Предыдущую тему можно удалить. Данная тема с полным описанием проблемы и здесь есть ссылка на сайт.
  10. Всем привет! Столкнулся проблемой отображения svg спрайтов в ie11. Описываю проделанные мною два варианта: В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Работает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg. Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял, но это и не нужно), но реагирует на css, причем не отображаются только некоторые иконки. Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например (синтаксис pug: svg.contacts__flag(width="60", height="90") use(xlink:href="#flag") Ниже сама верстка со спрайтом только 2го варианта https://schamil74.github.io/Mishka Таск для спрайтов gulp.task('symbols', function () { return gulp.src("source/img/icons/*.svg") .pipe(svgmin()) .pipe(cheerio({ run: function ($) { $('[fill]').removeAttr('fill'); $('[stroke]').removeAttr('stroke'); $('[style]').removeAttr('style'); }, parserOptions: {xmlMode: true} })) .pipe(replace('&gt;', '>')) .pipe(svgstore({ inlineSvg: true })) .pipe(rename("symbols.pug")) .pipe(gulp.dest("templates/blocks/")); }); Скрин того, что видит chrome и firefox (слева), и ie11 (справа). Повторюсь, что не все иконки не отображаются Пробовал подключать svgxuse и svg4everybody, но толку нет. Какую еще предоставить инфу? PS: Я все еще новичок.
  11. Всем привет! Столкнулся проблемой отображения svg спрайтов в ie11. Есть два варианта: В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg. Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки. Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например: svg.contacts__flag(width="60", height="90") use(xlink:href="#flag")
  12. Всем привет! Занимаюсь версткой чуть больше 2ух месяцев, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 2 фикс макета и один адаптив, ссылку на который сейчас и выкладываю. Так же адаптирован под ретина дисплеи. https://schamil74.github.io/Sedona2017/ Заходите с телефонов, планшетов. А вот касательно кроссбраузерности, обнаружил такой баг: На IE11 иконки выпадают из инпута. Пока не могу загрузить скрин - ошибка!!!
  13. Саня, спасибо! Вот не люблю я эти таблицы))))
  14. Всем привет! Сейчас делаю разметку блока для мобильной версии и не могу выровнять (растянуть) инпут как на макете. Код блока такой https://codepen.io/Schamil74/pen/GWQLbQ Отрывоке макета приложил. Здесь нужен вариант выравнивания инпутов, типо margin-right: 0. А вот как их растянуть до текста не догоняю))))
  15. Поторопился! В общем запустил я сс2014 и 2015, но экспорт не работает (висит).
  16. виртуалка неочень - пробовал. у меня стоял cs6, но там не было generate, а он так нужен. тему можно закрывать. сутки мучился, написал тему и все получилось;)
  17. отличный мотиватор про Винду)))) фотошоп покорился))) так и не понял, что сделал
  18. Всем привет! Помогите установить Photoshop СС 2014 на linux mint x64. Я уже за***лся, не получается!
  19. Реально за месяц! Главное разработать для себя план обучения и не лениться. Это макет я верстал уже с препроцесором Sass, используя сборщик gulp, немного нативный js, изучал параллельно с версткой. Ну и мелочи всякие. Сверстал два фикс макета. Сейчас изучаю БЭМ и адаптив с резиной. На данный момент сделал тольку разметку главной страницу с адаптивом на флоатах, mobile first. Но этот макет я уже верстаю с помощью постпроцессора PostCSS с использованием синтаксиса SCSS. Вот оцените первые шаги с БЭМ и адаптивом. Сделал только адаптивную разметку!!! https://schamil74.github.io/Sedona2017/ Кстати, спасибо за ссылочку
  20. Так и думал, что спецсивол не нужно было прописывать Подправил!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy