ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Синий по оттенку вид материала Redsan для uCoz

Синий по оттенку вид материала Redsan для uCoz

Сразу заметно, что первое это по дизайну необычный и Синий по оттенку вид материала для uCoz, который предназначен для новостей а также для модуля файлы. Но, смотря на его, то можно с уверенностью сказать, что где один контейнер, там он будет отлично смотреться. А больше всего подойдет под один модуль, который называют блог и сама его ширина материала и вывод функционала на все это указывает. Ставить только на светлый фон, так как имеет он небольшие тени, что и придает ему неординарность в стилях. Что по мне, то закругленные углы ему больше подойдут и сама натура будет отлично отражаться, так как основном интернет ресурсы заточены под такое, это меньше угловатости. Но все можно исправить стилем border-radius который может сделать его оригинальней.

Выбираем вид, куда будем прописывать скрипт:

Код

<div class="post">
  <div class="post-header">
  <img class="post-img" src="$IMG_URL1$" alt="$TITLE$">
  <div class="post-author">
  <img class="post-hover" src="$USER_AVATAR_URL$" alt="$TITLE$">
  <a href="#">Admin</a>
  </div>
  <div class="post-title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  $MODER_PANEL$
  </div>
  </div>
  <div class="post-content">
  $MESSAGE$
  </div>
  <div class="post-counters">
  Дата добавления <span>$DATE$</span>
  Автор <span>$AUTHOR_NAME$</span>
  Комментариев <span>$COMMENTS_NUM$</span>
  Просмотров <span>$READS$</span>
  <a href="$ENTRY_URL$">Читать</a>
  </div>
  </div>

CSS:

Код

.post {
  margin: 20px 0px;
  background: #F5F5F5;
  border: 1px solid #9A9992;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.post-content {
  padding: 10px;
}
.post-img{
  width: 100%;
  max-height: 300px;
  overflow: hidden;
}
.post-author {
  position: absolute;
  top: 100px;
  left: 319px;
}
.post-author img {
  border-radius:100%;
  border: 2px solid #FFFFFF;
}
.post-author a, .post-author img {
  display: block;
}
.post-author a{
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 1em black;
  font-weight: bold;
  font-size: 16px;
}
.post-author a:hover{
  color: white;
  text-decoration: none;
}
.post-title {
  padding: 10px;
  background: #2693D3;
}
.post-title a {
  color: white;
  font-weight: bold;
}
.post-title img{
  float: right;
}
.post-counters {
  padding: 10px;
  border-top: 1px solid #9A9A93;
}
.post-counters span {
  font-weight: bold;
  border-right: 1px solid #9A9A93;
  margin-right: 10px;
  background: #2693D3;
  border-radius: 5px;
  color: white;
  padding: 5px;
}
.post-counters a {
  float: right;
  background: #2693D3;
  color: white;
  padding: 10px 15px;
  margin: -10px;
}
.post-counters a:hover{
  color: white;
  text-decoration: none;
}

Не одной ссылки, все основном построено на css.

26 Июня 2015 Просмотров: 1813 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: Kosten 26 Июня 2015 22:50¹ 0 Если есть варианты как закруглить углы, то плиз в тему и так скажем поделитесь, по мне его можно отлично доработать. Canon 06 Сентября 2015 03:18² 0 Да этот и видел, если сравнить то можно сказать они только похоже по самому каркасу а вот по дизайну нет, здесь как то коряво сделаны обводы и не красиво смотрится и их убрать и совершенно другое измерение.