Страница 1 из 212»
Форум про uCoz » Общие темы » Просьба/Услуга » Где найти такой вид материала для сайта
Где найти такой вид материала для сайта
trem200
Дата: Среда, 03.08.2016, 18:27 | Сообщение # 1
Проверенные
Сообщений:249
Награды: 1


Всем привет, возник вопрос, а где можно найти вот такой вот вид материала?

Прикрепления: 9815657.png(208Kb)
Kosten
Дата: Среда, 03.08.2016, 18:45 | Сообщение # 2
Администраторы
Сообщений:12716
Награды: 39


Десерт, такого не встречал.

Kosten
Дата: Среда, 03.08.2016, 18:48 | Сообщение # 3
Администраторы
Сообщений:12716
Награды: 39


Тема перенесена в другой раздел!

trem200
Дата: Среда, 03.08.2016, 18:48 | Сообщение # 4
Проверенные
Сообщений:249
Награды: 1


Цитата Kosten ()
такого не встречал.


Просто очень понравился, в лучшем случаи могу использовать уже готовый, и как-то его изменить.
Angerfist
Дата: Среда, 03.08.2016, 18:55 | Сообщение # 5
Vip
Сообщений:623
Награды: 18


Десерт, рипай если нравится) а лучше бы давно успокоился и свой дизайн состряпал

No regrets
trem200
Дата: Среда, 03.08.2016, 18:58 | Сообщение # 6
Проверенные
Сообщений:249
Награды: 1


Цитата Angerfist ()
рипай если нравится) а лучше бы давно успокоился и свой дизайн состряпал


Так я даже не знаю с чего начать изучение css и html. Посоветуйте книги по css и html.
Angerfist
Дата: Среда, 03.08.2016, 19:03 | Сообщение # 7
Vip
Сообщений:623
Награды: 18


CSS и Html

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


No regrets
trem200
Дата: Среда, 03.08.2016, 19:06 | Сообщение # 8
Проверенные
Сообщений:249
Награды: 1


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


Спасибо огромное
Angerfist
Дата: Четверг, 04.08.2016, 00:06 | Сообщение # 9
Vip
Сообщений:623
Награды: 18


Десерт, извини что долго, занят был, вообщем я не стал рипать, захотелось самому похожее сделать.
Нарисовал код вообщем чтобы было максимально похоже, только иконки свои поставил и иконки залил в архив.
Скачаешь меняй на свои, ну остальное цвета менять думаю допрёшь где...

Увеличение фото сам понимаешь остался юкозовский 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
Angerfist
Дата: Четверг, 04.08.2016, 00:10 | Сообщение # 10
Vip
Сообщений:623
Награды: 18


Забыл архив залить с иконками biggrin
Прикрепления: icons.rar(8Kb)


No regrets
Kosten
Дата: Четверг, 04.08.2016, 00:48 | Сообщение # 11
Администраторы
Сообщений:12716
Награды: 39


Angerfist, безусловно на главную страницу материал.. biggrin

Angerfist
Дата: Четверг, 04.08.2016, 00:50 | Сообщение # 12
Vip
Сообщений:623
Награды: 18


Kosten, в плане? smile

No regrets
Angerfist
Дата: Четверг, 04.08.2016, 00:54 | Сообщение # 13
Vip
Сообщений:623
Награды: 18



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

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

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


No regrets
Kosten
Дата: Четверг, 04.08.2016, 01:00 | Сообщение # 14
Администраторы
Сообщений:12716
Награды: 39


Angerfist, так готовый вид или нужно еще архив под него?

Angerfist
Дата: Четверг, 04.08.2016, 01:02 | Сообщение # 15
Vip
Сообщений:623
Награды: 18


Готовый, но модер панель я думаю всё таки пусть сами добавляют) в архиве ток 3 иконки.
мну устал biggrin


No regrets

Сообщение отредактировал Angerfist - Четверг, 04.08.2016, 01:03
Форум про uCoz » Общие темы » Просьба/Услуга » Где найти такой вид материала для сайта
Страница 1 из 212»
Поиск: