Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Vildan

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

Рекомендованные сообщения

01/14/12 23:37 (изменено)

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

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

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

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

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

Изменено пользователем Vildan

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
01/15/12 11:17 (изменено)

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

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

Изменено пользователем Vildan

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение
01/15/12 11:48 (изменено)

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

Изменено пользователем weiss

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

rgba( 0, 0, 0, 0.5);

, а это

background: rgb( 0, 0, 0);

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

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...