All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок
  • Страница 1 из 1
  • 1
Модератор форума: Vladislavik-36  
Форум » Владельцу сайта » HTML, JS, CSS. » Неон спойлер с плавным переходом в стиле WEB 2.0 - leonP4
Неон спойлер с плавным переходом в стиле WEB 2.0 - leonP4
leonP4Дата: Среда, 04.08.2010, 21:16 | Сообщение # 1
.:хакер:.
Группа: Администратор
Сообщений: 1006
Награды: 11
Статус: Offline
Неон спойлер с плавным переходом в стиле WEB 2.0 - leonP4
Если вы хотите быть авторитетом в веб программировании то вам нужно обходится без фреймов, решать все проблемы с помощью программирования и стараться заменять всю графику кодом, и чем сложнее дизайн тем больше уважения!
и это говорю не я один leonP4 а и многие веб программеры в своих блогах и статьях biggrin
в этой теме я выкладываю небольшой стиль и кусок кода, вид которых очень сложно отличить от фотошопа happy а всё благодаря мастерству владения CSS wink

вот вам скрин где я использую данную функцию:

а теперь о самом коде:

вот CSS часть отвечает за неон

Code
/* стат неон leonP4 All-For-Kompa.RU */
a.nhp:hover {
   text-decoration: none;
   text-shadow: black 1px 1px 2px, red 0 0 1em;
}
a.nhp {
   text-decoration: none;
   text-shadow: black 1px 1px 2px, green 0 0 1em;
}
/* стат неон leonP4 All-For-Kompa.RU */

а эта часть за сам вид текста

Code
/* стат  текст leonP4 All-For-Kompa.RU */
h3#nasposetili {
   font: normal 15.4px tahoma;
   position: relative;
   color: #00B2FF;
   padding: 10px 0px;

}
h3#nasposetili span {
   position: absolute;
   top: 22px;
   left: 0;
   width: 100%;
   height: 9px;
   background: #FFF; /* цвет накладываемого блока, должен совпадать с цветом фона основного блока */
   overflow: hidden;
   opacity: 0.45;
   filter: alpha(opacity=45);
}
/* стат текст leonP4 All-For-Kompa.RU */

идём дальше!

теперь после того как подключили CSS будем работать с кодовой частью:

Code
<div class="infmes">
   <a class="nhp" onclick="$('#ktoposetil').slideToggle('slow');" href="javascript://"><h3 id="nasposetili"><b>Нас сегодня посетили</b><span></span></h3> </a>
   <div style="display: none;" id="ktoposetil">
   здесь любая информация
   </div></div>

ой чуть не забыл, нужно ещё CSS код рамки прописать:

возвращаемся обратно в CSS и дописываем это:

Code
.infmes {border:1px dashed #b2b2b2;margin:5px 0 3px 0;padding:5px;background:#fff;font-size:7pt; color:#828282;}

теперь всё готово! наслаждаемся красивым видом!
небольшой код подготовил leonP4
источник: www.all-for-kompa.ru

скрытие копирайтов влечёт за собой закрытие вашего сайта хостингом wink

Прикрепления: 0550259.gif(24.7 Kb)


Админ - Первый источник флуда на форуме =)
 
Форум » Владельцу сайта » HTML, JS, CSS. » Неон спойлер с плавным переходом в стиле WEB 2.0 - leonP4
  • Страница 1 из 1
  • 1
Поиск:
Реклама