Главная Форум Новости Пользователи FAQ Игры Фильмы Сериалы Аниме
Добро пожаловать на уникальный игровой портал ТОРРЕНТЫ БЕЗ РЕГИСТРАЦИИ! Здесь Вы сможете найти самые интересные новости из мира игровой индустрии, завести себе новых друзей, общаясь на форуме портала, а также сможете проявить себя в роли журналиста, дизайнера, кодера или продавца!
Авторизация Регистрация
Последние обсуждаемые темы на форуме
Последние комментарии к новостям
Топ-10 форумчан
Зов волка / Le chant du lo... MeVeR 0
Тихоокеанский рубеж (2013)... IIoJIKoBHuK 18
скачать темы для warcraft3... KGKZRU 5
Сборник скриптов для сайто... KGKZRU 8
Логан 2017 фильм бесплатно MeVeR 7
10 причин моей ненависти 1... IIoJIKoBHuK 4
Тихоокеанский Рубеж 2018, ... KGKZRU 1
ALL-CS 1.6 Two + ALL-CS 1.... KGKZRU 0
Counter-Strike 1.6 All-CS ... KGKZRU 0
Мой самурай / My Samurai (... KGKZRU 0
Тихоокеанский рубеж (2013)... IIoJIKoBHuK 18
Сборник скриптов для сайто... KGKZRU 8
Логан 2017 фильм бесплатно MeVeR 7
скачать темы для warcraft3... KGKZRU 5
Вид материалов для игровог... KGKZRU 4
10 причин моей ненависти 1... IIoJIKoBHuK 4
Томбой / Tomboy (2016) MeVeR 4
Вид гостевой книги со стил... Kosten 3
Ранги пользователей и титу... IIoJIKoBHuK 3
Поезд на Париж (2018) The... IIoJIKoBHuK 3
1. Kosten 6750
2. MiV 1605
3. ucozon 1030
4. Lexarus64 650
5. IIoJIKoBHuK 413
6. Kristian 402
7. MeVeR 156
8. Miroslav 152
9. KGKZRU 59
10. cinema-hd 4
Витрина ссылок Купить ссылку (4 р.) » | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка

  • Страница 1 из 1
  • 1
Форум » Конструкторы » uCoz » Скрипты » Вид материалов для игрового сайта

Вид материалов для игрового сайта
09.04.2019 в 23:41
#1
KGKZRU
Первый Я тут! не наглей
Статус: Offline
Регистрация: 24.09.2015
Сообщения: 59
Звание:
Репутация: 35
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 9='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 9='ID пользователя'"

Основываясь на моих любимых двухколончатых конструкциях, я решил снова поэкспериментировать и применить к этому еще больше CSS-анимаций без применения JS.

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

Возможно, я просто хочу получить дополнительную информацию, чтобы кто-то добавил материал и датой, но можно просто убить).

В анимации есть анимация строк: сдвиг 15 с, легкость 1, название анимации, 15 секунд времени анимации, тип анимации и сколько раз повторяется анимация (чтобы можно было менять), если поставить вместо количества повторений 1 параметр бесконечность, то анимация будет продолжаться бесконечно.

В настройках модуля ставится 1 колонка, для тех, кто желает поменять количество колонок, то есть это меняется в зависимости от класса, вместо 48% ставим допустимым 32% с одинаковыми отступлениями (если не расчитаны отступы, колонки не влезут и будут снова 2 вместо 3 колонок) ширина, высота, ширина, высота, высота, высота и высота

Код
<div class="basis">
<?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>
<div class="cover" style="background-image: url('$IMG_URL1$')">
<span class="date"><b style="margin: 0 5px;">$USERNAME$ | $DATE$</b></span>
<div class="denotation"><span class="figuration">$TITLE$</span></a></div>  
<div class="fogging" onclick="location.href='$ENTRY_URL$'">
<p class="definition">$MESSAGE$</p></div></div>
<div class="bottom">
<span class="category">
<b style="margin: 0 5px;"><a href="$CATEGORY_URL$" title="Катеория">$CATEGORY_NAME$</a></b></span>
<span class="fullscreen ulightbox" href="$IMG_URL1$" style="cursor: pointer"></span>
<span class="views" title="Просмотры"><b style="margin: 0 5px;">$READS$</b></span>
<span class="views-icon"></span>
<span class="views" title="Загрузок"><b style="margin: 0 5px;">$LOADS$</b></span>
<span class="download-icon"></span>
</div>
</div>  


