[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 17
  • 1
  • 2
  • 3
  • 16
  • 17
  • »
Форум » Ленточный вариант форума
Новые сообщения
Дата: Пятница, 16.03.2018, 22:49:46 | Сообщение # 1
Форум: Наш сайт | Тема: Обновлённый дизайн
Группа: Администраторы Ранг: Рядовой Сообщений: 1 Награды: 0
Репутация: 0
Статус:
Сайт пользователя:
Skype пользователя:
тест тест ^¤Ґ¦§©Є«¬®Ї°±ґµ¶·»•…′″‾⁄™∂∏∑−√∞∫≈≠≤≥◊¡¢£¥¨°²³´µ¸¹¼½¾¿́ тест тест тест
Дата: Среда, 24.01.2018, 13:26:56 | Сообщение # 2
Форум: Наш сайт | Тема: Обновлённый дизайн
Группа: Администраторы Титул: Администратор Сообщений: 1
Награды: 1
Репутация: 11
Статус:
Сайт пользователя:
Skype пользователя:
тест
Дата: Среда, 02.11.2016, 09:00:57 | Сообщение # 3
Форум: Флудилка | Тема: Общалка
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:
Народ!!!!
Дата: Понедельник, 19.09.2016, 09:44:51 | Сообщение # 4
Форум: Флудилка | Тема: Общалка
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:
Что-то тихо на сайте!
Дата: Пятница, 27.05.2016, 14:33:12 | Сообщение # 5
Форум: Скрипты | Тема: Модицицируем вид "Автор темы" на форуме под стиль mail ...
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

Сегодня мы будем менять скучную, унылую и никому не интересную колонку "Автор темы". С помощью данного скрипта вы сможете заменить логин пользователя на красивую картинку с первой буквой автора темы на разноцветном заднем фоне...
Идея данного решения пришла от компании mail, просматривая тысячный раз пришедшие письма мне на почту, я подумал, а почему бы эту фишку не прикрутить на форум в колонку автора темы, и вот эта идея воплощена и я делюсь ей с вами, думаю многим по нраву будет данная мыслишка, ну и плюсом будет красивое украшение форума, ну а теперь перейдем к установке...

Установка:

1) Панель управления ---> Управление дизайном ---> Форум ---> Общий вид страниц форума и после $BODY$
Код
<?if($PAGE_ID$='forum' || $PAGE_ID$='recentthreads')?>  
<script>
$(".threadAuthTd").each(function(webo4kaRu) {
user = $(this, webo4kaRu).text();
if (user == 'Nio') {$(this).html('<a href="/index/8-0-'+user+'" target="_blank" title="'+user+'"><img src="$USER_AVATAR_URL$" style="border:2px solid black; width:20px; vertical-align:middle;"></a>');}
else {$(this).html('<a href="/index/8-0-'+user+'" target="_blank" title="'+user+'"><img src="https://filin.mail.ru/pic?email='+user+'@'+user+'&trust=false&width=32&height=32&name='+user+'&version=4&build=4" style="border:2px solid black; width:30px; vertical-align:middle;"></a>');} /* by Вовчик*/  
});  
</script>  
<?endif?>


p.s. Так же я сделал так, что бы Администратор выделялся по особенному, а именно у него в отличие от других будет выводится его аватарка а не его первая буква, и что бы у вас на форуме выводилась ваша аватарка, вам в коде необходимо будет заменить слово "Nio" на свой ник, ну и так же вставите свою аватарку

Материал подготовил Andrey
Прикрепления: 1161595.png(276.3 Kb)
Дата: Четверг, 26.05.2016, 14:06:14 | Сообщение # 6
Форум: Скрипты | Тема: Зеленая кнопка вверх с крутым эффектом
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

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

Плюсы:

1) Легкая кнопка
2) Волновой эффект
3) Плавно-анимированное прокручивание
4) CSS3 + JQuery

Установка кнопки:
Код
.material-scrolltop {  
  display: block;  
  position: fixed;  
  width: 0;  
  height: 0;  
  bottom: 23px;  
  right: 23px;  
  padding: 0;  
  overflow: hidden;  
  outline: none;  
  border: none;  
  border-radius: 2px;  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);  
  cursor: hand;  
  border-radius: 50%;  
  background: #4caf50;  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  -o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
  transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);  
}  

.material-scrolltop:hover {  
  background-color: #4caf50;  
  text-decoration: none;  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);  
}  

.material-scrolltop::before {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);  
  -moz-transform: translate(-50%, -50%);  
  -o-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);  
  content: "";  
  width: 0;  
  border-radius: 100%;  
  background: #66bb6a;  
}  

.material-scrolltop:active::before {  
  width: 120%;  
  padding-top: 120%;  
  -webkit-transition: all 0.2s ease-out;  
  -ms-transition: all 0.2s ease-out;  
  -moz-transition: all 0.2s ease-out;  
  -o-transition: all 0.2s ease-out;  
  transition: all 0.2s ease-out;  
}  

.material-scrolltop.reveal {  
  width: 56px;  
  height: 56px;  
}  

.material-scrolltop span {  
  display: block;  
  font-size: 25px;  
  color: #fff;  
}  

.material-scrolltop,  
.material-scrolltop::before {  
  background-image: url(/js/top-arrow.svg);  
  background-position: center 50%;  
  background-repeat: no-repeat;  
}


В нижнюю часть сайта вставляем код:
Код
<script src="/js/material-scrolltop.js"></script>  
  <button class="material-scrolltop" type="button"></button>  
  <script>  
  $(document).ready(function() {  
  $('body').materialScrollTop({  
  revealElement: 'header',  
  revealPosition: 'bottom',  
  onScrollEnd: function() {  
  console.log('Scrolling End');  
  }  
  });  
  });  
  </script>


