Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin
Last active October 10, 2019 11:17
Show Gist options
  • Save nikolai-shabalin/12cd23739d9a1ae41ccef1de4152f870 to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/12cd23739d9a1ae41ccef1de4152f870 to your computer and use it in GitHub Desktop.
Вопросы к разделу «Декоративные элементы»

Вопросы к разделу «Декоративные элементы»

Позиционирование и z-index

Можно ли в слайдере глейси размещать текст на мороженом и кнопку с помощью позиционирования? Если это некорректный способ, нужно использовать z-index?

Попробуйте расположить текст и кнопку с помощью флексов, а картинку с мороженым вставить фоном. В этом случае вам не понадобится ничего позиционировать. Но если захочется, то да — этo position: absolute + z-index, только не забудьте проверить вёрстку на переполнение контентом: текст над кнопкой может быть не только в две, но и в одну, три и больше строк.

Что важнее: 100% соответствие макету или кратность 5px?

Здравствуйте! Иногда на макетах встречаются маргины, паддинги и др. элементы с размерами не кратными 5-ти пикселям (9px, 47px, 31px и т.д.). На прошлом потоке Александр Першин говорил, что это ошибки дизайнеров. Собственно вопрос: Что важнее при верстке на нашем курсе, и на работе: 100% соответствие макету или кратность 5-ти пикселям?

Кратность или некратность 5px ничего не говорит о качестве дизайна или вёрстки. На лекции про графику, мы вам расскакзывали, что расстояние от текстовых блоков зависит от высоты строки и в таких ситуациях отступ может быть 15px, но нам приходится делать его 21px, чтобы попасть в визуальное соответствие. Ответ получается простой: 100% соответствие макету.

Позиционирование, left, right и прокрутка

Добрый день. Вопрос по поводу абсолютного позиционирования. Если использовать свойство left с отрицательным значением, то блок уйдет налево, но прокрутки не появится. Если же right, то прокрутка появляется. Почему это так и как это использовать?

Докопаться почему именно так может быть и было интересно, но большой пользы от этого не будет. Так работают все браузеры, с этим мы живём. Использовать это нужно только в том смысле, что если вам нужно по какой-то причине что-то спрятать за пределами экрана, то делайте это слева, а не справа.

Как сделать слайдер в Глейси?

Как сделать слайдер в Глейси? В интерактивных курсах рассмотрен вариант с флоатами. Можно ли его использовать? Если использовать флексы и overflow: hidden, то все расползается и элементы никак не хотят выстраиваться в ряд, друг под другом. Изображения с мороженым экспортировала в png – нужна прозрачность. А как быть с эффектом подсветки, который появляется на всех слайдах? Это декоративный эффект в CSS или его также экспортировать в png для каждого слайда?

Слайдер вам лучше обсудить с вашим наставником. Тут не будет какого-то совета, а вам скорее всего нужна вёрстка с примером.

@lehardd
Copy link

lehardd commented Oct 5, 2019

@lazyrider я увеличил размер карты сделал overflow: hidden;
таким образом кнопки уехали за пределы родительского блока и были скрыты. решение не совсем красивое конечно, но визуально красиво.

@lazyrider
Copy link

@lehardd , спасибо за совет! Так как других предложений не поступило, позаимствую твое решение! Спасибо!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment