Здравейте! Значи интересува ме следното: в много има бутони със заоблени ъгли. Гледах няколко темплейта там го правят с ul и li, а картинките са сейвани малко различно, от това както аз ги сейвам и за хоувър състоянието е една картинка заедно с нормалното състояние на бутона. Искам да попитам някой може ли да ми даде идея как да стане такъв бутон но като да речем лявата и дясната част на бутона са запазени като картинки с определена ширина и централна част, която да може да се разтяга според дължината на думата в бутона. Както и да се направи за хоувър състояние да бъде друга картинка. Дано сте ме разбрали.
Заоблени бутони
- Автор odyssey
- Начална дата
Това, че двата фона на бутона са на едно изображение, си има цел. Това се казват спрайтове и специално за бутоните и изключително важно да го направиш така, защото ако фона за hover е на отделно изображение, това изображение не се зарежда от браузъра и когато сложиш показалеца на мишката върху бутона, преди фона да се смени, за половин секунда бутона остава без фоново изображение (докато се изтегли фона за hover) и се получава едно много неприятно примигване, което прецаква ефекта.
Затова всичко, което има друг фон за hover, трябва и двата му фона да са на едно изображение, за да не примигва.
Освен това дори е хубаво да използваш спрайтове за всичко в сайта, защото така драстично се намалява размерът на изображенията и се намаляват HTTP заявките на страницата ти и така сайтът е много по-оптимизиран и зарежда по-бързо.
Ето ти един примерен спрайт: http://media.smashingmagazine.com/images/css-sprites/amazon.png
Затова всичко, което има друг фон за hover, трябва и двата му фона да са на едно изображение, за да не примигва.
Освен това дори е хубаво да използваш спрайтове за всичко в сайта, защото така драстично се намалява размерът на изображенията и се намаляват HTTP заявките на страницата ти и така сайтът е много по-оптимизиран и зарежда по-бързо.
Ето ти един примерен спрайт: http://media.smashingmagazine.com/images/css-sprites/amazon.png