Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Vildan

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

Recommended Posts

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

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

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

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

post-47782-0-49886700-1326584244_thumb.jpg

Edited by Vildan

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

Edited by Vildan

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Edited by weiss

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

rgba( 0, 0, 0, 0.5);

, а это

background: rgb( 0, 0, 0);

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...