PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
rownong
Отправлено: 26 Апреля, 2020 - 20:36:58
Post Id


Новичок


Покинул форум
Сообщений всего: 50
Дата рег-ции: Нояб. 2012  


Помог: 0 раз(а)




Сверстал такую страницу https://yadi[dot]sk/i/-Xjp4TVXmoPU2Q
Хочу туда разместить фильтры и диаграмму на плитке https://yadi[dot]sk/i/qFsfZVnHjrZKuw

Вопросы:
1. Я верстал указывая отступы по пикселям. Как понимаю корректно будет смотреться только на моем мониторе. Чтобы на остальных мониторах норм смотрелось ка нужно верстать, указать отступы в %?
2. Как скруглять края у рамок https://yadi[dot]sk/i/4R643bmGorBIlw
3. Как сделать выпадающий панели у фильтров с набором полей https://yadi[dot]sk/i/oh-wPJFK0AZCrg (с плавным движением вниз при раскрытии)
 
 Top
Vladimir Kheifets
Отправлено: 27 Апреля, 2020 - 08:03:24
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 543
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 26 раз(а)




rownong пишет:
Сверстал такую страницу https://yadi[dot]sk/i/-Xjp4TVXmoPU2Q
Хочу туда разместить фильтры и диаграмму на плитке https://yadi[dot]sk/i/qFsfZVnHjrZKuw

Вопросы:
1. Я верстал указывая отступы по пикселям. Как понимаю корректно будет смотреться только на моем мониторе. Чтобы на остальных мониторах норм смотрелось ка нужно верстать, указать отступы в %?
2. Как скруглять края у рамок https://yadi[dot]sk/i/4R643bmGorBIlw
3. Как сделать выпадающий панели у фильтров с набором полей https://yadi[dot]sk/i/oh-wPJFK0AZCrg (с плавным движением вниз при раскрытии)

Добрый день!
Ответы:
1. не указать одинаковый отступы в %
CODE (html):
скопировать код в буфер обмена
  1. /*--- content центр. по горизонтале --*/
  2. .content{
  3. display:inline-block;
  4. margin: 0 auto;
  5. }

2. закругленная рамка и тень, если нужна
CODE (html):
скопировать код в буфер обмена
  1. /*--- закругленная рамка 5px -------*/
  2. .RB{
  3.         border: 1px solid #85A0C9;
  4.         border-radius: 5px;
  5.         -webkit-border-radius:5px;
  6.         -moz-border-radius: 5px;
  7. }
  8. /*-- тень, если нужна -----------*/
  9. .BS{box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);}
CODE (html):
скопировать код в буфер обмена
  1. <div class="content RB BS"></div>

3. применить CSS transition
http://gnatkovsky[dot]com[dot]ua/plavno-[dot][dot][dot]moshhyu-css[dot]html
Удачи!

(Отредактировано автором: 27 Апреля, 2020 - 08:05:35)

 
 Top
rownong
Отправлено: 27 Апреля, 2020 - 13:15:45
Post Id


Новичок


Покинул форум
Сообщений всего: 50
Дата рег-ции: Нояб. 2012  


Помог: 0 раз(а)




Спасибо за ответы.

1. Не получил ответ на свой вопрос. Мне верстать указывая отступы не в пикселях а %.
Можно ли размеры блоков указывать в %?

2. Не знал про тени CSS спасибо.
Только не пойму как оставить тень только снизу https://yadi[dot]sk/i/Z9hp5bhGcVWd5A чтобы по бокам не было видно.
Настройки выставил сейчас
box-shadow: 0 5px 10px 3px #b5b5b5;
 
 Top
Albert
Отправлено: 08 Июня, 2020 - 16:13:21
Post Id


Новичок


Покинул форум
Сообщений всего: 12
Дата рег-ции: Июнь 2020  
Откуда: Украина


Помог: 0 раз(а)




rownong пишет:
1. Не получил ответ на свой вопрос. Мне верстать указывая отступы не в пикселях а %.
Можно ли размеры блоков указывать в %?

Отступы в процентах - плохая идея. В процентах лучше указывать размеры блоков. А выравнивать их лучше всего с помощью flexbox.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB