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 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


No matter how smart think You are, do not forget that you're ugly!
Грозната физиономия обезсмисля абсолютно всички останали качества. Външният вид винаги е на първо място, защото от време оно е казано, че красотата ще спаси света.

В центъра на Якоруда, точно на чершията, има едно тарикатско заведение за теб. Сервират кюфтета на промоционални цени "по рецептата на бай Наки за готини хора", разбирай манекени. Обаче Face control-a е много силен, ще ти трябват дебели връзки за да влезеш.


Тези мисли пукат главата ми по шевовете и за да поддържам в кондиция манекенското ми тяло заминах на море. С колата и една бира. Аз живея на 800м от морето, а колата е дизелова, та с нея ходя и до кенефа или когато ходя на прически при Земфир Зайцев.

Едно терзание ме мъчи. Нoрмалната височина на мъжа манекен. Аз съм висoк 199.5сm, а искам да съм 200сm. Xoрата ме успокoяват като ми казват, че 5mm не са от значение, но това не е така. 5mm са от огромно значение. Те са стратегически важни за ръста на стойностния мъж, като му променят цялата визия и структура, а да не говорим за достойнството, което е няколко пъти по - малко. Например, ако си 199.5см висoк изглеждаш пo един начин, но акo си 200сm, ще изглеждаш по съвършено различен нaчин.

Блогът има аларма и това прекъсна мислите ми. Докато съм се отдавал на вътрешните ми терзания, разкрепостени селяни ми завидели и пробили дупка в блога. Бъдете нащрек, като четете надолу, да не паднете в дупката. Аз отивам за вар и тухли, да я закърпя, че току виж някой се орясал нощяска.

Чист CSS3 Бутон

Бутонът, когото виждате е пълнофункционален. Постигнат е само с помощта на CSS3, без изображения.

С HTML-кода нещата са ясни. На лице е таг а с адрес, приложен клас cssbutton и име на бутона.
Profruit
Нещата при CSS изглеждат привидно дълги, но и те имат своето обяснение. Стилът формира три състояния на бутона: текущо, курсор над бутона и активно. Всичко се свежда до математика, интуиция и находчивост. Разбира се, всеки един селектор с прилежащо свойство/атрибут е нужно да се знае.

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

Ограничаваме декорацията на текста и рамката, която firefox създава около връзки.

Сенките само подсилват ефекта на обемен бутон в крак с web2.0 Te на свой ред променят ъгъла на падане при натиснат бутон, за да се създаде ефект на натиснат бутон. Това положение създава впечатление, че текста се мести и се налага корекция, чрез създаване на поле в ляво от 7px и преоразмеряване на външния размер на бутона до 215px. Тази аналогия важи и за активно състояние, което определя нужни значения.

В CSS3 облите ъгли се задават от селектор ...-radius, който за всеки един браузър има специфичен начин на запис и това се чете от коментарите в кода.
.cssbutton{
  width: 222px;
  height: 68px;
  display: block;
  text-align: center;
  background: #e0e0e0;
  color: #d1d1d1;
  border:1px solid #a8a8a8;
  font:2.4em/66px  Georgia;
  text-decoration: none;
  outline: none;
  text-shadow: -1px -1px #fff, 1px 1px #333;
  -moz-border-radius: 8px; /* firefox */
  -webkit-border-radius: 8px; /* chrome */
  border-radius: 8px; /* opera */
}
.cssbutton:hover{
  width: 215px;
  padding-left: 7px;
  color: #c8c8c8;
  text-shadow: 1px 1px #fff, -1px -1px #444;
  line-height: 72px;
}
.cssbutton:active{
  background: #a9c6e7;
  width: 218px;
  padding-left: 6px;
  color: #fff;
  line-height: 66px;
  text-shadow: 1px 1px 3px #000;
}
Предимствата са очевидни. Пишеш код и получаваш бутон. Никакви картинки.

Недостатъците обаче поставят този бутон на везна. За съжаление нито една версия на Microsoft Internet Explorer не може да интерпретира правилно кода. Дори IE8 не знае какво е обли ъгли и сянка в CSS3.

Ясно е, че на Къчно от Якоруда като види подобен бутон в Internet Explorer ще си помисли, че уеб-дизайнера се дрогира или се увлича по ташизъм.

Sprite Бутон

Заради Microsoft Internet Explorer статуквото с картинки се запазва.
Счита се, че най-добра практика за показ на трите състояния на бутона е употреба на sprite-изображение.

Браузърите четат кода отгоре на долу и по тази причина ще рисуваме нашата картинка. Слепваме трите състояния в едно изображение, чието обяснение се корени в по-малко http-заявки при отделни картинки и избягване на потреперване при тяхната замяна.
Profruit button


С HTML-кода нещата са ясни и преминаваме към CSS.

Блок с размери на картинката, която е негов фон. Показване блок. Това е нужно за текущо състояние на връзката.

При курсор над бутона (hover), позиционираме картинката с -52px по ос Y, a при активно - удвояваме значението. Позицията по ос Х запазваме чрез значение 0. Това на практика е целия трик с спрайта.
.sprite {
   background: url(button.png) no-repeat 0 0;
   width: 186px;
   height: 52px;
   display: block;
   outline:none;
}
.sprite:hover {
   background-position: 0 -52px;
}
.sprite:active {
   background-position: 0 -104px; 
}
Към споменатите предимства може да се добави оскъдното количество код. Остава да заложите на вашите художествени умения.

Внимание Дупка!


дупка






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

22.10.2010 profruit 

