CSS-ympyrägeneraattori – 50 % reunasäde
Suunnittele CSS-reunusäde visuaalisesti: neljä erillistä kulman liukusäädintä pikselinä tai prosentteina, link-all-corners-pikakuvake välittömiä ympyröitä ja pillereitä varten sekä orgaaninen blob-tila satunnaistetuilla muodoilla.
Tulos
Tämä sivu avaa reunasäteen generaattorin, jossa kaikki neljä kulmaa on linkitetty ja asetettu arvoon 50 %, joka muuttaa laatikon ympyräksi käyttämällä vain CSS:ää. Rehellisesti sanottuna: neliömäisessä laatikossa tämä tekee täydellisen ympyrän, mutta suorakaiteen muotoisessa laatikossa sama 50 % tuottaa sen sijaan stadioninomaisen ellipsin, koska jokainen kulma pyöristää vain oman neljänneksensä.
Tällä erolla on merkitystä, koska 50 % rajasäde on yleisin yksittäinen tapa rakentaa pyöreitä avatareja, kuvakemerkkejä ja tilapisteitä CSS:ssä – paljon yksinkertaisempaa kuin ympyrän leikkaaminen maskilla tai piirtäminen SVG:ssä, ja se pysyy terävänä missä tahansa koossa, koska se on suhteellinen prosenttiosuus, ei kiinteä pikselin säde.
Vaihda laatikko kiinteään neliön kokoon omassa CSS:ssäsi lukittuaksesi täydelliseen ympyrään tai jätä se tarkoituksella suorakaiteen muotoiseksi pillerimäisen muodon saamiseksi – joka tapauksessa kulmat pysyvät linkitettyinä tähän, joten yksi liukusäädin pitää kaikki neljä synkronoituna, kun kopioit tuloksena olevan CSS:n.