CSS

Код

.basis {
display: block;
width: 48%;  
float: left;
margin: 0.5% 0 0.5% 1%;
}
.cover {
display: block;
position: relative;
padding-bottom: 62%;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
box-shadow: inset 0 1px 3px 2px #000;
}
.fogging {
  z-index: 1;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  background-color: rgba(0,0,0,0.85);
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
}
.fogging:hover {
opacity: 1;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
}  
.denotation {
display: block;
position: absolute;
left: 0;
right: 0;
top: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
overflow: hidden;
}
.figuration {
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 2px 4px 3px rgba(0,0,0,0.85);
margin: 2px 2px 6px 5px;
}
.definition {
margin: 5px;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
}
.bottom {
background-color: #1C1C1C;
box-shadow: inset 0 1px 3px 2px #000000;
margin: 3px 0 0 0;
height: 32px;
overflow: hidden;
}
.views {
float: right;
margin: 5px 4px 4px 0;
background-color: #363636;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 2px 4px 3px rgba(0,0,0,0.85);
animation:blinking 3s ease 3;
-webkit-animation:blinking 3s ease 3;
-moz-animation:blinking 3s ease 3;
-o-animation:blinking 3s ease 3;
-ms-animation:blinking 3s ease 3;
}
@keyframes blinking {
0% { opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
@-webkit-keyframes blinking {  
0% { opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
@-moz-keyframes blinking {  
0% { opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
@-ms-keyframes blinking {  
0% { opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
@-o-keyframes blinking {  
0% { opacity: 1}
50% {opacity: 0.2}
100% {opacity: 1}
}
.date {
opacity:0;
display: block;
position: absolute;
bottom: 5px;
right: 5px;
background-color: #1C1C1C;
font-family: Arial;
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 2px 4px 3px rgba(0,0,0,0.85);
animation:shift 15s ease 1;
-webkit-animation:shift 15s ease 1;
-moz-animation:shift 15s ease 1;
-o-animation:shift 15s ease 1;
-ms-animation:shift 15s ease 1;
}
@keyframes shift {
0% {opacity: 0}
10% {opacity: 0.25}
25% {opacity: 0.5}
35% {opacity: 0.75}
50% {opacity: 1}
60% {opacity: 0.75}
75% {opacity: 0.5}
90% {opacity: 0.25}
100% {opacity: 0}
}
@-webkit-keyframes shift {
0% {opacity: 0}
10% {opacity: 0.25}
25% {opacity: 0.5}
35% {opacity: 0.75}
50% {opacity: 1}
60% {opacity: 0.75}
75% {opacity: 0.5}
90% {opacity: 0.25}
100% {opacity: 0}
}
@-moz-keyframes shift {
0% {opacity: 0}
10% {opacity: 0.25}
25% {opacity: 0.5}
35% {opacity: 0.75}
50% {opacity: 1}
60% {opacity: 0.75}
75% {opacity: 0.5}
90% {opacity: 0.25}
100% {opacity: 0}
}
@-ms-keyframes shift {
0% {opacity: 0}
10% {opacity: 0.25}
25% {opacity: 0.5}
35% {opacity: 0.75}
50% {opacity: 1}
60% {opacity: 0.75}
75% {opacity: 0.5}
90% {opacity: 0.25}
100% {opacity: 0}
}
@-o-keyframes shift {
0% {opacity: 0}
10% {opacity: 0.25}
25% {opacity: 0.5}
35% {opacity: 0.75}
50% {opacity: 1}
60% {opacity: 0.75}
75% {opacity: 0.5}
90% {opacity: 0.25}
100% {opacity: 0}
}
.category {
opacity:1;
float: left;
margin: 5px 0 4px 4px;
background-color: #363636;
font-family: Arial;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 2px 4px 3px rgba(0,0,0,0.85);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.category:hover {  
opacity: 0.75;
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.85);
-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.85);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.85);
}
.category a {
color: #FFFFFF;
}
.fullscreen {
display: block;
width: 22px;
height: 22px;
float: right;
background-image: url(/icons/fullscreen.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
margin: 5px 5px 0 0;
}
.download-icon {
display: block;
float: right;
width: 16px;
height: 16px;
margin: 8px 6px 0 2px;
background-image: url(/icons/download.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.views-icon {
display: block;
float: right;
width: 22px;
height: 22px;
margin: 5px 4px 0 2px;
background-image: url(/icons/views.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
@media only screen and (max-width: 480px) {
.basis {width:100%;}
}  


В архиве 3 иконки.

Скачать

Любить буду маму всегда и навсегда!
09.04.2019 в 23:48
#2
KGKZRU
Первый Я тут! не наглей
Статус: Offline
Регистрация: 24.09.2015
Сообщения: 59
Звание:
Репутация: 35
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 9='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 9='ID пользователя'"
cool

Любить буду маму всегда и навсегда!
09.04.2019 в 23:48
#3
KGKZRU
Первый Я тут! не наглей
Статус: Offline
Регистрация: 24.09.2015
Сообщения: 59
Звание:
Репутация: 35
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 9='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 9='ID пользователя'"
cool

Любить буду маму всегда и навсегда!
09.04.2019 в 23:49
#4
KGKZRU
Первый Я тут! не наглей
Статус: Offline
Регистрация: 24.09.2015
Сообщения: 59
Звание:
Репутация: 35
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 9='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 9='ID пользователя'"
cool

Любить буду маму всегда и навсегда!
09.04.2019 в 23:49
#5
KGKZRU
Первый Я тут! не наглей
Статус: Offline
Регистрация: 24.09.2015
Сообщения: 59
Звание:
Репутация: 35
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 9='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 9='ID пользователя'"
biggrin

Любить буду маму всегда и навсегда!
Форум » Конструкторы » uCoz » Скрипты » Вид материалов для игрового сайта
  • Страница 1 из 1
  • 1
Поиск:

Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Зов волка / ... Ответов [ 0 ]
Тихоокеански... Ответов [ 18 ]
скачать темы... Ответов [ 5 ]
Сборник скри... Ответов [ 8 ]
Логан 2017 ф... Ответов [ 7 ]
10 причин мо... Ответов [ 4 ]
Тихоокеански... Ответов [ 1 ]
ALL-CS 1.6 T... Ответов [ 0 ]
Counter-Stri... Ответов [ 0 ]
Мой самурай ... Ответов [ 0 ]
Зов волка / ... Ответов [ 0 ]
Тихоокеански... Ответов [ 18 ]
скачать темы... Ответов [ 5 ]
Сборник скри... Ответов [ 8 ]
Логан 2017 ф... Ответов [ 7 ]
10 причин мо... Ответов [ 4 ]
Тихоокеански... Ответов [ 1 ]
ALL-CS 1.6 T... Ответов [ 0 ]
Counter-Stri... Ответов [ 0 ]
Мой самурай ... Ответов [ 0 ]
Kosten Постов [ 6750 ]
MiV Постов [ 1605 ]
ucozon Постов [ 1030 ]
Lexarus64 Постов [ 650 ]
IIoJIKoBHuK Постов [ 413 ]
Kristian Постов [ 402 ]
MeVeR Постов [ 156 ]
Miroslav Постов [ 152 ]
KGKZRU Постов [ 59 ]
cinema-hd Постов [ 4 ]
andreysarmanov96Дата [ 24.08.2019 ]
prist12332Дата [ 11.08.2019 ]
cinema-hdДата [ 01.08.2019 ]
win2kolyanДата [ 06.04.2019 ]
WoodyДата [ 30.03.2019 ]
na3uTuB4ukДата [ 25.03.2019 ]
nakaxohtacДата [ 25.03.2019 ]
hripkovavДата [ 09.01.2019 ]
denchiks2303Дата [ 09.01.2019 ]
alekseylebedev1Дата [ 08.01.2019 ]

условия предоставления информации
Авторские права и контакты
счетчики
счетчики
навигация
Новости и публикации в новостной ленте предоставлены исключительно в ознакомительных целях. Все материалы принадлежат исключительно их владельцам! Администрация портала не несет ответственности за последствия использования вами сторонних материалов, опубликованных на форуме, но гарантирует отсутствие вредоносного кода в новостях и публикациях на главной.
  • Администратор портала - MeVeR
  • Заместитель Администратора - KGKZRU
  • По всем возникшим вопросам - meder4ik@gmail.com
  • Уникальный игровой портал kanym.ru ® 2018 - 2019
  • Используются технологии uCoz