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

[Vildan 3]

Как сделали такие кнопки? Я так понимаю это полупрозрачный файл png.

Если дефолтные кнопки, то там ясно. Указан просто цвет. Размер подбирается по количеству букв. Но как в таком случае обстоит, когда за это отвечает какой то файл? Неужели какая то фоновая картинка растягивается?

И где этот файл прописывается (в смысле если я создам этот png, то как его потом поставть на замену?)

Спасибо, с уважением.

Edited January 14, 2012 by Vildan

[newbie 1,718]

Чего сделали-то?

Цвета поменяли, свойства добавили.

Есть вкладки активные (на скриншоте "Обсуждения")

Есть вкладки неактивные (на скрине остальные)

Есть эффект при наведении курсора мыши на вкладку.

 

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

[Vildan 3]

Тут все ясно. Нав. бар и фон неактивных кнопок прозрачными сделали и т.д.

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

Edited January 15, 2012 by Vildan

[newbie 1,718]

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

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

[Vildan 3]

Эх товарищ, такими заумными выражениями говорите :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;
}

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

[weiss 34]

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

Edited January 15, 2012 by weiss

[Vildan 3]

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

[weiss 34]

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

[Vildan 3]

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

[Vildan 3]

Чего сделали-то?

Цвета поменяли, свойства добавили.

Есть вкладки активные (на скриншоте "Обсуждения")

Есть вкладки неактивные (на скрине остальные)

Есть эффект при наведении курсора мыши на вкладку.

 

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

 

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

Вот что получилось:

#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 (хотя как и любой код цвета через #)?

[Ph-A 395]

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

[Vildan 3]

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

rgba( 0, 0, 0, 0.5);

, а это

background: rgb( 0, 0, 0);

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

[Ph-A 395]

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

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

[Vildan 3]

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

[newbie 1,718]

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

 

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

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

 

Плюс по border-radius почитайте про -webkit-border-radius и -moz-border-radius. Да и с box-shadow не все так просто.

Вообщем при добавлении свойства смотрите возможные исключения для различных браузеров в туториалах.