Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите как сверстать данный элемент / 19 сообщений из 19, страница 1 из 1
24.10.2017, 14:46
    #39541109
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть.
С тенями, градиентом, и нижней частью проблем нет, но вот как реализовать верхнюю часть - ума не приложу.
border-radius c параметрами через "/" не дает резкого закругления по краям, псевдоэлементами придется подгонять диагональный градиент, что при адаптации создаст кучу гемороя. Картинкой сделать нельзя так как содержимое может меняться. Есть какое-то менее болезненное решение чем через псевдоэлементы?

WBW&WBR - Alexandr
...
Рейтинг: 0 / 0
24.10.2017, 14:56
    #39541122
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
AlexZaw,

canvas или svg допускается техзаданием?
...
Рейтинг: 0 / 0
24.10.2017, 15:36
    #39541166
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89AlexZaw,

canvas или svg допускается техзаданием?

допускается, вот только если с svg я еще немного знаком, то canvas даже не пробовал :(
...
Рейтинг: 0 / 0
24.10.2017, 16:46
    #39541225
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89,

Поддерживаю вариант с svg.
...
Рейтинг: 0 / 0
24.10.2017, 18:14
    #39541271
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
можно хотя бы намекнуть какими фигурами его рисовать? не накладывать же друг на друга линии, эллипсы... да и как потом все это масштабировать?
...
Рейтинг: 0 / 0
24.10.2017, 20:06
    #39541310
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
...
Рейтинг: 0 / 0
24.10.2017, 20:13
    #39541311
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
...
Рейтинг: 0 / 0
24.10.2017, 20:54
    #39541324
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
вадяAlexZaw,

такая форма устроит?

если бы устроила я бы тут не спрашивал :)
пока вышел из положения следующим образом:
Код: html
1.
2.
3.
<div class="promo">
  <div class="back"></div>
</div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
  .back{
    background: repeating-linear-gradient(-45deg, #8852cd, #8852cd 1px, transparent 1px, transparent 3px);
    background-color: #854ecc;
    border-radius: 50% 50% 8px 8px / 8px 8px;
    width: 99%;
    height: 20px;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
  }
  
 .promo { position: relative;
width: 500px;
height: 100px;
  padding-top:25px;
  box-sizing: border-box;
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #8852cd, #8852cd 1px, transparent 1px, transparent 3px);
  background-color: #854ecc;
  border-radius:8px;
  color: #fff;
  box-shadow: 1px 2px 79px rgba(0, 0, 0, .26);


буду думать дальше
...
Рейтинг: 0 / 0
25.10.2017, 02:08
    #39541382
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
оборачивать блок в блок не обязательно можно посмотреть в сторону before after
...
Рейтинг: 0 / 0
25.10.2017, 10:29
    #39541495
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
AlexZaw,

сложность наверное в том, что при изменении размеров главного контейнера, надо динамически менять border-radius . Можно извернуться в CSS через проценты, но масштабирование в SVG проще   https://jsfiddle.net/8umv3yoc/3/
...
Рейтинг: 0 / 0
25.10.2017, 10:47
    #39541510
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89, верхние радиусы не по тз.
...
Рейтинг: 0 / 0
25.10.2017, 11:06
    #39541534
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
Малыхин Сергейоборачивать блок в блок не обязательно можно посмотреть в сторону before after
Возможно вы и правы, и не стоит усложнять себе жизнь, в данной задаче можно и ПЭ обойтись, но если усложнить задачу, сделать на фоне не градиент а какой-то рисунок, например фотографию, ну и увеличить радиус верхней дуги, чтобы туда больше изображения помещалось. Как тогда выходить из ситуации?
Это уже чисто для себя интересуюсь :)
...
Рейтинг: 0 / 0
25.10.2017, 11:57
    #39541572
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
AlexZaw,

И всё же интересно, это академическая задача, или практическая? С практической точки зрения, решать эту задачу на CSS это натурально заниматься вредительством :)
...
Рейтинг: 0 / 0
25.10.2017, 12:31
    #39541604
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
вадяuser89, верхние радиусы не по тз.Я знаю
Просто решил показать, как легко масштабировать с помощью SVG.
...
Рейтинг: 0 / 0
25.10.2017, 12:38
    #39541615
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89вадяuser89, верхние радиусы не по тз.Я знаю
Просто решил показать, как легко масштабировать с помощью SVG.
ну тогда это. интересней было б реализовать с помощью css переменных
...
Рейтинг: 0 / 0
25.10.2017, 13:25
    #39541684
AlexZaw
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
hVosttAlexZaw,

И всё же интересно, это академическая задача, или практическая? С практической точки зрения, решать эту задачу на CSS это натурально заниматься вредительством :)

Это оформление формы из реального макета. Верстаю его для себя, чисто попрактиковаться.
Ну а с добавлением фоновой фотографии это уже я усложнил, просто мне интересно как быть в таком случае
...
Рейтинг: 0 / 0
25.10.2017, 14:43
    #39541798
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
вадя,

IE11 не поддерживает переменные в CSS, а Edge частично. Да и hVostt выше говорил, что решать эту задачу на CSS это натурально заниматься вредительством :)
Таки вариант на SVG c 4 круглыми углами и дугой наверху: https://jsfiddle.net/8umv3yoc/4/
...
Рейтинг: 0 / 0
25.10.2017, 14:51
    #39541806
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89,

Тут скорее всего тут надо делать кривыми, потому что закругления не переходят в дугу плавно, из-за разницы в радиусах, тут нужна ручная подгонка.
...
Рейтинг: 0 / 0
25.10.2017, 16:45
    #39541909
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите как сверстать данный элемент
user89IE11 не поддерживает переменные в CSS, а Edge частично.ну тут надо рассматривать область применения. не факт что на ослов надо рассчитывать.

user89что решать эту задачу на CSS это натурально заниматься вредительством :) тренировка ума - это не вредительство. если кто-то сможет сделать это с поучусь у него.
user89Таки вариант на SVG c 4 круглыми углами и дугой наверхуэто такая же тренировка ума и проба нового.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите как сверстать данный элемент / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]