Naučite svojstvo CSS granice radijusa građenjem kalkulatora

Jeste li ikad vidjeli gumb na web stranici koji ima zaobljene rubove? Jeste li ikad vidjeli sliku koja se uklapa u krug? Ako je to slučaj, vidjeli ste utjecaj upotrebe svojstva CSS border-radius.

Bilo kojem elementu možete dati "zaobljene kutove" primjenom polumjera obruba kroz CSS.

Sintaksa graničnog radijusa

Kao i kod mnogih CSS svojstava koja se odnose na margine, oblaganje i obrube, postoje četiri pojedinačna svojstva - po jedno za svaki ugao elementa okvira - i jedno svojstvo kratke ruke. Svaki od atributa kutova prihvatit će jednu ili dvije vrijednosti.

Svojstvo radijusa obruba prihvaćeno je u svakom većem pregledniku, ali oni imaju atribute specifične za preglednik. Evo CSS i atributa specifičnih za preglednik:

Svaka CSS3 svojstva pojedinačnih ugla imaju jednu ili dvije vrijednosti duljine (općenito vrijednosti px ili em). Ako je data jedna vrijednost, tada to postaje polumjer zaobljenog kuta. Ako se daju dvije vrijednosti, one postaju vodoravni i okomiti radijus za eliptični ugao.

Svojstvo svojstva radijusa granice prihvaća jednu ili dvije vrijednosti i koristi ih za oblikovanje sva četiri kuta čineći simetričan oblik lijepe.

Trebate li više koristiti granične prefikse?

Sad kad sam vam pokazao rubričke prefikse vezane uz preglednik, pitanje je da li ih zaista trebate koristiti ili se možete izvući samo korištenjem CSS3 svojstava?

Jednostavan odgovor na to pitanje ovisi o verziji preglednika koje vaša web stranica podržava.

Firefox 3.6 zahtijeva uporabu prefiksa -moz-. Od 4. do 12. korištenja CSS3 svojstava je u redu.

Safari 4 treba prefiks -webkit. Safari 5 i noviji prihvaća CSS3 svojstva.

iOS3 treba prefiks -webkit-. Ovo se odnosi samo na iPhone 3GS ili iPad 1 koji nikada nisu nadograđeni.

Osnovna demonstracija svojstva radijusa granice

Evo dvije demonstracije radijusa granice. Vrijednost isporučena za entitet može biti u px, rem, em ili%.

div {
    širina: 100px;
    visina: 100px;
    pozadinska boja: # 7db9e8;
}
# demo-jedan {
    obrub granice: 20px;
}
# demo-dva {
    obrub granice: 50%;
}
# demo jedna slika s lijeve strane i # demo dvije slike s desne strane

Za prvi div zaobljeni kut od 8 piksela primjenjuje se na svaki kut div. U drugom primjeru svaki kutak ima zaobljeni kut od 50% koji stvara krug.

Sa samo jednom vrijednošću, polumjer obruba bit će isti na sva četiri ugla elementa kao što je prikazano gore. Imate mogućnost navođenja različite vrijednosti za svaki kut.

Kad navedete pojedinačne vrijednosti, one se primjenjuju ovim redoslijedom: gore lijevo, gore desno, dolje desno, dolje lijevo. Evo primjera:

# demo-tri {
    obrub granice: 10em 20em 10em 20em;
}
# demo-četiri {
    obrub granice: 40px 5px;
}
# demo-tri slike s lijeve strane i # demo-četiri slike s desne strane

Eliptični rubovi

Rubovi ne moraju biti kružni, ali mogu biti i eliptični. Da biste stvorili eliptični rub, postavite kosinu ("/") između dviju vrijednosti. Evo primjera:

# demo-pet {
    obrub granice: 10% / 50%;
}
# demo-šest {
    polumjer granice: 50% / 10%;
}
# demo-pet slika s lijeve strane i # demo-šest slika s desne strane

Izrada našeg kalkulatora

Primijenit ćemo ono što smo upravo naučili o polumjeru granice i stvoriti ovaj kalkulator:

Slika kalkulatora koji ćemo izrađivati

Okvir kalkulatora

Prvo moramo stvoriti okvir za naš kalkulator. Vrh kalkulatora imat će luk, a dno zaobljene rubove. Da bismo stvorili ovaj dizajn odredit ćemo vrijednost za svaki pojedini kutak kao što je ovaj:

.calc-okvir {
    prikaz: fleksibilnost;
    fleks-smjer: stupac;
    poravnati predmeti: središte;
    maksimalna visina: 650px;
    maksimalna širina: 400px;
    širina: 90%;
    padding: 20px;
    obrub: čvrsta 5px # 41403E;
    obrub-gornji-lijevi polumjer: 270px 100px;
    polumjer obruba, gornji i desni: 270px 100px;
    obrub-granica-dno-desno: 35px;
    obrub-dno-lijevo-polumjer: 35px;
    pozadina: # b1b1b1;
}
Slika okvira kalkulatora izrađenog iznad CSS-a

Okvir rezultata kalkulatora

Vrh kalkulatora sadrži ukupno izračunato (rezultat). Sastoji se od dva dijela: vanjskog okvira i područja ulaza koji sadrži ukupno. Vanjski okvir koristi točno isti polumjer obruba okvira da bi imao isti luk. Evo stilova za ove dvije stavke:

