vladmih

56 минут назад, d0ublezer0 сказал:

Под картинки, да. Это будут блоки разделов на главной

Вот с картинками https://codepen.io/hesrun/pen/EeYzBz
Тогда не вижу причин не делать это на бутстрапе...
На mansory, вам тоже придется писать доп классы, для высоких и низких блоков.
если вам нужно чтоб и высота менялась вместе с шириной, высоту прописывайте в vw и будет счастье...

https://codepen.io/hesrun/pen/EeYzBz

Сетку такую сделать можно и бутстрапе... Вопрос что будет храниться в блоках.
Если они под картинки, то можно высоту зафиксить, или прописать адаптивные единицы типа wh wv...
Если речь  идет о гибкой высоте блоков, то можно написать скриптик на js который будет прописывать им высоту наибольшему. 

27-й моник. фон вообще не капли не тянется...
Нет ховера на ссылках...

1 час назад, kaspers128 сказал:

Прочитал ваше сообщение, проверил в инспекторе кода и вроде бы все заработало и скролл не прыгает. Но видимо показалось потому, что сейчас перенес изменения на хостинг и скролл все равно прыгает http://vs.company/project4.html .. фигня какая-то  

Странно... До этого работало...
Заметил что скролл происходит именно тогда, когда картинка выравнивается вертикально... Если убрать выравнивание, то скролл не прыгает...

Мне пока в голову приходит два способа решения проблемы...
Костыль на  js.... Или же тупо вытянуть картинку по 100%, и прописать object-fit...

В этом перфект пикселе много странностей...
Были несколько проектов где перфект пиксель для них было очень важно...
Так приходилось даже у текстов подгонять letter-spacing, и то сходилось не полностью, т.к. рендер шрифтов в вебе и псд макетах не был одинаков...

Как сделать нижний клонтитул на всех страницах?
Делаю через runing позицию, а он ее тупо не ставит куда я указываю...

У кого-то был  опыт использования этих свойств? На W3C, по этому документация есть, но на практике я такого не у кого не видел... Это вообще работает?
Прикрепил пример, того о чем я говорю...

print.html

1 час назад, Alexej сказал:

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

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

8 часов назад, Alex Def сказал:

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

