Среда, 14.11.2018, 23:45
Приветствую Вас Гость | RSS
Всё для фотошопа
Главная | Регистрация | Вход

Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish
Меню сайта
Категории
Векторный клипарт
Растровый клипарт
Actions для Photoshop
PSD- исходники
Кисти для Photoshop
Стили и градиенты для Photoshop
Плагины для Photoshop
Фоны,текстуры
Шрифты
Футажи
Скрап-наборы
Иконки (ico, png, psd)
Фотошаблоны для Photoshop
Фоторамки
Календари
Украшения Windows
Уроки и видеоуроки
Разное
Фото,картинки
Вебмастерам
Дизайнерский софт
Фотоальбомы, фотокниги, портфолио
Обои на рабочий стол
Художники, картины
Форма входа
Интересное
Детский Календарь на 2012 год + Рамка для девочек – Для маленьких принцесс
Категория: Календари

Рамочка детская для фотошоп – Кот в сапогах
Категория: Фоторамки

Рамка для фото – Поздравляю с Рождеством
Категория: Фоторамки

Flower elements 02

Фоторамка - Морозные кружева
Категория: Фоторамки

Рамка для фото – Пусть свечи зажгутся и доброю сказкой шагнёт на порог Новый Год
Категория: Фоторамки

Xmas Fonts Dings
Категория: Шрифты

Whiskey brushes for photoshop - Кисти для фотошоп Виски
Категория: Кисти для Photoshop

24 waved silk brushes
Категория: Кисти для Photoshop

Шаблон для фотомонтажа - старинные костюмы 47

Красивые линии

Рамка для фото – Новогодний подарок для любимой
Категория: Фоторамки

Alphabets Inc (fonts)
Категория: Шрифты

Новогодняя рамочка – Я Гламурный снеговик и к подаркам я привык…
Категория: Фоторамки

Романтический календарь на 2012 год – Сбываются мечты, в них только я и ты
Категория: Календари

Набор 9 новогодних рамок – Спешим поздравить с новым годом всех самых близких и друзей
Категория: Фоторамки

Календарь для двух фото на 2012 год - В плену роз
Категория: Календари

Обертка для шоколада – Орден «Лучшая в мире мама»
Категория: PSD- исходники

Новогодняя фоторамка – Самый главный праздник в году
Категория: Фоторамки

Календарь на 2012 год - Ты в моём сердце навсегда, В моей руке твоя рука...
Категория: Календари

x-mas backgrounds vector

Набор из 6 новогодних рамочек для фото - Новый год спешит к нам в дом
Категория: Фоторамки

Подарочная обертка конверт для денег – С днем рождения
Категория: PSD- исходники

Календарь православных праздников и постов на 2012 год
Категория: Календари

Цифровой фон

Главная » 2013 » Февраль » 8 »

Кнопка вверх (new)


17:02
Кнопка вверх (new)
Кнопка вверх (new)
Всем привет

Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk.

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.

Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.upTop {  
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {  
  background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url(http://bambun.ru/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {  
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}


Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>


Установка JS

Вставляем данный код также перед тегом </body>

Код
<script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script>


На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый
Категория: Вебмастерам | Просмотров: 572 | Добавил: budyvmaster | Рейтинг: 0.0/0

Другие новости:

Цветочная рамка для фото – Розы и пёрышко
Шаблон для фотомонтажа - дед мороз и снегурочка
Красивые наклейки
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Облако тегов
Календарь
«  Февраль 2013  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728
Наилучшее
Бесплатные ленты в PSD
Категория: PSD- исходники

Портфолио для детского сада - Незнайка и его друзья

Шаблоны - Почётные грамоты с государственной символикой
Категория: PSD- исходники

Портфолио для мальчика (детский сад и начальная школа) – Лунтик
Категория: Фоторамки

Наградные бланки - Благодарность, похвальный лист, сертификат, диплом, почётная грамота
Категория: PSD- исходники

Шаблон - Генеалогического дерева в PSD формате

Украинский казак- шаблон для фотомонтажа

русский солдат

Шаблон фотокниги для выпускников-Темный стиль

Детская фоторамка - Куклы Монстер Хай - Школа монстров
Категория: Фоторамки

Деревянные вывески общепита

Бумажные куклы-вырезалки вашим девочкам в красивых платьях
Категория: Разное

Календарь на 2015 год - Утренний кофе
Категория: Календари

Brushpack - Lighting - освещение - кисти для фотошопа
Категория: Кисти для Photoshop

Как новичку открыть фотосалон. Фото на документы с нуля

Шаблон фотопланшета для детского сада - Мой любимый детский сад

Портфолио детское для девочки – Белоснежка диснея

Шаблон перекидного детского календаря с Машей и Медведем с местом для фото - 2013 год
Категория: Календари

Детский клипарт - С 23 Февраля мальчики!
Категория: Скрап-наборы

С Днем Рождения праздничные векторные атрибуты

Шаблон для фотомонтажа - парадная форма ВМФ

Шаблон №1 классической фотокниги

Макет детской фотокниги - По - Воин дракона

Векторные Календарные сетки 2014

Портфолио для начальных классов с детскими картинками

Наша кнопка
coolgfx - бесплатно все приложения фотошоп


Copyright Coolgfx.ucoz.ru © 2018


Бесплатный хостинг uCoz