.calc-rezultat-okvir {
    pozadina: #fefefe;
    obrub: čvrsta 5px # 41403E;
    širina: 100%;
    visina: 150px;
    obrub-gornji-lijevi polumjer: 270px 100px;
    polumjer obruba, gornji i desni: 270px 100px;
    obrub-granica-dno-desno: 10px;
    obrub-dno-lijevo-polumjer: 10px;
    prikaz: fleksibilnost;
    opravdati-sadržaj: centar;
    predmeti poravnanja: flex-end;
}
.calc-rezultat-ulaz {
    širina: 85%;
    visina: 70px;
    poravnavanje teksta: desno;
    boja: # 41403E;
    preljev: skriven;
    veličina slova: 2rem;
Slika okvira rezultata kalkulatora stvorenog CSS-om iznad

Logotip kalkulatora i gumb za napajanje

Sljedeće stavke koje ćete dodati našem kalkulatoru su logotip, "BLAND INSTRUMENTS" i gumb za uključivanje. Kôd ćemo koristiti u # demo-četiri za logotip, a kôd u # demo-dva za gumb napajanja. To izgleda ovako:

.calc-logo {
    pozadina: # 41403e;
    boja: # e8eff0;
    obrub: čvrsta px # 41403E;
    obrub granice: 40px 5px;
    širina: 250px;
    visina: 50px;
    visina linije: 50px;
    težina slova: podebljano;
    poravnavanje teksta: središte;
}
.calc-on {
    obrub granice: 50%;
    granica: nema;
    pozadina: # bb0f29;
    boja: #fefefe;
    širina: 50px;
    visina: 50px;
}
Slika koja prikazuje naš logotip kalkulatora i gumb za uključivanje iz CSS-a iznad

Gumbi kalkulatora

Zatim ćemo kreirati styling za svaki gumb kalkulatora. Specificirat ćemo stil za svaki pojedini kut, a zatim ćemo osigurati dvije vrijednosti za svaki kut. Ovo stvara ručno crtanje izgleda i osjećaja za gumbe. Evo koda:

.calc-btn {
    pozadina: prozirna;
    boja: # 41403E;
    veličina slova: 2rem;
    širina: 75px;
    visina: 75px;
    obris: nijedan;
    obrub granice: 255px 15px 225px 15px / 15px 225px 15px 255px;
    obrub: čvrsta 7px # 41403E;
    fleks: 1;
    prijelaz: sve .5s lakoća;
}
Slika koja prikazuje gumbe kalkulatora pomoću CSS-a iznad

Gumb za unos

Posljednje što moramo dodati našem kalkulatoru je tipka ENTER. Za ovaj gumb koristit ćemo kôd iz # demo-one. Evo koda:

.calc-enter {
    pozadina: # bb0f29;
    boja: #fefefe;
    obrub granice: 20px;
    granica: nema;
}
Slika koja prikazuje gumbe za unos kalkulatora iz CSS-a iznad

Animacija s gumbom

Posljednje što ćemo dodati našem kalkulatoru je animacija za svaki gumb kada korisnik pređe preko gumba. To simulira djelovanje pritiskanog gumba.

Da bismo to postigli, na naše gumbe ćemo dodati sjenu okvira. Ovo je sjena koja će biti prikazana za sve gumbe i daje gumbima kako se lagano podižu iz okvira kalkulatora.

Da bismo osigurali animaciju, gumbu ćemo dodati prijelaz. Zatim ćemo opskrbiti drugačijom sjenom okvira za gumbe kada korisnik pređe preko njih. Evo koda:

.calc-btn {
    pozadina: prozirna;
    boja: # 41403E;
    veličina slova: 2rem;
    širina: 75px;
    visina: 75px;
    obris: nijedan;
    obrub granice: 255px 15px 225px 15px / 15px 225px 15px 255px;
    obrub: čvrsta 7px # 41403E;
    fleks: 1;
    okvir-sjena: 20px 38px 34px -26px hsla (0,0%, 0%, 2);
    prijelaz: sve .5s lakoća;
}
.calc-btn: lebdi {
    okvir-sjenka: 2px 8px 4px -6px hsla (0,0%, 0%, 3);
}

A evo i našeg gotovog kalkulatora:

Slika koja prikazuje animaciju gumba kalkulatora iz CSS-a iznad

Nabavite kod

Ako želite vidjeti kompletan kod za kalkulator, ovdje ga možete dobiti iz moje GitHub repo. Molim vas označite moj repo kad dobijete kôd!

Kod koristi Flexbox za izgled kalkulatora. Ako niste upoznati s Flexboxom ili ga želite pregledati, možete pogledati moj besplatni tečaj o Flexbox-u na in5days.tech.

Hvala na čitanju

Hvala što ste pročitali moj članak. Ako vam se sviđa, kliknite ikonu clap dolje kako bi drugi pronašli ovaj članak.

Evo još mojih članaka koji bi vam mogli biti zanimljivi:

Evo 5 izgleda koji možete napraviti pomoću FlexBoxa
Razmislite izvan okvira sa CSS-om izvana
Zašto je kultura tvrtke važna za vašu karijeru kao softverski inženjer