Schamil74

Всем привет!

Наткнулся на такой макет https://mega.nz/#!5XYwxYrK!CKPEpk5YklPP-_QThH67BoTQLVQfDvzt1cmVoO9hFRo

На картинке проблемные элементы выделены синими стрелками:

- листы с загнутыми уголками и тенями (Блоки с заголовками Documents и Photos)

- иконки планшетов с тенями

- линия разрыва (если так понятно о чем я)

- иконки ноутбука с тенями

Можно сверстать так:

загнутые листы и иконки блоков docs и photos наверное можно в одну png сохранить. можно разбить на два файла.

Планшеты(ноут) и тени сделать отдельными картинками. Т.е. тень будет фоном у компа и ноутов. Планшеты и ноут в SVG.

Но больше всего интересна полоса разрыва))))Как? Просто взять и наложить фоном в виде картинки?

А как бы вы сверстали эти элементы? Какое решение будет оптимальным?

Всем привет!

Занимаюсь версткой 3,5 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.

На данный момент сверстал 7 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка, 1 резиновый-адаптивный без фреймфорка и 

последний с анимированным скроллингом, адаптивный, резиновый, под ретину

https://schamil74.github.io/Mogo/

Спасибо. Дело в том, что я с js на вы. Хотел реализовать такую обычную идею как предлагаете вы, увы не вышло. Вышел из положения через jquery.accordion, наткнулся случайно при поиске решений

Всем привет!

Подскажите с задачей!

Как сделать нормальную работу стрелок?

При втором цикле кликанья нормально работает только третий элемент.

Здесь можно экспериментировать

своровали 

а в целом как верстка?)))

3 часа назад, Hosefu сказал:

Здравствуйте, у меня небольшая проблема. Нажимая на кнопку submit никуда не перенаправляет. 

             <form method="GET" action="http://elusive-rp.ru/check_param.php">
               
                <label>Ник на сервере<span class="verification"></span></label>
                <input type="text" value="" name="nickname" id="contact-name">
                <br>
                    <select class="donateselect" name="level">
                        <option value="a1" selected>1 уровень - 50 руб</option>
                        <option value="a2">2 уровень - 100 руб</option>
                        <option value="a3">3 уровень - 150 руб</option>
                        <option value="a4">4 уровень - 200 руб</option>
                        <option value="a5">5 уровень - 250 руб</option>
                        <option value="a6">6 уровень - 300 руб</option>
                        <option value="a7">7 уровень - 350 руб</option>
                        <option value="a8">8 уровень - 400 руб</option>
                        <option value="a9">9 уровень - 450 руб</option>
                        <option value="a10">10 уровень - 600 руб</option>
                        <option value="a11">11 уровень - 650 руб</option>
                        <option value="a12">12 уровень - 700 руб</option>
                        <option value="a13">13 уровень - 750 руб</option>
                    </select> 
                <br><br>
                <input type="submit" name="buy">
                
              </form>

Заранее спасибо.

а если с сылкой поиграть? оставить только /check_param.php или убрать http? 

если ссылка внутренняя конечно)))

Только хотел предложить.

Как вариант

Всем привет!

Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.

На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка. 

Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах.  

Все иконки svg-спрайты (с ними помучился).

В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было.

https://schamil74.github.io/Mishka/

Разобрался! Дело в том, что нужно было удалить содержание тега <g>, а именно атрибуты transform.

В продолжение 

Ссылку на сайт я давал.  Не пойму, почему топик так отображается неверно. Сравните их. Который свежее более полный. Через инспектор не умею это смотреть. 

Да, какая-то ошибка была. Эту тему можно удалить.

Вы меня простите, но видимо что-то пошло не так! Я тему не дублировал. Может на моей стороне баг какой-то или руки-крюки.

Предыдущую тему можно удалить. Данная тема с полным описанием проблемы и здесь есть ссылка на сайт.

Всем привет!

Столкнулся проблемой отображения 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: Я все еще новичок.

Всем привет!

Столкнулся проблемой отображения 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")

/

Всем привет!

Занимаюсь версткой чуть больше 2ух месяцев, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.

На данный момент сверстал 2 фикс макета и один адаптив, ссылку на который сейчас и выкладываю. Так же адаптирован под ретина дисплеи.

https://schamil74.github.io/Sedona2017/

Заходите с телефонов, планшетов. А вот касательно кроссбраузерности, обнаружил такой баг:

На IE11 иконки выпадают из инпута. 

Пока не могу загрузить скрин - ошибка!!!

Саня, спасибо! Вот не люблю я эти таблицы))))

Всем привет!

Сейчас делаю разметку блока для мобильной версии и не могу выровнять (растянуть) инпут как на макете.

Код блока такой https://codepen.io/Schamil74/pen/GWQLbQ

Отрывоке макета приложил.

Здесь нужен вариант выравнивания инпутов, типо margin-right: 0. А вот как их растянуть до текста не догоняю))))

Поторопился! В общем запустил я сс2014 и 2015, но экспорт не работает (висит).

виртуалка неочень - пробовал. у меня стоял cs6, но там не было generate, а он так нужен. тему можно закрывать. сутки мучился, написал тему и все получилось;)

отличный мотиватор про Винду)))) фотошоп покорился)))

так и не понял, что сделал

Всем привет!

Помогите установить Photoshop СС 2014 на linux mint x64. 

Я уже за***лся, не получается!

On 3/1/2017 at 17:13, ulibochk said:

А мне тоже понравилось, реально визуально крутой сайтец. А если вы говорите за месяц - мне кажется это вообще не реально
Вот еще статью интересную видел http://wezom.com.ua/blog/veb-dizajn-v-2017 Тренды 2017 года в веб-дизайне, думаю вам будет полезно, для дальнейшего развития.

Реально за месяц! Главное разработать для себя план обучения и не лениться.

Это макет я верстал уже с препроцесором Sass, используя сборщик gulp, немного нативный js, изучал параллельно с версткой. Ну и мелочи всякие. Сверстал два фикс макета. 

Сейчас изучаю БЭМ и адаптив с резиной. На данный момент сделал тольку разметку главной страницу с адаптивом на флоатах,  mobile first.

Но этот макет я уже верстаю с помощью постпроцессора PostCSS с использованием синтаксиса SCSS.

Вот оцените первые шаги с БЭМ и адаптивом. Сделал только адаптивную разметку!!! 

https://schamil74.github.io/Sedona2017/

Кстати, спасибо за ссылочку

так и должно быть

В 2/17/2017 в 23:38, Schamil74 сказал:

Спасибо. По хорошему его бы на JS надо сделать, а не хавере.

Немного подправил. С 0,5сек до 0,2сек

В 2/18/2017 в 16:26, inono сказал:

бро, если ты действительно сделал это за месяц обучения на бесплатных обучающих роликах, то тебя ждет успех в веб-разработке. а из критики: я бы анимацию всех вот этих выплывающих панелей в хедаре ускорил, уж очень медленно плывут. еще один косяк снизу в скрине. общее впечатление о сайте - оч крутой, но может это потому, что я сам начинающий

Так и думал, что спецсивол не нужно было прописывать

Подправил!