|
   |
| Форум » Система uCoz » Авторство © RuRip.Ru » Дополнения к дизайну |
| Дополнения к дизайну |
Полное имя: Слава Головкин
Ранг: Генерал-лейтенант ICQ: 648978805 Skype: css-slon Вконтакте: нет данных 
V.I.P
Слава полный уебан)))))
Сообщений: 12
Награды: 38
» 78 «
[Table]
 [/Table] Вот сверстал несколько элементов для дизайна в серо-синих тонах. Некоторые стоят на данной рип студии. Всё адаптированно под систему uCoz. Потом ещё сделаю горизонтальное меню с выдвижением и горизонтальным профилем, если получиться то и переключатели страниц. Всё в таком же стиле. [bluetable]Демо.[/bluetable] [Table]Поиск:[/Table] [graytable]Серый поиск[/graytable] [Table]Вставить в ваш CSS:[/Table] Code .gray-search {width:198px; height:32px; padding:0; margin:0 0 5px 0; border:0;} .gray-search input[type="text"] {float:left; background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat 0 top; width:166px; height:32px; border:0; padding:0 12px; font-family:arial; font-size:11px; color:#8e8e8e;} .gray-search input[type="submit"] {background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat 0 -32px; width:32px; height:32px; border:0; padding:0;} .gray-search input[type="submit"]:hover {cursor:pointer; background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat -32px -32px;} [Table]Вставить в ваш код дизайна:[/Table] Code <form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/" class="gray-search"> <input name="q" type="text" value="search..." onblur="if(this.value=='')this.value='search...'" onfocus="if(this.value=='search...')this.value=''"> <input name="sfSbm" type="submit" value=" "> </form> [bluetable]Синий поиск[/bluetable] [Table]Вставить в ваш CSS:[/Table] Code .blue-search {width:198px; height:32px; padding:0; margin:0; border:0;} .blue-search input[type="text"] {float:left; background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat 0 top; width:166px; height:32px; border:0; padding:0 12px; font-family:arial; font-size:11px; color:#8e8e8e;} .blue-search input[type="submit"] {background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat -64px -32px; width:32px; height:32px; border:0; padding:0;} .blue-search input[type="submit"]:hover {cursor:pointer; background:url('http://rurip.ru/skripty/gb-elements/search.png') no-repeat -96px -32px;} [Table]Вставить в ваш код дизайна:[/Table] Code <form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/" class="blue-search"> <input name="q" type="text" value="search..." onblur="if(this.value=='')this.value='search...'" onfocus="if(this.value=='search...')this.value=''"> <input name="sfSbm" type="submit" value=" "> </form> [Table]Теги:[/Table] [graytable]Серые теги[/graytable] [Table]Вставить в ваш CSS:[/Table] Code .gray-tags {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') repeat-x 0 -29px; height:29px; overflow:hidden; line-height:30px; font-family:arial; font-size:11px; color:#9b9b9b; text-shadow:0 1px 0 #fff; text-align:left; margin:0 0 5px 0;} .gray-tags_r{display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') no-repeat right -58px; height:29px; overflow:hidden; padding:0 18px 0 0;} .gray-tags_l {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') no-repeat left 0; height:29px; overflow:hidden; padding:0 0 0 9px;} .gray-tags a {font-family:arial; font-size:11px; color:#9b9b9b; text-shadow:0 1px 0 #fff;} [Table]Вставить в ваш код дизайна:[/Table] Code <?if($TAGS$)?><div class="gray-tags"><div class="gray-tags_r"><div class="gray-tags_l">$TAGS$</div></div></div><?endif?> [bluetable]Синие теги[/bluetable] [Table]Вставить в ваш CSS:[/Table] Code .blue-tags {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') repeat-x 0 -114px; height:27px; overflow:hidden; line-height:26px; font-family:arial; font-size:11px; color:#f5f5f5; text-shadow:0 1px 0 #51bee1; text-align:right; margin:0 0 5px 0;} .blue-tags_r {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') no-repeat right -87px; height:27px; overflow:hidden; padding:0 9px 0 0;} .blue-tags_l {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/tags.png') no-repeat left -141px; height:27px; overflow:hidden; padding:0 0 0 18px;} .blue-tags a {font-family:arial; font-size:11px; color:#f5f5f5; text-shadow:0 1px 0 #51bee1;} [Table]Вставить в ваш код дизайна:[/Table] Code <?if($TAGS$)?><div class="blue-tags"><div class="blue-tags_r"><div class="blue-tags_l">$TAGS$</div></div></div><?endif?> [Table]Кнопка "Выйти"[/Table] [Table]Вставишь в ваш CSS:[/Table] Code a.logout {display:block; background:url('http://rurip.ru/skripty/gb-elements/logout.png') no-repeat 0 0; width:63px; height:63px;} a:hover.logout {background:url('http://rurip.ru/skripty/gb-elements/logout.png') no-repeat 0 -63px;} a:active.logout {background:url('http://rurip.ru/skripty/gb-elements/logout.png') no-repeat 0 -126px;} [Table]Вставить в ваш код дизайна:[/Table] Code <?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$" class="logout"></a><?endif?> [graytable]Кнопка "Live demo"[/graytable] [Table]Вставить в ваш код CSS:[/Table] Code a.live-demo {display:block; width:110px; height:32px; background:url('http://rurip.ru/skripty/gb-elements/live-demo.png') no-repeat 0 0;} a:hover.live-demo {background:url('http://rurip.ru/skripty/gb-elements/live-demo.png') no-repeat 0 -32px;} a:active.live-demo {background:url('http://rurip.ru/skripty/gb-elements/live-demo.png') no-repeat 0 -64px;} [Table]Вставить в ваш код дизайна:[/Table] Code <a href="#" class="live-demo"></a> [bluetable]Кнопка "downloads"[/bluetable] [Table]Вставить в ваш код CSS:[/Table] Code a.downloads {display:block; width:108px; height:28px; background:url('http://rurip.ru/skripty/gb-elements/downloads.png') no-repeat 0 0;} a:hover.downloads {background:url('http://rurip.ru/skripty/gb-elements/downloads.png') no-repeat 0 -28px;} a:active.downloads {background:url('http://rurip.ru/skripty/gb-elements/downloads.png') no-repeat 0 -56px;} [Table]Вставить в ваш код дизайна:[/Table] Code <?if($FILE_URL$ || $RFILE_URL$)?><a href="<?if($FILE_URL$)?>$FILE_URL$<?else?>$RFILE_URL$<?endif?>" class="downloads"></a><?endif?> [graytable]Блок стрелок №1[/graytable] [Table]Вставить в ваш код CSS:[/Table] Code a.arrow-right {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat 0 0; width:17px; height:18px; margin:4px 8px 4px 0;} a:hover.arrow-right {background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat 0 -18px;} a.arrow-down {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -17px 0; width:17px; height:18px; margin:4px 8px 4px 0;} a:hover.arrow-down {background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -17px -18px;} a.arrow-left {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -34px 0; width:17px; height:18px; margin:4px 8px 4px 0;} a:hover.arrow-left {background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -34px -18px;} a.arrow-top {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -51px 0; width:17px; height:18px; margin:4px 0;} a:hover.arrow-top {background:url('http://rurip.ru/skripty/gb-elements/arrows.png') no-repeat -51px -18px;} [Table]Вставить в ваш код дизайна:[/Table] Code <a href="#" class="arrow-right"></a> <a href="#" class="arrow-down"></a> <a href="#" class="arrow-left"></a> <a href="#" class="arrow-top"></a> [graytable]Блок стрелок №2[/graytable] [Table]Вставить в ваш код CSS:[/Table] Code a.arrow-right2 {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat 0 0; width:29px; height:28px; margin:4px 4px 4px 0;} a:hover.arrow-right2 {background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat 0 -28px;} a.arrow-down2 {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -29px 0; width:29px; height:28px; margin:4px 4px 4px 0;} a:hover.arrow-down2 {background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -29px -28px;} a.arrow-left2 {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -58px 0; width:29px; height:28px; margin:4px 4px 4px 0;} a:hover.arrow-left2 {background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -58px -28px;} a.arrow-top2 {display:inline-block; background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -87px 0; width:29px; height:28px; margin:4px 4px 4px 0;} a:hover.arrow-top2 {background:url('http://rurip.ru/skripty/gb-elements/arrows2.png') no-repeat -87px -28px;} [Table]Вставить в ваш код дизайна:[/Table] Code <a href="#" class="arrow-right2"></a> <a href="#" class="arrow-down2"></a> <a href="#" class="arrow-left2"></a> <a href="#" class="arrow-top2"></a> [bluetable]Рейтинг "Звёзды"[/bluetable] [Table]Вставить в код дизайна:[/Table] Code <?$RSTARS$('23','http://rurip.ru/skripty/gb-elements/rating.png','1','float')?> [bluetable]Рейтинг "Кнопки"[/bluetable] Code <?$RSTARS$('8','http://rurip.ru/skripty/gb-elements/rating-button.png','1','float')?> [redtable]Баги могут быть, если у вас стоит "Значение тега <!DOCTYPE>, без него всё должно работать корректно![/redtable] [greentable]Писать о проблемах в эту тему, буду писать ответы, если увижу вопросы![/greentable] 
|
| |||
| |||
