Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...


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. зайче Said,

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

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

     

  2. Profruit Said,

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

     

  3. зайче Said,

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

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

     

  4. Profruit Said,

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

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

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

     

  5. зайче Said,

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

    Лека вечер : )

     

  6. Profruit Said,

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

     

  7. зайче Said,

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

     

  8. зайче Said,

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

     

  9. Profruit Said,

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

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

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

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

     

  10. зайче Said,

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

     

  11. зайче Said,

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

     

  12. зайче Said,

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

     

  13. зайче Said,

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

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

     

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

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

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