Навигационные кнопки

#1 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

Отправлено 15 Январь 2012 - 02:36

Как сделали такие кнопки? Я так понимаю это полупрозрачный файл png.
Если дефолтные кнопки, то там ясно. Указан просто цвет. Размер подбирается по количеству букв. Но как в таком случае обстоит, когда за это отвечает какой то файл? Неужели какая то фоновая картинка растягивается?
И где этот файл прописывается (в смысле если я создам этот png, то как его потом поставть на замену?)
Спасибо, с уважением.

Вложений

bot.jpg (16,88К)
Количество загрузок: 51

Сообщение изменено: Vildan (15 Январь 2012 - 02:38)

Наверх of the page up there ^

#2 newbie

Advanced

Группа: IPB Specialist
Сообщений: 286
Регистрация: 26-Октябрь 11
Репутация: 70
IPB version:I have no IPB

Отправлено 15 Январь 2012 - 13:56

Чего сделали-то?
Цвета поменяли, свойства добавили.
Есть вкладки активные (на скриншоте "Обсуждения")
Есть вкладки неактивные (на скрине остальные)
Есть эффект при наведении курсора мыши на вкладку.

У primary_nav убрали бэкграунд.

Наверх of the page up there ^

#3 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 14:16

Тут все ясно. Нав. бар и фон неактивных кнопок прозрачными сделали и т.д.
Я имею ввиду как вообще сделать у себя что бы выбранная кнопка тоже так выглядела (в смысле полупрзрачным прямоугольником). Как рисовать полупрозрачные прямоугольники я знаю) Я имею ввиду как прикрутить потом фоновую картинку кнопки правильно что бы так тоже было. Вот.

Сообщение изменено: Vildan (15 Январь 2012 - 14:27)

Наверх of the page up there ^

#4 newbie

Advanced

Группа: IPB Specialist
Сообщений: 286
Регистрация: 26-Октябрь 11
Репутация: 70
IPB version:I have no IPB

Отправлено 15 Январь 2012 - 14:28

Vildan сказал(а):

бы выбранная ссылка тоже выглядела (в смысле полупрзрачным прямоугольником

Там используется серый цвет бэкграунда / прозрачность применена к бэкграунду / border-radius. Это все CSS.

Наверх of the page up there ^

#5 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 14:35

Эх товарищ, такими заумными выражениями говорите :rolleyes:

Вот какой у меня код:

#primary_nav a {
		color: #c5d5e2;
		background: transparent;
		display: block;
		padding: 6px 15px 8px;
		text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
	}

		#primary_nav a:hover, #primary_nav a.menu_active { background: transparent; color: #fff; }
	
	
	#primary_nav .active a {
		background: #fff;
		color: #0b5794;
		font-weight: bold;
		margin-top: 0;
		text-shadow: none;
	}

Подскажите пожалуйста что исправить что бы так тоже было.

Наверх of the page up there ^

#6 weiss

Advanced

Группа: IPB Specialist
Сообщений: 113
Регистрация: 07-Август 11
Репутация: 14
Откуда:Rivendell
IPB version:3.2.x

Отправлено 15 Январь 2012 - 14:47

Насколько я понимаю, тут не форум помощи новичкам HTML/CSS. Учебник: htmlbook.ru, иначе можно спрашивать про каждую загогулину, которая вам понравится.

Сообщение изменено: weiss (15 Январь 2012 - 14:48)

Наверх of the page up there ^

#7 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 14:49

Я примеру врач. Если ко мне приходит человек, то я не говорю ему иди учись в мед. или почитай анатомию + физиологию + биохимию и много другого.

Наверх of the page up there ^

#8 weiss

Advanced

Группа: IPB Specialist
Сообщений: 113
Регистрация: 07-Август 11
Репутация: 14
Откуда:Rivendell
IPB version:3.2.x

Отправлено 15 Январь 2012 - 14:58

Vildan,если вы думаете, что с вами все должны нянчиться, потому что вы не хотите получать каждому веб-мастеру необходимые для работы знания, то могу вас огорчить. И выше вам уже все сказали. Кнопка эта делается очень просто с помощью CSS3 и фонового изображения. На глаз видно свойства border, border-radius и background. Если вам нужен конкретный код, смотрите исходник сайта.

Наверх of the page up there ^

#9 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 15:10

Уважаемый, я только недавно начал изучать CSS и для меня не всегда все ясно. И Вы сударь не можете мне указывать что делать, так как я смотрю Вы тоже просто Member. Если кто то скажет с Teama, тогда не вопрос.

Наверх of the page up there ^

#10 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 19:20

newbie 15 Январь 2012 - 13:56 сказал(а):

Да, спасибо. Разобрался) Было трудно, но теперь знаю что к чему. Единственное что я не могу понять...
Вот что получилось:

#primary_nav .active a {
                   background: rgb( 0, 0, 0);
		background: rgba( 0, 0, 0, 0.5);
                   border: 1px solid black;
		color: #fff;
                   border-radius: 3px 3px 3px 3px;
                   box-shadow: inset 0 -1px 0 #fff;
		font-weight: bold;
		margin-top: 0;
		text-shadow: none;

Вот где

border: 1px solid black;

почему не работает если поставить к примеру #000 (хотя как и любой код цвета через #)?

Наверх of the page up there ^

#11 Ph-A

Advanced

Группа: IPB Skins Team
Сообщений: 5 307
Регистрация: 18-Сентябрь 06
Репутация: 304
Откуда:Moscow
IPB version:3.1.x

Отправлено 15 Январь 2012 - 19:45

border разве не использует цвет background?

Наверх of the page up there ^

#12 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 20:57

В данном случае нет. Тут же фон полупрзрачный

rgba( 0, 0, 0, 0.5);

, а это

background: rgb( 0, 0, 0);

альтернатива в случае если браузер не держит полупрозрачный фон. Если я уберу border, то фон будет без обводки. Народ, кто знает почему нельзя цвет в шест. виде написать (#******)?

Наверх of the page up there ^

#13 Ph-A

Advanced

Группа: IPB Skins Team
Сообщений: 5 307
Регистрация: 18-Сентябрь 06
Репутация: 304
Откуда:Moscow
IPB version:3.1.x

Отправлено 15 Январь 2012 - 21:18

Vildan сказал(а):

Народ, кто знает почему нельзя цвет в шест. виде написать (#******)?

Можно. Тег border-color

Наверх of the page up there ^

#14 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 15 Январь 2012 - 21:23

То то что этот тег не работает. Поэтому просто написал бордер. Если не верите, то проверьте сами))

Наверх of the page up there ^

#15 newbie

Advanced

Группа: IPB Specialist
Сообщений: 286
Регистрация: 26-Октябрь 11
Репутация: 70
IPB version:I have no IPB

Отправлено 16 Январь 2012 - 09:06

border включает в себя: border-width, border-style и border-color. Можно отдельно писать:

Vildan сказал(а):

Если не верите, то проверьте сами))

Проверил - работает.

Плюс по border-radius почитайте про -webkit-border-radius и -moz-border-radius. Да и с box-shadow не все так просто.
Вообщем при добавлении свойства смотрите возможные исключения для различных браузеров в туториалах.

Наверх of the page up there ^

2 Страниц
1
2
→

Вы не можете создавать новые темы
Вы не можете отвечать в этой теме

Навигационные кнопки - Дизайн и модификация Invision Power Board

Правила раздела