Всё, установка завершена!

Материал подготовил Andrey
Прикрепления: 5837681.rar(1.2 Kb) · 8018209.png(15.0 Kb)
Дата: Вторник, 01.03.2016, 15:10:48 | Сообщение # 7
Форум: Флудилка | Тема: Общалка
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:
Цитата Mapa
есть несколько рублей.

Спасибо, не нужно
Дата: Понедельник, 01.02.2016, 21:16:38 | Сообщение # 8
Форум: Флудилка | Тема: Общалка
Группа: Пользователи Ранг: Лейтенант Сообщений: 71
Награды: 1
Репутация: 0
Статус:
Сайт пользователя:
Skype пользователя:
Andrey, вот забежала к тебе в гости чем помочь??есть несколько рублей.

Дата: Вторник, 12.01.2016, 11:08:55 | Сообщение # 9
Форум: Флудилка | Тема: Общалка
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:
Mapa, Спасибо! И тебя с праздниками! Заходи чаще
Дата: Среда, 06.01.2016, 15:34:04 | Сообщение # 10
Форум: Флудилка | Тема: Общалка
Группа: Пользователи Ранг: Лейтенант Сообщений: 71
Награды: 1
Репутация: 0
Статус:
Сайт пользователя:
Skype пользователя:




Сообщение отредактировал Mapa - Среда, 06.01.2016, 15:35:00
Дата: Вторник, 22.12.2015, 10:50:31 | Сообщение # 11
Форум: Скрипты | Тема: Эффект при наведении на картинку на CSS3
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

CSS3 является прекрасной технологией, которая поможет вам создать по-настоящему потрясающие вещи. Использую всю эту мощь, вы можете добавить любые разновидности визуальных эффектов для картинок на ваш ресурс. Поэтому, сегодня мы поговорим об эффектах наведения CSS3. Я подготовил данное решение, которое Вам позволит любую галерею изображений превратить в современный и стильный шедевр. Эффекты при наведении на картинки никого не оставят равнодушными!

ДЕМО

После /head на нужных страницах вставьте:
Код
<link rel="stylesheet" type="text/css" href="/css/figure.css">


Галерея картинок оформляется вот так:
Код
<div id="box" class="burst-circle teal">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle strawberry">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle grape">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>
<div id="box" class="burst-circle orange">
<div class="caption"></div>
<img src="Ссылка_на_картинку">
<h1>Описание к картинке</h1>
</div>


Обратите внимание на класс burst-circle – вы можете использовать один из нескольких классов для применения одного из нескольких эффектов, соответственно. На данный момент доступны классы: burst-circle, burst-rumb, burst-up, burst-side, triangle, triangle-side
Осталось лишь залить четыре PNG файла из прикреплённого архива в папку img и CSS файл в папку css
Прикрепления: fphoto.rar(78.2 Kb) · 6088684.png(225.7 Kb)
Дата: Суббота, 17.10.2015, 09:28:06 | Сообщение # 12
Форум: Скрипты | Тема: Боковое полноэкранное меню
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

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

И так приступим к установки

Сначала подключим после </head> CSS стиль нашего меню:
Код
<link rel="stylesheet" href="/nav/style.css">


Теперь в нижнюю часть сайта вставляем код самого полноэкранного меню:
Код
<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<h2>Меню нашего сайта</h2>
<nav>
<ul class="cd-primary-nav">
<li><a href="#" class="selected">Главная страница</a></li>
<li><a href="#">Форум сайта</a></li>
<li><a href="#">Сайты uCoz</a></li>
<li><a href="#">Файлы про uCoz</a></li>
<li><a href="#">Блог нашего сайта</a></li>
</ul>
</nav>
</div>
       
<div class="cd-half-block">
<address>
<ul class="cd-contact-info">
<li><a href="http://an-art.at.ua/">АН - ФРТ</a></li>
<li>
АН - АРТ фотообработка, колоризация... Любой слозности
</li>
</ul>
</address>
</div>

</div>
</div>


Устанавливаем кнопку вызова нашего меню:
Код
<a href="#cd-nav" class="cd-nav-trigger"><span class="cd-nav-icon"></span></a>


Подключаем после </body> js - скрипт нашего меню:
Код
<script src="/nav/main.js"></script>


И из прикреплённого ниже архива заливаем к себе на хост папку "nav"

Всё, меню установлено!

Материал подготовил: Andrey
Прикрепления: nav.rar(2.2 Kb) · 9280940.png(17.0 Kb)
Дата: Пятница, 16.10.2015, 17:19:10 | Сообщение # 13
Форум: Скрипты | Тема: Новый вид Дополнительной информации на форуме
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:
Цитата XemorDio
а стиль форума такой красивый, прозрачный)

Да когда-то был, потом снёс и поставил адаптивный!
Дата: Среда, 14.10.2015, 12:43:25 | Сообщение # 14
Форум: Скрипты | Тема: Новый вид Дополнительной информации на форуме
Группа: Новички Ранг: Рядовой Сообщений: 1 Награды: 0
Репутация: 0
Статус:
Сайт пользователя:
Skype пользователя:
Ммм.. а стиль форума такой красивый, прозрачный)
Дата: Понедельник, 05.10.2015, 20:32:51 | Сообщение # 15
Форум: Ан - Арт: Android | Тема: Идей и предложения
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

В этой теме вы можете предлагать идеи по приложению
Прикрепления: 9542373.png(25.9 Kb)
  • Страница 1 из 17
  • 1
  • 2
  • 3
  • 16
  • 17
  • »
Поиск: