Воскресенье, 28.04.2024, 11:02
Главная Регистрация RSS
Приветствую Вас, Гость
Меню сайта
Форма входа
Категории раздела
скрипты для ucoz [269]
Фильмы/Видео/Клипы [1]
Игры/Все для игр [0]
Музыка [0]
Софт [0]
игры для телефона [0]
Календарь
«  Март 2012  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Меню сайта
Форма входа
Категории раздела
скрипты для ucoz [269]
Фильмы/Видео/Клипы [1]
Игры/Все для игр [0]
Музыка [0]
Софт [0]
игры для телефона [0]
Календарь
«  Март 2012  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Друзья, теперь вы можете читать и комментировать мои записи и на Я.ру — Multen!

Главная » 2012 » Март » 4 » 2 новых спойлера в стиле "vk" и "facebook"
19:13
2 новых спойлера в стиле "vk" и "facebook"

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

Вставляем в CSS в любое место

В стиле "vk":
Code
.uSpoilerButton {  
width: 100%;  
border: none;  
background: #FFF;  
padding: 9px;  
color: #2B587A;  
cursor: pointer;  
}  

.uSpoilerButton:hover {  
background: #E9EDF1;  
}  

.uSpoilerText {  
margin-top: -10px;  
padding: 0 5 5 5px;  
}

В стиле "facebook":
Code
.uSpoilerButton {  
width: 100%;  
border: none;  
background: #FFF;  
padding: 3 0 3 0px;  
margin-left: -3px;  
color: #333;  
font-size: 17px;  
font-weight: bold;  
text-align: left;  
cursor: pointer;  
background:url(http://usite.su/images/facebook_us.png) no-repeat; //изображение 1px  
}  

.uSpoilerClosed {  
border-bottom: 1px solid #D9D9D9;  
margin-bottom: -4px;  
padding-bottom: 10px;  
background:url(http://usite.su/images/facebook_us2.png) no-repeat right top; //изображение +  
}  

.uSpoilerOpened {  
border-bottom: 1px solid #D9D9D9;  
padding-bottom: 23px;  
background:url(http://usite.su/images/facebook_us3.png) no-repeat right top; //изображение -  
}  

.uSpoilerText {  
margin-top: -20px;  
font-size: 15px;  
color: #333;  
}
Категория: скрипты для ucoz | Просмотров: 429 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]