• Страница 1 из 2
  • 1
  • 2
  • »
Форум » Общий раздел форума » Просьба с услугами » Где найти такой вид материала для сайта
Где найти такой вид материала для сайта
trem200
Среда, 03 Августа 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Всем привет, возник вопрос, а где можно найти вот такой вот вид материала?

Прикрепления: 9815657.png (207.7 Kb)
Страна: (RU)
Kosten
Среда, 03 Августа 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Десерт, такого не встречал.
Страна: (RU)
Kosten
Среда, 03 Августа 2016 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Тема перенесена в другой раздел!
Страна: (RU)
trem200
Среда, 03 Августа 2016 | Сообщение 4
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Kosten ()
такого не встречал.


Просто очень понравился, в лучшем случаи могу использовать уже готовый, и как-то его изменить.
Страна: (RU)
Angerfist
Среда, 03 Августа 2016 | Сообщение 5
Оффлайн
Vip
Сообщений:767
Награды: 21
Десерт, рипай если нравится) а лучше бы давно успокоился и свой дизайн состряпал

No regrets
Страна: (RU)
trem200
Среда, 03 Августа 2016 | Сообщение 6
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
рипай если нравится) а лучше бы давно успокоился и свой дизайн состряпал


Так я даже не знаю с чего начать изучение css и html. Посоветуйте книги по css и html.
Страна: (RU)
Angerfist
Среда, 03 Августа 2016 | Сообщение 7
Оффлайн
Vip
Сообщений:767
Награды: 21
CSS и Html

Я от делать нефиг попозже гляну на том сайте и возможно скину рип кода)))


No regrets
Страна: (RU)
trem200
Среда, 03 Августа 2016 | Сообщение 8
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
Я от делать нефиг попозже гляну на том сайте и возможно скину рип кода)))


Спасибо огромное
Страна: (RU)
Angerfist
Четверг, 04 Августа 2016 | Сообщение 9
Оффлайн
Vip
Сообщений:767
Награды: 21
Десерт, извини что долго, занят был, вообщем я не стал рипать, захотелось самому похожее сделать.
Нарисовал код вообщем чтобы было максимально похоже, только иконки свои поставил и иконки залил в архив.
Скачаешь меняй на свои, ну остальное цвета менять думаю допрёшь где...

Увеличение фото сам понимаешь остался юкозовский ulightbox, на том сайте был fancybox. Сделал ещё и адаптивным, когда будешь устанавливать не ставь в настройках количество колонок 3, Оставить надо 1 колонку так как в классе form-type уже стоит 32% и значит будет 3 колонки, если мелко то ставь 48-49% ну и регулируя отступы margin.

Если будут косяки то посмотри может названия классов пересекаются) Будут вопросы по коду задавай, я мог в спешке ошибиться и покажешь ссылку на то что вышло лады?

Код

<div class="form-type">
<div class="img-form" style="background-image: url('$IMG_URL1$')">
<div class="shadow"><div class="zoom">
<a href="$IMG_URL1$" class="ulightbox">
<img src="ссылка к картинке/zoom.png" width="28" height="28" border="0" title="Увеличить" /></a>
</div></div></div>
<div class="title">
<a href="$ENTRY_URL$" title="Перейти к просмотру"><?if(len($TITLE$)>20)?><?substr($TITLE$,0,20)?>...<?else?>$TITLE$<?endif?></a></div>
<div class="rating">
<span class="num-rate" title="Просмотры|Комментарии">
<span class="vie-icon"></span><b style="margin: 0;"> $READS$</b>
<span class="com-icon"></span><b style="margin: 0 5px 0 0;"> $RATING_NUM$</b></span></div>
</div>


Код

.form-type {
width:32%;
float:left;
margin: 0.5% 0 0.5% 1%;
border: 1px solid #D3D3D3;
border-radius: 3px;
}
.title {
height: 22px;
text-align:left;
font-size: 14px;
margin: 0 5px;
}
.rating {
text-align:right;
background-color: #F5F5F5;
}
.img-form {
z-index:1;
border-radius: 3px 3px 0 0;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.num-rate {
color:#000;
font-size:14px;
}
.zoom {
display:block;
z-index:2;
position: absolute;
top:5px;
right:5px;
}
.shadow {
opacity:0;
position: absolute;
transition: all 0.5s ease 0s;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;}
.shadow:hover {
opacity: 1;
}
.vie-icon {
width: 14px;
height: 12px;
background: url('ссылка к картинке/11.png')no-repeat;
display: inline-block;
}
.com-icon {
width: 14px;
height: 12px;
background: url('ссылка к картинке/12.png')no-repeat;
display: inline-block;
}
@media only screen and (max-width: 768px) {
.title {height:38px;}
}
@media only screen and (max-width: 640px) {
.form-type {width:48%;}
}


No regrets
Страна: (RU)
Angerfist
Четверг, 04 Августа 2016 | Сообщение 10
Оффлайн
Vip
Сообщений:767
Награды: 21
Забыл архив залить с иконками biggrin
Прикрепления: icons.rar (8.1 Kb)


No regrets
Страна: (RU)
Kosten
Четверг, 04 Августа 2016 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, безусловно на главную страницу материал.. biggrin
Страна: (RU)
Angerfist
Четверг, 04 Августа 2016 | Сообщение 12
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, в плане? smile

No regrets
Страна: (RU)
Angerfist
Четверг, 04 Августа 2016 | Сообщение 13
Оффлайн
Vip
Сообщений:767
Награды: 21

Жду когда Десерт протестирует smile
кстати я постоянно в своих материалах забываю добавить панель модератора для редактирования)
Код

<span class=""><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></span>

кому надо думаю добавят и позиционируют шестерёнку редактирования smile
Прикрепления: 6570491.gif (1.2 Kb)


No regrets
Страна: (RU)
Kosten
Четверг, 04 Августа 2016 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, так готовый вид или нужно еще архив под него?
Страна: (RU)
Angerfist
Четверг, 04 Августа 2016 | Сообщение 15
Оффлайн
Vip
Сообщений:767
Награды: 21
Готовый, но модер панель я думаю всё таки пусть сами добавляют) в архиве ток 3 иконки.
мну устал biggrin


No regrets

Сообщение отредактировал
Angerfist - Четверг, 04 Августа 2016, 01:03
Страна: (RU)
Форум » Общий раздел форума » Просьба с услугами » Где найти такой вид материала для сайта
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: