Re: CSS circular image
Jordan Friedlander <[email protected]> Mon, 13 Apr 2020 13:27:33 -0600
| Newsgroups | gmane.comp.web.css.general |
|---|---|
| Message-ID | <CAAB6wcdsBNWhMkVKQf892p1CtppS+4Ex+_Q-53yOMw3OXWsxCA@mail.gmail.com> |
--000000000000cc809c05a331135f
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
It's not pure CSS, but it's possible by drawing to the canvas layer in
html5 with javascript.
It's available for all browsers too (
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/a=
rc
)
HTML:
<canvas></canvas>
<img src=3D"https://www.spring.org.uk/images/crowd2.jpg" id=3D"image1"
class=3D"loadimage" />
CSS:
..loadimage {display:none;}
Javascript:
const canvas =3D document.querySelector('canvas');
const ctx =3D canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(image1, 0, 0, 350, 150);
I made an very quick-and-dirty example here:
https://codepen.io/BIGREDBOOTS/pen/LYpVoeX
On Mon, Apr 13, 2020 at 11:48 AM Negoita Ionut <[email protected]> wrote=
:
> Hi David,
>
> yes, but that's true only if the image is a square, otherwise setting the
> border-radius of the image to 50% will make an ellipse, not a circle
>
> John
>
> On Mon, Apr 13, 2020 at 8:41 PM L. David Baron <[email protected]> wrote:
>
>> On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote:
>> > I'm working on a guide on how to do circle images with CSS (presenting
>> an image in a circular shape)
>> >
>> > I know that there is no one good solution that fits all cases, so I am
>> trying to cover all possibilities.
>> >
>> > So far, I've document 3 main methods with some variations detailed her=
e
>> http://www.coding-dude.com/wp/css/css-circle-image/
>> >
>> > Method #1 =E2=80=93 Wrapping the image in another element that has
>> a border-radius of 50%
>> >
>> > Method #2 =E2=80=93 Using an element and setting the image as the back=
ground.
>> Then applying the border-radius to this element
>> >
>> > Method #3 =E2=80=93 Using clip-path to clip the image element to a cir=
cle.
>>
>> Specifying 'border-radius: 50%' on the <img> itself also works, and
>> seems simpler than the above three.
>>
>> -David
>>
>> --
>> =F0=9D=84=9E L. David Baron https://dbaron.org/=
=F0=9D=84=82
>> =F0=9D=84=A2 Mozilla https://www.mozilla.org/=
=F0=9D=84=82
>> Before I built a wall I'd ask to know
>> What I was walling in or walling out,
>> And to whom I was like to give offense.
>> - Robert Frost, Mending Wall (1914)
>>
>
>
>
>
--000000000000cc809c05a331135f
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
<div dir=3D"ltr"><div>It's not pure CSS, but it's=C2=A0possible by =
drawing to the canvas layer in html5 with javascript.<br>It's available=
for all browsers too (<a href=3D"https://developer.mozilla.org/en-US/docs/=
Web/API/CanvasRenderingContext2D/arc">https://developer.mozilla.org/en-US/d=
ocs/Web/API/CanvasRenderingContext2D/arc</a>)<br><br></div><div>HTML:</div>=
<canvas></canvas><br><div><img src=3D"<a href=3D"https:=
//www.spring.org.uk/images/crowd2.jpg">https://www.spring.org.uk/images/cro=
wd2.jpg</a>" id=3D"image1" class=3D"loadimage" /&g=
t;</div><div><br>CSS:</div><div>.loadimage {display:none;}<br></div><div><b=
r></div><div>Javascript:</div><div>const canvas =3D document.querySelector(=
'canvas');<br>const ctx =3D canvas.getContext('2d');<br>ctx=
..beginPath();<br>ctx.arc(100, 75, 50, 0, 2 * Math.PI);<br>ctx.clip();<br>ct=
x.drawImage(image1, 0, 0, 350, 150);<br></div><div><br></div><div>I made an=
very quick-and-dirty example here:</div><a href=3D"https://codepen.io/BIGR=
EDBOOTS/pen/LYpVoeX">https://codepen.io/BIGREDBOOTS/pen/LYpVoeX</a><div><br=
></div><div><br><div><br></div></div></div><br><div class=3D"gmail_quote"><=
div dir=3D"ltr" class=3D"gmail_attr">On Mon, Apr 13, 2020 at 11:48 AM Negoi=
ta Ionut <<a href=3D"mailto:[email protected]">[email protected]</=
a>> wrote:<br></div><blockquote class=3D"gmail_quote" style=3D"margin:0p=
x 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><d=
iv dir=3D"ltr"><div dir=3D"ltr">Hi David,<div><br></div><div>yes, but that&=
#39;s true only if the image is a square, otherwise setting the border-radi=
us of the image to 50% will make an ellipse, not a circle</div><div><br></d=
iv><div>John</div></div><br><div class=3D"gmail_quote"><div dir=3D"ltr" cla=
ss=3D"gmail_attr">On Mon, Apr 13, 2020 at 8:41 PM L. David Baron <<a hre=
f=3D"mailto:[email protected]" target=3D"_blank">[email protected]</a>> =
wrote:<br></div><blockquote class=3D"gmail_quote" style=3D"margin:0px 0px 0=
px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">On Monday=
2020-04-13 17:57 +0300, Negoita Ionut wrote:<br>
> I'm working on a guide on how to do circle=C2=A0images with CSS (p=
resenting an image in a circular shape)<br>
> <br>
> I know that there is no one good solution that fits all cases, so I am=
trying to cover all possibilities.<br>
> <br>
> So far, I've document 3 main methods with some variations detailed=
here=C2=A0<a href=3D"http://www.coding-dude.com/wp/css/css-circle-image/" =
rel=3D"noreferrer" target=3D"_blank">http://www.coding-dude.com/wp/css/css-=
circle-image/</a><br>
> <br>
> Method #1 =E2=80=93 Wrapping the image in another element that has a=
=C2=A0border-radius=C2=A0of 50%<br>
> <br>
> Method #2 =E2=80=93 Using an element and setting the image as the back=
ground. Then applying the border-radius to this element<br>
> <br>
> Method #3 =E2=80=93 Using=C2=A0clip-path=C2=A0to clip the image elemen=
t to a circle.<br>
<br>
Specifying 'border-radius: 50%' on the <img> itself also work=
s, and<br>
seems simpler than the above three.<br>
<br>
-David<br>
<br>
-- <br>
=F0=9D=84=9E=C2=A0 =C2=A0L. David Baron=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a href=3D"https://dbaron.=
org/" rel=3D"noreferrer" target=3D"_blank">https://dbaron.org/</a>=C2=A0 =
=C2=A0=F0=9D=84=82<br>
=F0=9D=84=A2=C2=A0 =C2=A0Mozilla=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a href=3D"https://www.moz=
illa.org/" rel=3D"noreferrer" target=3D"_blank">https://www.mozilla.org/</a=
>=C2=A0 =C2=A0=F0=9D=84=82<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0Before I built a wall I'=
;d ask to know<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0What I was walling in or wa=
lling out,<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0And to whom I was like to g=
ive offense.<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0- Robert Frost, Mend=
ing Wall (1914)<br>
</blockquote></div><br clear=3D"all"><div><br></div><div dir=3D"ltr"><div d=
ir=3D"ltr"><div><div dir=3D"ltr"><div><div dir=3D"ltr"><div dir=3D"ltr"><di=
v dir=3D"ltr"><div><br></div></div></div></div></div></div></div></div></di=
v></div>
</blockquote></div>
--000000000000cc809c05a331135f--