Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


Здравейте приятели!

В поредната ни среща ще се научим как се прави динамичен бутон за уеб-сайт с помощта на CSS. В този урок се предполага, че вие имате базови понятия по програма Photoshop, а още по HTML и по CSS, за което поднасям изложеното по-сбито.

За целта са нужни графичен редактор (аз предпочитам Photoshop, а вие както ви е удобно). Нужен е още текстови редактор, в когото ще пишем изпълнимия код за сайта. Препроръчвам ви PSPad editor за целта и на края браузер - Firefox.

Част първа. Извайваме бутона

Стартираме графичния редактор и създаваме нов документ с размери равни на бъдещия бутон. Те трябва да са с определен запас спрямо размерите на текста върху бутона. По хода на изпълнието ще разберете защо.

Документът получава име "button" и размери 408px на 40px. В крак с заоблените форми ще ползваме инструмент Shape и зададем съответно радиус от 5px. За собствено удобство ползвам спомагателни линии по границите и включвам фунция прилепване от меню View. Превключвам на палитра Styles. Тази палитра върши черната работа и е достатъчно само да се посочи нужния стил, за да придаде завършен вид на бутона.

Стиловете по подразбиране в Photoshop са малко на брой и неподходящи. С ключова фраза "Web 2 styles for Photoshop" може да попаднете на изобилие от ресурси и да изтеглите за вас. Остава да ги заредите в вашия Photoshop - Edit >Preset Manager > Preset Type: Styles > Load...
рисуване на бутон
Следва стандартна процедура по удвояване на слоя и леко видоизменение.

Дублираме слоя с гореща комбинация Ctrl+J. Копието пускаме под оригинала и подбираме стил различен от първия. За да станат нещата видими се налага да увеличим Canvas на нови 40px, а това на практика прави документа 408px на 80px. Сливаме двата слоя в един. Сега е момента да напишете текст върху бутона, за да съчетаете цветовете и се ориентирате какъв ще бъде номера му в HTML-измерение. Определили се с цвета на текста можете да премахнете слоя на същия.

Задайте размери на инструмент "Правоъгълна област" 23px на 80px и кропнете дясната част на бутона. Съхранете полученото под име button-r, например.

С гореща комбинация Ctrl+Z се върнете в първоначална позиция и отрежете по същия начин област в лявата част на бутона с размери 385px на 80px. Съхранете полученото под име button-l.
photoshop button
В краен резултат трябва да разполагате с две подобни изображения.
button-l
button-r

Част втора. Вдъхваме му живот


В тази част ще оживим нашия бутон или настъпи време за PSPad редактор.

Създаваме нов файл и в него копираме приложения HTML-код. На лице е таг a с адрес и приложен клас button, а вътре в линка добавяме таг span. Таг span заключва съдържанието на бутона, тоест, текста върху него.

html

Галерия
Описанието на бутона ще извършим чрез стилове в CSS. Воля ваша дали ще бъдат вътрешни или изнесени в външен файл.

css

.button {
 display:block;
 background:url(button-r.png);
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:23px;
 float:left;
 outline:none;
 text-decoration:none;
}
 
.button span {
 display:block;
 line-height:10px;
 background:url(button-l.png);
 background-repeat:no-repeat;
 padding:15px 0 15px 23px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight: bold;
 color:#e5e5e5;
}

.button:hover{
 background-position:100% -40px;
}

.button:hover span{
 background-position:0% -40px;
 color:#4c4b4b;
 font-weight: bold;
}
Нека погледнем CSS отблизо и видим, че няма нищо сложно.
В началото се описва стиловете на нашия линк в клас button. Първи пунк преобразува нашия линк в блоков елемент. Под него задаваме изображение в качество на фон. Това е дясната част на бутона (малката). Позиционираме го да застане горе в дясно и забраняваме повторението. Задаваме отстъп в дясно в пиксели равни на ширината на изображението. В случая 23px. Нагледно може да зададете по-голямо значение и да погледнете какво ще се случи в браузъра. За да не се разтяга бутона по цялата дължина на контейнера добавяме float:left.
outline:none премахва специфична рамка на точки, която добавя браузър firefox (предполагаме, че навигацията няма да се извършва от клавиатура).
От естетическа гледна точка декорация на текста е излишна, типичното подчертаване при посочване на линк, за това го премахваме с text-decoration:none.

Следват свойствата за таг span, които са заключени в него и естествено в началото преобразуваме в блоков елемент. Следва свойство line-height, за което задаваме височина на базовата линия на текста. В качество на фон дойде ред на лявата част на бутона. Забраняваме повторението. По повод отстъпите, задаваме по часовниковата стрелка съответните размери и тук следва чиста математика. line-height е 10рx, a нашия бутон е 40px. 40 - 10 = 30. 30/2 е по 15px отстъп отгоре и отдолу. По аналогия отсъпа от 23px в горната част на стиловете, пишем същата стойност за ляв отстъп. Следва избор на гарнитура, размер и цвят, като предпочетох удебелен текст за по-добра читаемост.

Поредните два пункта отговарят за поведението на бутона при посочване с курсора на мишката.
Позицията на button:hover по вертикала е с отрицателен знак и размер 40px. При посочване с курсора изображението ще се измести нагоре. А за по-голям ефект изменяме цвета на текста и това става, чрез hover span.

Част трета. Резултат

Защо постигнахме нещата по този начин, се питате вие?
Представете си, че след време решите да направите редизайн на сайта и съответно се наложи бутона, да има по-дълго име. Например, "Галерия" в "Моята Флаш Галерия". Всичко е ОК. Редактирате само в HTML-часта и пишете новия текст, без да се налага да прерисувате на ново бутона.



до нови срещи   ^.^

22.10.2010 profruit 

0 Response to "Направа на динамичен бутон чрез CSS"

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога