Sergey_K_2015

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

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

Убирал выравнивание по центру и забыл подключить в окончательной сборке. Исправлено. макет такой, старался придерживаться http://prnt.sc/a8gy2q

Сверстал первый лендинг http://bouncy.aiq.ru Решил освоить Bootstrap, первая верстка с ним. В описаниях понравились его возможности в плане адаптивной верстки, встроенных плагинов. Постарался использовать по-максимуму его возможности (сетка, слайдеры, меню, кнопки). Ну, и первая моя попытка работать с анимацией. Подключил wow и animate.css. Прошу высказать замечания как по использованию Bootstrap, так и анимации. По анимации столкнулся с проблемой - на мобильных устройствах подтормаживает. Посоветуйте, как правильно сделать? Может на маленьких экранах вообще отключать анимацию? Как это принято в практике?

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

Задайте родительскому элементу нужную ширину и выровняйте его по центру. Примерно так: .blocks { width:70%; margin: 0 auto; } Т.к. margin у картинок задан в пикселях, а ширина в процентах, при уменьшении ширины родительского блока может образоваться вообще 2 колонки. Нужно смотреть и регулировать ширину. Ну и почистите код, а то там присутствуют остатки табличной разметки и ul вообще не к месту.

Я так понимаю на css это не возможно? На CSS невозможно. hover, focus и т.д. на родительские элементы не действуют.

С БЭМ стили задавать удобнее. В LESS получается конструкция типа: .блок { ... &__элемент1 { ... &_модификатор { ... } } &__элемент2 { ... } }

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

Натягивают верстку на WP за 12 минут.

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

Футеру Вы размеры задали, теперь растяните вложенный <div class="footer_img"> на весь размер родительского блока (width: 100%; height: 100;). А какой размер у p1.png? Насколько он совпадает с размерами блока, в который его помещаете? Попробуйте задать .footer_img следующие параметры: background-size: cover (либо 100% 100%) - это масштабирование изображения background-position: top (выравнивание по верхнему краю)

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

Все эти эффекты описаны не для фонового изображения, а для самого блока, в котором содержится это изображение. И если в этом блоке есть, к примеру, текст, то он тоже увеличится (эффект плавного увеличения). http://webgyry.info/svet-css- описывается создание эффекта свечения. http://beloweb.ru/novichkam/plavnoe-uvelichenie-izobrazheniya-pri-navedenii-na-chistom-css3.html- плавное увеличение при наведении.

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

Внимательно посмотрите, как у Вас организованы файлы 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 нужно именно этот один файл. Тогда все примеси и переменные будут работать без проблем.

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

Ну, если не заморачиваться уровнями вложенности, можно же было сделать таким образом: (a:first-child span),(a:last-child span). Не нужно засорять код HTML лишним содержимым. Семантика не на последнем месте. Это же и касается <header><footer><nav> и прочих тегов. Я так же, как и Вы нахожусь в стадии обучения. БЭМ использую не потому, что это модная фишка, а потому, что мне так реально удобнее верстать. Я почитал материалы по теме и нашел для себя много интересных вещей. Тут главное найти плюсы для себя, а к остальным вещам можно относиться без фанатизма (это же не религия в конце концов). Лучше сразу учиться правильной технике, чем потом переучиваться. По моим ощущениям, трудно на первых двух макетах. Задолбаешься придумывать имена классов, потом это происходит автоматом.

Если придерживаться методологии БЭМ, то классами нужно все определять. И стили задавать только классам. У такого подхода масса достоинств: при стилизации элемента обращение происходит только к одному селектору;быстрее рендерится страница;четкая структура файлов для 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. Зачем использовать для стилизации идентификаторы? Оставьте их для использования в скриптах.

Можно. Я для эксперимента так делал. На странице оба слайдера на CSS http://multipurpose.aiq.ru/ Используются элементы форм (input, label).

Прикольно. Понравилась фишка с ромбами. Вроде ничего сложного, а зато как смотрится! Дизайнерам на заметку Насчет карты уже сказали, хотя в этом уголке нет никаких маркеров и хвататься не за что. А вот с hover можно поработать. Как-то вяло кнопки реагируют на наведение, почти незаметно. Социальные сети так вообще никак. Так же и ссылки в header.

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

Добрый день. Личка пока недоступна. С удовольствием попрактикуюсь в верстке на реальных проектах. Пишите dr-s-v-k2015@yandex.ru

Здравствуйте, у меня такая же ситуация, как и у автора темы. Хотелось бы попробовать свои силы на реальных проектах, а не на бесплатных макетах. Вот мои примеры верстки: http://uranostest.aiq.ru http://multipurpose.aiq.ru - фиксированная, http://fitness.aiq.ru - адаптивная. Если Вас устраивает мой уровень и есть реальная работа, хотелось бы с Вами поработать. Извиняюсь, конечно за пост в чужой теме, но подумалось, что раз этой теме уже почти год, то для автора она уже не актуальна. E-mail: dr-s-v-k2015@yandex.ru

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