Vildan 3 01/14/2012 11:37 PM (edited) Как сделали такие кнопки? Я так понимаю это полупрозрачный файл png. Если дефолтные кнопки, то там ясно. Указан просто цвет. Размер подбирается по количеству букв. Но как в таком случае обстоит, когда за это отвечает какой то файл? Неужели какая то фоновая картинка растягивается?И где этот файл прописывается (в смысле если я создам этот png, то как его потом поставть на замену?)Спасибо, с уважением. Edited January 14, 2012 by Vildan Share this post Link to post Share on other sites
newbie 1,718 01/15/2012 10:57 AM Чего сделали-то?Цвета поменяли, свойства добавили.Есть вкладки активные (на скриншоте "Обсуждения")Есть вкладки неактивные (на скрине остальные)Есть эффект при наведении курсора мыши на вкладку. У primary_nav убрали бэкграунд. Share this post Link to post Share on other sites
Vildan 3 01/15/2012 11:17 AM (edited) Тут все ясно. Нав. бар и фон неактивных кнопок прозрачными сделали и т.д.Я имею ввиду как вообще сделать у себя что бы выбранная кнопка тоже так выглядела (в смысле полупрзрачным прямоугольником). Как рисовать полупрозрачные прямоугольники я знаю) Я имею ввиду как прикрутить потом фоновую картинку кнопки правильно что бы так тоже было. Вот. Edited January 15, 2012 by Vildan Share this post Link to post Share on other sites
newbie 1,718 01/15/2012 11:29 AM бы выбранная ссылка тоже выглядела (в смысле полупрзрачным прямоугольникомТам используется серый цвет бэкграунда / прозрачность применена к бэкграунду / border-radius. Это все CSS. Share this post Link to post Share on other sites
Vildan 3 01/15/2012 11:36 AM Эх товарищ, такими заумными выражениями говорите :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
weiss 34 01/15/2012 11:48 AM (edited) Насколько я понимаю, тут не форум помощи новичкам HTML/CSS. Учебник: htmlbook.ru, иначе можно спрашивать про каждую загогулину, которая вам понравится. Edited January 15, 2012 by weiss Share this post Link to post Share on other sites
Vildan 3 01/15/2012 11:50 AM Я примеру врач. Если ко мне приходит человек, то я не говорю ему иди учись в мед. или почитай анатомию + физиологию + биохимию и много другого. Share this post Link to post Share on other sites
weiss 34 01/15/2012 11:59 AM @Vildan,если вы думаете, что с вами все должны нянчиться, потому что вы не хотите получать каждому веб-мастеру необходимые для работы знания, то могу вас огорчить. И выше вам уже все сказали. Кнопка эта делается очень просто с помощью CSS3 и фонового изображения. На глаз видно свойства border, border-radius и background. Если вам нужен конкретный код, смотрите исходник сайта. Share this post Link to post Share on other sites
Vildan 3 01/15/2012 12:11 PM Уважаемый, я только недавно начал изучать CSS и для меня не всегда все ясно. И Вы сударь не можете мне указывать что делать, так как я смотрю Вы тоже просто Member. Если кто то скажет с Teama, тогда не вопрос. Share this post Link to post Share on other sites
Vildan 3 01/15/2012 04:21 PM Чего сделали-то?Цвета поменяли, свойства добавили.Есть вкладки активные (на скриншоте "Обсуждения")Есть вкладки неактивные (на скрине остальные)Есть эффект при наведении курсора мыши на вкладку. У 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
Ph-A 395 01/15/2012 04:46 PM border разве не использует цвет background? Share this post Link to post Share on other sites
Vildan 3 01/15/2012 05:58 PM В данном случае нет. Тут же фон полупрзрачный rgba( 0, 0, 0, 0.5);, а это background: rgb( 0, 0, 0); альтернатива в случае если браузер не держит полупрозрачный фон. Если я уберу border, то фон будет без обводки. Народ, кто знает почему нельзя цвет в шест. виде написать (#******)? Share this post Link to post Share on other sites
Ph-A 395 01/15/2012 06:19 PM Народ, кто знает почему нельзя цвет в шест. виде написать (#******)? Можно. Тег border-color Share this post Link to post Share on other sites
Vildan 3 01/15/2012 06:24 PM То то что этот тег не работает. Поэтому просто написал бордер. Если не верите, то проверьте сами)) Share this post Link to post Share on other sites
newbie 1,718 01/16/2012 06:07 AM 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