• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Решение вопроса по теме box-shadow (Резиновый box-shadow)
Решение вопроса по теме box-shadow
Norton
 Понедельник, 06 Февраля 2017, 11:55 | Сообщение 1
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
 Поставил резиновый box-shadow, но не получается сделать внутри бокса отступы для содержимого...
css;
Код
  .box4 {
  position: relative;
  width: auto;
  height: auto;
  margin: auto;
  box: center;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box4:before {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 12px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 13px rgba(0, 0, 0, 0.6);
    -webkit-transform: rotate(-3deg) skew(-0deg);
     -moz-transform: rotate(-3deg) skew(-0deg);
     -ms-transform: rotate(-3deg) skew(-0deg);
     -o-transform: rotate(-3deg) skew(-0deg);
     transform: rotate(-3deg) skew(-0deg);
    }
.box4:after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 12px;
    right: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 13px rgba(0, 0, 0, 0.6);
    -webkit-transform: rotate(3deg) skew(0deg);
     -moz-transform: rotate(3deg) skew(0deg);
     -ms-transform: rotate(3deg) skew(0deg);
     -o-transform: rotate(3deg) skew(0deg);
     transform: rotate(3deg) skew(0deg);
}

Скриншот
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 12:33 | Сообщение 2
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
 My WebPage

попробуй
Код
box-sizing: border-box;
    padding: 20px;


Сообщение отредактировал
Nikas - Понедельник, 06 Февраля 2017, 12:38
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 12:46 | Сообщение 3
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
 Nikas - с левой стороны встало хорошо , а вот с правой съехало...
Скриншот
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 12:50 | Сообщение 4
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
 а так?
Код
box-sizing: border-box;margin:10px 20px; 30px
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 12:52 | Сообщение 5
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
Код
padding: 2cm 4cm 3cm 4cm;
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 13:07 | Сообщение 6
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
 Спасибо помогло))
Есть вопрос;
1. Как вывести иконки Awersome
2. Добавить информационные поля,что бы автоматом выводились при добавлении нового материала (в частности объявления)
Подробнее на скриншоте
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 13:17 | Сообщение 7
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
 это прочтите вот тут
а потом там "скачать" с право
Прикрепления: 0650122.jpg (63.6 Kb)


Сообщение отредактировал
Nikas - Понедельник, 06 Февраля 2017, 13:19
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 13:20 | Сообщение 8
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
 Font Awesome - я скачал,прошу прощения,что дальше делать с этой папкой font-awesome-4.7.0,её нужно в корень кинуть? и дальше что нужно....?
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 13:24 | Сообщение 9
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
Цитата Norton ()
Font Awesome - я скачал,прошу прощения,что дальше делать с этой папкой font-awesome-4.7.0,её нужно в корень кинуть? и дальше что нужно....?


закачать все папки в корень сайта



потом подключить стили на все страницы сайта

Код
<link rel="stylesheet" href="/css/font-awesome.min.css">


или в начало вашего css

Код
@import url('../css/font-awesome.css')
Прикрепления: 6816847.jpg (12.2 Kb)
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 13:29 | Сообщение 10
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
 Поля добавил - но дополнительная информация не вывелась...((
Скнишот
Скриншот
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 13:31 | Сообщение 11
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
Цитата Norton ()
Поля добавил - но дополнительная информация не вывелась...((


прописали поля на странице материала и комментария?
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 13:37 | Сообщение 12
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
Цитата Nikas ()
потом подключить стили на все страницы сайта

Закачал все папки, и подключил <link rel="stylesheet" href="/css/font-awesome.min.css"> -теперь что дальше нужно делать?

Добавлено (06.02.2017, 13:37)
---------------------------------------------

Цитата Nikas ()
прописали поля на странице материала и комментария?

Нет , а как это сделать?
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 13:38 | Сообщение 13
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
Цитата Norton ()
Закачал все папки, и подключил -теперь что дальше нужно делать?


выбрать нужную иконку

соответственно они к примеру вставляются так

Код
<i class="fa fa-address-book" aria-hidden="true"></i>


на странице иконки есть код
[ UA ]
Norton
 Понедельник, 06 Февраля 2017, 13:45 | Сообщение 14
Оффлайн
Пользователи
Сообщений:59
Награды: 1
« 0 »
Цитата Nikas ()
соответственно они к примеру вставляются так

я так полагаю что у меня этот код отвечает
Код
<div class="advinfo">
<span class="e-date"></span>
<span class="e-author">$AUTHOR_NAME$</span>
<span class="e-actual">Актуально до $PLACED_TILL$</span>
<span class="rating" style="padding-top:7px;"><?$RSTARS$('20','/images/stars.png','1','float')?></span>
</div>

Куда именно сюда нужно вставлять, что бы не только иконка выводились, и вывелся названия города кто годовал объявления!
[ UA ]
Nikas
 Понедельник, 06 Февраля 2017, 13:47 | Сообщение 15
Оффлайн
Проверенные
Сообщений:229
Награды: 3
« 112 »
Код
<div class="advinfo">
<span class="e-date"></span>
<span class="e-author"><i class="fa fa-address-book" aria-hidden="true"></i>
$AUTHOR_NAME$</span>
<span class="e-actual"><i class="fa fa-address-book" aria-hidden="true"></i>
  Актуально до $PLACED_TILL$</span>
<span class="rating" style="padding-top:7px;"><?$RSTARS$('20','/images/stars.png','1','float')?></span>
</div>
так например
[ UA ]
Форум » Веб-разработка » Вопросы про uCoz » Решение вопроса по теме box-shadow (Резиновый box-shadow)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: