În articolul meu despre crearea unui buton "sus" mi sa cerut adesea să dau o legătură cu imaginea cu o săgeată.
Și fie vă sugerăm să utilizați entitatea HTML ▲ (în cele din urmă, aceasta se dovedește a fi săgeata ▲), sau vă sugerăm să citiți mai multe despre proprietatea de frontieră CSS.
În final, eu însumi am hotărât să scriu un articol cu trucuri pe care să-l poți folosi, folosind proprietățile de la granița și raza de graniță.
Toate exemplele din articol (altele decât această imagine) sunt scrise în CSS, astfel încât să puteți vedea cu ușurință codul sursă al acestora.
Proprietatea de frontieră
Mai întâi, să ne dăm seama ce graniță este capabilă deloc. cu excepția pentru a sublinia granița cu câțiva pixeli în jurul elementului.
1. Triunghiul (săgeată)
Poate că ați observat că acest post este etichetat cu "Site Acceleration", întrebarea este de ce? Răspunsul constă în faptul că, de obicei, pentru a crea săgeți pe site, webmasterii utilizează imagini, iar cei mai experimentați folosesc sprite sau fonturi iconice.
În RuNet, deocamdată, este totuși varianta în care pentru fiecare săgeată și fiecare element al interfeței este utilizată o imagine separată și fiecare imagine este o cerere separată HTTP, ceea ce înseamnă un minus la viteza de descărcare a site-ului. Cu cât mai puține astfel de solicitări, cu atât viteza de descărcare este mai mare. De aceea, pentru a crea săgeți și indicii, este mai rațional să folosiți CSS (am observat acest lucru pentru prima dată în Google).
Să luăm acum un exemplu.
Trimiteți-le prietenilor: