АГ
Ничего не понял. Визуально вертикально это когда высота больше ширины?.
Можно сделать как вы хотите только вариант с фиксированой шириной/высотой фона и контентного блока.
Иначе тут сложная математика и жабаскрипт поможет
Size: a a a
2020 October 01
Q
Вопрос знатокам мат-части.
подскажите как расположить контент визуально вертикально по центру?
Так чтоб расстояние от краёв контента до БЕЛЫХ линий было одинаковым?
Решал кто-то подобный кейс?
Оно всегда будет разным (большим с низу если угол как на скрине, большим сверху если угол противоположно направлен).
Спасибо
подскажите как расположить контент визуально вертикально по центру?
Так чтоб расстояние от краёв контента до БЕЛЫХ линий было одинаковым?
Решал кто-то подобный кейс?
Оно всегда будет разным (большим с низу если угол как на скрине, большим сверху если угол противоположно направлен).
Спасибо
учитывая что это обычная картинка, тут только на глаз)
ZS
Ничего не понял. Визуально вертикально это когда высота больше ширины?.
вот то, как дизайнер расчитал визуальный центр по вертикали. я же в верстке создал структуру как показал на предыдущем скриншоте. вопрос в математике централизации, можно ли ее сделать адекватно в css? в условиях 100vw ширины фона я юзаю расчитанное значение тангенса чтоб получить норм верстку как на скрине прошлом. но что касается централизации контента внутри контейнера с макс шириной, к тому же плавающей на адаптиве, тут вот я полный ахтунг. Забубенил жестко отступ контенту снизу дополнительно в 50пкс и забил..но неужели подобные кейсы не имеют решений ?
AP
вот то, как дизайнер расчитал визуальный центр по вертикали. я же в верстке создал структуру как показал на предыдущем скриншоте. вопрос в математике централизации, можно ли ее сделать адекватно в css? в условиях 100vw ширины фона я юзаю расчитанное значение тангенса чтоб получить норм верстку как на скрине прошлом. но что касается централизации контента внутри контейнера с макс шириной, к тому же плавающей на адаптиве, тут вот я полный ахтунг. Забубенил жестко отступ контенту снизу дополнительно в 50пкс и забил..но неужели подобные кейсы не имеют решений ?
если размеры полосок известны, можно их перекрыть паддингами, тогда оставшееся место флекс сам поделит
ZS
Вопрос знатокам мат-части.
подскажите как расположить контент визуально вертикально по центру?
Так чтоб расстояние от краёв контента до БЕЛЫХ линий было одинаковым?
Решал кто-то подобный кейс?
Оно всегда будет разным (большим с низу если угол как на скрине, большим сверху если угол противоположно направлен).
Спасибо
подскажите как расположить контент визуально вертикально по центру?
Так чтоб расстояние от краёв контента до БЕЛЫХ линий было одинаковым?
Решал кто-то подобный кейс?
Оно всегда будет разным (большим с низу если угол как на скрине, большим сверху если угол противоположно направлен).
Спасибо
тут физически секция это то что в красный обведено, секции заданы паддинги сверху и снизу рассчитанные исходя из тангенса, так чтоб контент секции, залитый синим упирался в края скашиваемого фона, обрамленного в белую рамку.
Как видите, отношений блока контента секции со скашиваемым фоном напрямую не имеется, в то время как для вертикального центрирования визуального дизайнер таки оперирует связью с ним.
Как видите, отношений блока контента секции со скашиваемым фоном напрямую не имеется, в то время как для вертикального центрирования визуального дизайнер таки оперирует связью с ним.
O
<style>
a.button25 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button25:active {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}
</Style>
<a href="#" class="button25">ПУСК</a>
ZS
Переслано от Zhanarys Sairanbekov
Ребят, как можно сделать так чтобы цвет текста был инверсивный тому что находится позади него?
O
Есть вот такая кнопка из примеров. background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17); это отвечает за цвет фона кнопки, у меня не получается изменить его на черный.
O
подставляю туда #000000 и она стает прозрачной
v
Какое место ты хочешь сделать черным?
v
У меня работает
O
Какое место ты хочешь сделать черным?
Чтобы все красное стало черным
v
Чтобы все красное стало черным
А нельзя просто background: #000; ?
O
Вот так идеально
O
бывает заткнусь на какой-то ерунде....
O
А не у кого случайно нету шаблонов сигнальной лампы? Чтобы включенное состояние и нет.