Jump to content

Sergey_K_2015

Newbie
  • Posts

    29
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by Sergey_K_2015

  1. В 11.08.2016 в 03:49, OlgaF сказал:

    Добрый день!

    есть задача сделать адаптивную верстку в bootstep3 страницы товара на сайте.

    Возьметесь?

    bootstep3 - это новый танец? Интересное название для адаптивной верстки.

  2. Главное меню нужно было изначально сделать абсолютно спозиционированным, чтобы при переходе на fixed, header не схлопывался на высоту меню. Исправил, теперь не скачет.

    Ну и заодно анимацию отключил при ширине экрана меньше 768px.

  3. Сверстал первый лендинг http://bouncy.aiq.ru

    Решил освоить Bootstrap, первая верстка с ним. В описаниях понравились его возможности в плане адаптивной верстки, встроенных плагинов. Постарался использовать по-максимуму его возможности (сетка, слайдеры, меню, кнопки). Ну, и первая моя попытка работать с анимацией. Подключил wow и animate.css. Прошу высказать замечания как по использованию Bootstrap, так и анимации.

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

  4. Вот что получилось

     

    Хочу кое-что спросить:

     

    1. Тень у iMac не выходит за пределы блока потому что стоит overflow: hidden чтоб нормально float работал, можно ли как то сделать чтоб выходила?

     

    2. не пойму как сделать свечение над iMac и блик над текстом справа (Superb cutomers flat design tool)

    А если сделать фигуру (параллелограмм) в svg формате, задать ей частичную прозрачность, абсолютно спозиционировать и z-index поместить сверху, чтобы она накрывала нужные элементы?

  5. Задайте родительскому элементу нужную ширину и выровняйте его по центру. Примерно так:

    .blocks  {
      width:70%;
      margin: 0 auto;
    }

    Т.к. margin у картинок задан в пикселях, а ширина в процентах, при уменьшении ширины родительского блока может образоваться вообще 2 колонки. Нужно смотреть и регулировать ширину.

    Ну и почистите код, а то там присутствуют остатки табличной разметки и ul вообще не к месту.

  6. что мешает задавать оригинальные классы элементам и без БЭМ ?

    С БЭМ стили задавать удобнее.

    В LESS получается конструкция типа:

    .блок  {

       ...

       &__элемент1  {

          ...

          &_модификатор  {

             ...

          }

       }

       &__элемент2  {

          ...

       }

    }

  7. Задавая каждому элементу dom класс можно при стилизации вообще обойтись без вложенности. И в CSS не будет картины типа (nav ul li a). Кроме того, не нужно будет комментировать HTML (если нормально имена классам задавать). На мой взгляд, с БЭМ удобнее верстать. Сначала, правда, придется помучиться с придумыванием имен классов.

  8. Названия статей по данной теме уже давно разделили.

    Статья 228.
    Незаконные приобретение, хранение, перевозка, изготовление, переработка наркотических средств, психотропных веществ или их аналогов

    Статья 2281.
    Незаконные производство, сбыт или пересылка наркотических средств, психотропных веществ или их аналогов

    Статья 230.
    Склонение к потреблению наркотических средств или психотропных веществ

    Статья 231.
    Незаконное культивирование запрещенных к возделыванию растений, содержащих наркотические вещества

  9. Футеру Вы размеры задали, теперь растяните вложенный <div class="footer_img"> на весь размер родительского блока (width:  100%; height: 100;).

    А какой размер у p1.png? Насколько он совпадает с размерами блока, в который его помещаете?

    Попробуйте задать .footer_img следующие параметры:

    background-size:  cover (либо 100% 100%) - это масштабирование изображения

    background-position: top (выравнивание по верхнему краю)

  10. Из тех кусков кода, которые доступны для обозрения, совсем непонятно, какому из элементов Вы задаете фоновую картинку (.footer_image).

    В HTML нет ничего с таким классом. В принципе, картинка вообще не должна появляться.

  11. Все эти эффекты описаны не для фонового изображения, а для самого блока, в котором содержится это изображение. И если в этом блоке есть, к примеру, текст, то он тоже увеличится (эффект плавного увеличения).

    http://webgyry.info/svet-css- описывается создание эффекта свечения.

    http://beloweb.ru/novichkam/plavnoe-uvelichenie-izobrazheniya-pri-navedenii-na-chistom-css3.html- плавное увеличение при наведении.

  12. Добавьте background-size:0;

    Придадите эффект отсутствия картинки.

    Вы бы написали, какой эффект нужен. И учтите, что на фоновых картинках особо не разгуляешься. Поменять можно размер, позиционирование, повторение.

  13. Внимательно посмотрите, как у Вас организованы файлы LESS. Что Вы компилируете? Вам же необходимо в результате компиляции из множества файлов LESS получить один файл CSS. Создайте один общий файл (к примеру var-style.less), который объединяет все остальные примерно с таким содержимым (перечислить Ваши LESS файлы):

    @import url("base.less");
    @import url("variables.less");
    @import url("layout.less");
    @import url("blocks/header.less");
    @import url("blocks/btn.less");
    @import url("blocks/slider.less");
    @import url("blocks/about.less");
    @import url("blocks/news.less");
    @import url("blocks/gallery.less");
    @import url("blocks/footer.less");

     

    И компилировать Grunt нужно именно этот один файл. Тогда все примеси и переменные будут работать без проблем.

  14. Так ведь normalize.css не просто тупо сбрасывает значения по умолчанию, а задает параметры многим элементам для одинакового отображения в различных браузерах. Есть интересная статья про reset.css и normalize.css. https://htmlacademy.ru/blog/64

    Насколько я понимаю, лучше им пользоваться, но перед использованием проверять версию и скачивать последнюю, т.к. проект постоянно развивается и совершенствуется.

  15. Спаны,которые есть у меню, а как раз из-за них пришлось определить классы last и first вместо псевдоклассов они определялись для того что бы сделать разделители как на макете, ну т.е . уже чем блок меню и шире чем текст, ну и для того что бы при наведении затемнение было в пределах одного пункта по всей площади пункта. Да цель благородная была, я ее как видите не добился)))) 

    Что касается БЭМ, то я предположил, что нужно HTML/CSS понять сначала. Ведь еще 5 лет назад люди с успехом верстали без БЭМ.

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

    Ну, если не заморачиваться уровнями вложенности, можно же было сделать таким образом: (a:first-child span),(a:last-child span).

    Не нужно засорять код HTML лишним содержимым. Семантика не на последнем месте. Это же и касается <header><footer><nav> и прочих тегов.

    Я так же, как и Вы нахожусь в стадии обучения. БЭМ использую не потому, что это модная фишка, а потому, что мне так реально удобнее верстать. Я почитал материалы по теме и нашел для себя много интересных вещей. Тут главное найти плюсы для себя, а к остальным вещам можно относиться без фанатизма (это же не религия в конце концов:)). Лучше сразу учиться правильной технике, чем потом переучиваться. По моим ощущениям, трудно на первых двух макетах. Задолбаешься придумывать имена классов, потом это происходит автоматом.

  16. Спасибо. Понял так нужно больше классов определять?

     

    Если придерживаться методологии БЭМ,  то классами нужно все определять. И стили задавать только классам. У такого подхода масса достоинств:

    • при стилизации элемента обращение происходит только к одному селектору;
    • быстрее рендерится страница;
    • четкая структура файлов для css/js;
    • реиспользование кода в любых частях страницы;
    • понимание, к какому файлу стилей относится данный элемент;
    • разделение классов для стилизации и js;
    • не используется каскад стилей.

    Это достоинства, приводимые в описаниях данной методологии. От себя я бы добавил еще и то, что при правильном определении имен классов нет необходимости в комментариях, т.к. и так все видно.

    Для примера возьмем Ваше главное меню:

     

    <div id="wrap_menu" class="clearfix">            

                            <ul id="nav">

                                <li><a href="/"><span class="first">Home</span></a></li>

                                <li><a href="#"><span>Services</span></a></li>

                                <li><a href="#"><span>Support</span></a></li>

                                <li><a href="#"><span>Carrers</span></a></li>

                                <li><a href="#"><span>About</span></a></li>

                                <li><a href="#"><span class="last">Contact</span></a></li>

                            </ul>            

    </div>   

    Смотрим его стилизацию (я сами стили заменил многоточиями, т.к. для понимания сути этого достаточно):

    #nav {

      ...

    }

    #nav li {

      ...

    }

    #nav li a span {

     ...  

    }

    #nav a {

     ...

    }

    #nav .last {

     ...

    }

    и аналогичное меню с заданными классами:

    <nav class="main-header--nav main-header--mobile">                

                        <ul class="main-menu clearfix">

                            <li class="main-menu--item"><a class="main-menu--link link" href='#>about</a></li>
                            <li class="main-menu--item"><a class="main-menu--link link" href="#">projects</a></li>

                            <li class="main-menu--item"><a class="main-menu--link link" href="#">gallery</a></li>

                            <li class="main-menu--item"><a class="main-menu--link link" href="#">houses</a></li>                    

                            <li class="main-menu--item"><a class="main-menu--link link" href="#">general plan</a></li>

                            <li class="main-menu--item"><a class="main-menu--link link" href="#">location</a></li>

                        </ul>

    </nav>

    и вариант его стилизации:

    .main-menu  {

        ...

        &--item  {

            ...

            &:last-child  {

                ...

            }

        }

        &--link  {

           ...

            &:hover  {

                ...

            }

            &:active  {

               ...

            }

        }

    }

    Вопрос: для чего нужен такой уровень вложенности: #nav li a span?

    Единственное, что приходит в голову - это то, что автору хочется как-то для себя структуризировать CSS файл, чтобы было визуально видно, какому элементу задается стиль. Но ведь этого можно добиться по другому. В моем примере стили описаны четко и понятно и нет никакой вложенности (правда такой вид наблюдается при работе с препроцессором Less, но он очень прост в освоении).

     

    Теперь остальные замечания:

    1. Зачем использовать <div class="header"> <div id="footer">? Есть же теги <header><footer><nav> и т.д.

    2. Зачем использовать такие классы: class="first", class="last" если есть псевдоклассы :first-child, :last-child.

    3. Зачем использовать для стилизации идентификаторы? Оставьте их для использования в скриптах.

    • Like 1
  17. Прошу оценить  первую верстку(код) http://mydomain1322.esy.es/Index.html. Жду конструктивной критики.

    Прикольно. Понравилась фишка с ромбами. Вроде ничего сложного, а зато как смотрится! Дизайнерам на заметку:)

    Насчет карты уже сказали, хотя в этом уголке нет никаких маркеров и хвататься не за что.

    А вот с hover можно поработать. Как-то вяло кнопки реагируют на наведение, почти незаметно. Социальные сети так вообще никак. Так же и ссылки в header.

  18. Я бы сверстал пусть даже бесплатно. Время есть. А я ведь и так бесплатно верстаю(учусь ведь))) А тут за деньги можно, чем не вариант?

    Я тоже учусь. Ищу бесплатные psd шаблоны и верстаю. Но, мне кажется, что это все равно, что учиться вождению на полигоне. Права получил, а потом, когда выезжаешь в город с пробками понимаешь, что теория от практики отличается значительно. Поэтому лично я готов на данном этапе не обращать внимания на размер оплаты. На первом месте идет приобретаемый опыт.

  19. Слишком много заказов у меня. Разорваться тоже не получается.

    Сложные заказы давать конечно не буду, а вот типичные лендосы могу.

     

    обычный лендинг, обычный адаптив.

    отправка писем и другие простые вещи.

    плачу 1 т.р. за 8 часов работы.

    Если есть кто, пишите в личку.

     

    Добрый день. Личка пока недоступна. С удовольствием попрактикуюсь в верстке на реальных проектах.

    Пишите dr-s-v-k2015@yandex.ru

  20. Здравствуйте! Могу предложить работу. Если интересует пишите Skype: Sergey_net_it

    Здравствуйте, у меня такая же ситуация, как и у автора темы. Хотелось бы попробовать свои силы на реальных проектах, а не на бесплатных макетах. Вот мои примеры верстки: http://uranostest.aiq.ru http://multipurpose.aiq.ru - фиксированная, http://fitness.aiq.ru - адаптивная. Если Вас устраивает мой уровень и есть реальная работа, хотелось бы с Вами поработать.

    Извиняюсь, конечно за пост в чужой теме, но подумалось, что раз этой теме уже почти год, то для автора она уже не актуальна.

    E-mail: dr-s-v-k2015@yandex.ru

  21. Хотелось бы немного дополнить тему. Использование по-максимуму возможностей CSS рекомендуется еще и в контексте повышения отказоустойчивости клиентских интерфейсов. Т.е. в этой концепции страница должна сохранять максимально адекватное отображение в случае отключения у клиента JS. Правда, совсем без JS обойтись далеко не всегда получится.

×
×
  • 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