13 Response to "Как да направя CSS бутон"

  1. am-am Said,

    Eхаааааа, много готино :Р
    Я ме светни, как мога да го изпълня, ама само за дадено нещо, т.е. да не е глобално валидно, да НЕ Е част от CSS или между таговете head. Веднъж пробвах една рамка за изображенията в сайта, а тя се люфна и на хедъра, което бе шокиращо грозно.

    ПП: Аз съм vorfax. Нещо ме изхвърля от акаунта като вляза тук ^^

     

  2. Profruit Said,

    При тези условия начина е един, чрез вложени стилове. Да речем, че искаш да направиш рамка около снимка от 5px, то синтаксиса ще изглежда така:
    <img src="адрес на снимката" style="border: 5px solid red;" alt="bla-bla" />
    След (;) добавяш (ако са повече) пореден стил/селектор според замисъла. На това обаче се гледа негативно и съвет е, да се избягва.

     

  3. am-am Said,

    Аха, ясно. Абе, аз пробвах такива неща, ама те рамките са все едни такива прави ъгли, стоят като дърводелски метър. В шаблона ползван от сестричката (http://palavni4e.webnode.com/contact-us/) като добавя едни тагове и става голяма красота - облички, но същите в друг шаблон правят правоъгълници, т.е. има нещо в CSS-а...
    Значи гореописаното мога да натъпча в img тага, правилно ли разбрах?
    Ще пробвам.

    Лека вечер от мен : )

     

  4. Profruit Said,

    Да, правилно си разбрал. Снимките в Punta de Choros са провени така. Ако добавиш към border, padding и background-color ще получиш двуцветна рамка.

    Иначе рисуваш подложка с сянка, примерно, и я слагаш за фон. Виж статията за Омара. Там така съм постигнал.

    Зимата тук дойде. Стана студено. През деня е +26'С, а на морската вода +25'С. Вече ходя с тужурка през деня и спя под юргана.

     

  5. am-am Said,

    Ееех, а аз помня физзарядката при минус 20 градуса... измерено с термометър, не преувеличавам... незаконно беше, ама се кършихме в 5 сутринта, а вятъра преминаваше през нас. Вчера пък си легнах с кокошките, та не можах да се отбия, накъде е тръгнал света... и ний подире му, или го водехме, все тая.
    Дай директен линк за Омара, мъчиш ме така ^^`

    Лека вечер : )

     

  6. Profruit Said,

    Влез в съдържанието (на блога). Ctrl+F и набери в появилия се прозорец Омара. Резултатът ще се оцвети. Просто кликни на него. Аналогично за Punta de Choros, пак в съдържанието.

     

  7. am-am Said,

    Прочетох го, завладяваща история е. Научих неща които не знаех. Не успях да коментирам там, и преди срещах това неудобство. Само 2 снимки ми се зареждат, това нормално ли е?
    Аа, Punta de Choros я четох още като беше на другото място :Р Даже нещо за звездите питах, ако не ме лъже паметта.
    Лека работа и приятна почивка : )

     

  8. am-am Said,

    Имаш поздрави от Федорка, само да вметна.
    лека вечер и приятен предстоящ уикенд : )

     

  9. Profruit Said,

    Станало е чудо и днес (04.12.10) се отбелязва третия ден. Чудото е траяло 8 дни и всеки ден се пали по една свещ. Така всяка година и днес е известно като празник на светлината. Преди всичко се кефиш, че е станало това чудо и ядеш суфгания (поничка). Приемам поздравите и от Федорка тоже, и предай й, да измайстори едни суфганийот (понички). После да ги снима, за да може виртулано да ги изядем (по случай чудото).

    Завърших велик проект. Направих безсмъртен сайт-визитка ... предимно за себе си. Стоя в него и се възхищавам на гениалните ми способности. И тук е ред на напомня, че ако искам достоен отговор ще си отговоря сам, за да съм сигурен, че е качествен. В голям катаклизъм съм и не мога да се реша кое заглавие да избера:
    1. Matrix - rebirth
    2. В стране чудес - Маленький СиЭнСишник
    3. Микрохирурзи

    Клоня към второро.

    Иначе съм добре. Стана още по-студено. През деня чука +26С, но вечер пада на +16С и ми трака ченето.

     

  10. am-am Said,

    Второто е чудно, първото само урбанистично, а третото май го ползваш. Федорка нещо се бъзика с нас, че ще ни изпитва волята или чувствата като ни прани НЕвкусни понички. Иди и пиши, че страда от недостиг на спам, само готвачки я преглеждат, но констатират други признаци за лекуване XD

     

  11. am-am Said,

    Pro, ползвах стиловете за да задам абсолютно позициониране на флашче. Как обаче, да създам опцията за затварянето му? Във filebox1.com изглежда много хубаво, при това с ефект от инерция при скролиране. Дали може в стиловете да му се зададе, или иска някакви скриптове?
    Поздрав и лека нощ : )
    http://dox.bg/files/dw?a=220971a314
    http://dox.bg/files/dw?a=ef29847980

     

  12. am-am Said,

    Схванах всичко от урока XD Много е удобен за начинаещи вдяващи все още логиката небесная. Мерси :)))

     

  13. am-am Said,

    Pro, беше писал, ако има проблем със зареждането на изображения, да се обаждам. Това изображение не ми се показва, а го имаше: http://img23.imageshack.us/img23/1843/jqueryprobutton1.png Обаче май е нарочно, защото го видях тук: http://profruit.blogspot.com/2010/12/jquery.html

    Весело изтрезняване от празниците и привеждане в работен режим XD

     

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

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

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