Идеално пикселно оформление

Добър ден, приятели. Онзи ден Дима Шулешов се свърза с мен и ми предложи тема за интересна статия (Дима, здравей!). Е, за мен - интересно и актуално, надявам се и вие да сте полезни на някого. Това са няколко реда код, които ще ви помогнат да оформите целевата страница точно с оформлението.

Така че, ако сте имали проблеми с щателни клиенти, които проверяват всеки пиксел, тогава този проблем вече не трябва да възниква. Нека най-накрая да приложим този ефект.

На първо място, както често се случва, включваме библиотеката jQuery:

Тъй като вече е включено в повечето проекти, не го правете отново. Това може да предизвика конфликт и ще ви отнеме много време, за да разберете защо точно възниква.

Сега, нека напишем някои тагове в нашия проект. За мен изглежда така:

Където първият div е блокът, отговорен за бутона, а вторият е наслагването на нашето оформление. За да се наслагва правилно, трябва да направите няколко прости настройки:

Сега нека стилизираме бутона. Ако външният вид е важен за вас, тогава го редактирайте, но можете да го оставите такъв, какъвто е.

Е, остава да добавите реакция към щракване върху бутона. Просто ще добавим/премахнем класа и ще променим прозрачността на блока с оформлението на фона:

---