Охренеть за 6 лет практики, даже не знал что блоки с прозрачностью не накладываются фонами друг на друга((((
Смотрю, и думаю че за магия нах происходит, должны же накладываться... Потом в Вашем примере прописал цвет в rgba и они накладываются.

Даже как-то стыдно за себя... Или очередное подтверждение выражению "век живи, век и учись"...

52 минуты назад, Alex Def сказал:

Точно так. Изменил разметку, использовал оба псевдоэлемента для центрального блока. Спасибо.

Результат в студию! С боковыми ясно, интересно как в центральном сделали скругление по средине

17 часов назад, uppercase_css сказал:

Здравствуйте.

У меня на сайте есть слайдер на CSS3.

Реально ли сделать тач скролл на CSS3   или все таки без JS никак?

Без js никак...
Можете взять за основу owl или swiper slider за основу, они в мобиле тач поддерживают.

1 час назад, exoty сказал:

а это, как я понял, вордпресс тема?

Нет, скорее всего это кастомная тема, которую накидовали на цмс, или свой бэкэнд, можно посмотреть точно...
А кастомная потому, что именования классов идет по БЭМу, с префикса "cb-" , сокращение от названия сайта.

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

https://transfonter.org/ Тут заливаете ваш шрифт, он вернет вам архив в котором будет css, и шрифты других форматах типа woff, svg и т.д.
Переносите сгенерированные шрифты в папку с проектом, а css вставляете в верху своего, и главное правильно пропишите пути к файлам шрифтов.

В 08.06.2018 в 16:04, klierik сказал:

Здравствуйте.

Вам, по сути, надо отлавливать события на мобильных устройствах. Если на desktop у вас срабатывает :hover, то на mobile следует обрабатывать .click()

Вот пример, который будет работать только в Mobile (из-за ф-ии isMobile() )

Мне кажется, можно даже отлавливать видимость подменю через is(:hidden), если скрыт то открываем, если открыт то делаем переход

в хроме в инспекторе можно включить отображение на моб. устройствах, этого в принципе достаточно, за исключением каких либо ньюансов, которые можно увидеть только мобильном сафари...
http://take.ms/jfQsF

Не понял конечно в чем прикол, но если у родителя убрать флекс, то не прыгает...
Как вариант решения, убрать флекс и выравнивать вертикально картинки иначе... Например через трансофрм или псевдо класс.
Или если оставить так, то большому изображения сделать сделать высоту и ширину по 100% и прописать object-fit: cover, будет работать как если бы картинку прописали бэкграундом с размером cover.
 

5 часов назад, Oloref сказал:

Объясните пожалуйста, что входит в работу html, css верстальщика. Также интересует вопрос: нужно ли делать формы или popUp окна, а если и делать, то каким функционалом мне их наделять будучи html, css верстальщиком?

Если речь идет, только о верстке, вы должны и модалки уметь сверстать в том числе.
Или же если используется сторонняя библиотека (модалки, слайдеры и т.д.), ваша задача привести их в вид который указан в макете.
Так же Вы должны если первое время не знать, то знакомство с фреймворками у Вас не должно вызывать сложностей.
Сразу же предлагаю привыкать использовать препроцессоры (советую sass), ибо если нужна будет глубокая кастомизация фреймворка, то там Вам точно не обойтись... Ибо лучше менять что-то в одном месте нежели копаться в огромном цсс файле и менять все ручками...

И наш любимый JS, без него верстальщику уже никуда... Его вам нужно знать, хотя бы базу.
Чтоб настроить нужный вам плагин на нужную работу. Задачи бывают очень разные. И знанием одного html и css, вам не обойтись совсем...

В мобиле, точно так же обрабатывайте на клик, и разворачивайте список внутри списка...

5 минут назад, klierik сказал:

Здравствуйте.

Вы перепутали подход с картинкой и с фоновым изображением. Попробуйте вот так:

.wallpaper {
  width: 100%;
}

 

Блок по умолчанию и так 100%, у него картинка меньше размера блока...

В 21.05.2018 в 19:48, Alisa1711 сказал:

А почему? В принципе они валидны и иногда могут помочь решить проблему. Например, в обсуждаемом макете отрицательные маргины могли бы решить проблему "заезжания" фон в интро секции "Наши торты". Или их юзанье может как-то аукнуться?

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

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

В 11.05.2018 в 23:22, Alisa1711 сказал:

Мне кажется, что я нашла не лучшее решение для огромных тортов на фоне. Дивы с абсолютным позиционированием, из-за чего пришлось прописать body  overflow-x: hidden

Да действительно не лучшее решение... скрытие прокрутки горизонтальное это плохой тон, особенно в вашем случае, т.к. это фикс лейаут, а если кто-то откроет страничку в размере меньшего вашего контейнера, то попросту не увидит край сайта.

Большой торт вам было бы проще добавить фоном в section и там позиционировать через background-position , и тем самым вам не нужен блок с этим тортом и соответственно убрать overflow-x hidden

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Стали бы вы делать плиточную раскладку категорий тортов grid'ами или это "микроскопом гвозди"? 

Можно сделать и гридами, и флексами, и float блоками, разница в простоте подхода и поддержкой браузера если есть такие требования... Можно и гриды, как для практики, через годик, можно будет уже полным ходом их использовать без зазрения совести))))

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Как вы относитесь к br в верстке? (-:  Например, в блоке выбора размера торта:

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

В 11.05.2018 в 23:22, Alisa1711 сказал:

Правильно ли я понимаю, что если мне захочется оживить слайдеры, то придется немного менять разметку и стили?

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

В 11.05.2018 в 23:22, Alisa1711 сказал:

Меня беспокоит организация маргинов и паддингов. По-моему, она "некрасивая". Есть такое понятие "красивая организация отступов"?

Главное поменьше юзать отрицательные значения в маржины...
 

https://packagecontrol.io/packages/CSS Unminifier   оно? 

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

похож на печатную машинку, че-то типа такого http://www.fontriver.com/font/teletype_1945_1985/

А для этого существует сборщики свг спрайтов на галпе или гранте...
Он берет кучу свг-шек и собирает ее в одну, это все делается не вручную, а автоматизированно.

А насчет просматривать спрайт, открываешь свг файл в браузере, и видишь все свои иконки. Если не знаешь имен, через инспектор смотришь айди символа и линкуешь его в файл.

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

$('input').keyup(function(){
  pass = $(this).val();
  if (pass === 'работает') {
    window.open('http://google.com');
  }
})

5 минут назад, vladmih сказал:

https://codepen.io/hesrun/pen/erMWzR