CSS circular image
Negoita Ionut <[email protected]> Mon, 13 Apr 2020 17:57:27 +0300
| Newsgroups | gmane.comp.web.css.general |
|---|---|
| Message-ID | <[email protected]> |
--_5FB899C8-6544-498E-AFAA-B15EB6AF39AE_
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain; charset="utf-8"
Hi,
I'm John (aka=C2=A0@codingdudecom=C2=A0http://www.coding-dude.com/) and I'm=
working on a guide on how to do circle=C2=A0images 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 tryi=
ng to cover all possibilities.
So far, I've document 3 main methods with some variations detailed here=C2=
=A0http://www.coding-dude.com/wp/css/css-circle-image/
Method #1 =E2=80=93 Wrapping the image in another element that has a=C2=A0b=
order-radius=C2=A0of 50%
Method #2 =E2=80=93 Using an element and setting the image as the backgroun=
d. Then applying the border-radius to this element
Method #3 =E2=80=93 Using=C2=A0clip-path=C2=A0to clip the image element to =
a circle.
I've also taken into consideration the needs for responsive design.
Any other methods you can think=C2=A0of?
I would really appreciate other ideas on this topic.
thanks,
John
--_5FB899C8-6544-498E-AFAA-B15EB6AF39AE_
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"
<html xmlns:o=3D"urn:schemas-microsoft-com:office:office" xmlns:w=3D"urn:sc=
hemas-microsoft-com:office:word" xmlns:m=3D"http://schemas.microsoft.com/of=
fice/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-html40"><head><meta ht=
tp-equiv=3DContent-Type content=3D"text/html; charset=3Dutf-8"><meta name=
=3DGenerator content=3D"Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style></head><body lang=3DEN-US link=3Dblue vlink=3D"#954F72"><div cla=
ss=3DWordSection1><p class=3DMsoNormal style=3D'background:white'><span sty=
le=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'>Hi,<o:=
p></o:p></span></p><div><p class=3DMsoNormal style=3D'background:white'><sp=
an style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'>=
<o:p> </o:p></span></p></div><div><p class=3DMsoNormal style=3D'backgr=
ound:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;=
color:#500050'>I'm John (aka @codingdudecom <a href=3D"http://www=
.coding-dude.com/" target=3D"_blank"><span style=3D'color:#1155CC'>http://w=
ww.coding-dude.com/</span></a>) and I'm working on a guide on how to do cir=
cle images with CSS (presenting an image in a circular shape)<o:p></o:=
p></span></p></div><div><p class=3DMsoNormal style=3D'background:white'><sp=
an style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'>=
<o:p> </o:p></span></p></div><div><p class=3DMsoNormal style=3D'backgr=
ound:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;=
color:#500050'>I know that there is no one good solution that fits all case=
s, so I am trying to cover all possibilities.<o:p></o:p></span></p></div><d=
iv><p class=3DMsoNormal style=3D'background:white'><span style=3D'font-size=
:12.0pt;font-family:"Arial",sans-serif;color:#500050'><o:p> </o:p></sp=
an></p></div><div><p class=3DMsoNormal style=3D'background:white'><span sty=
le=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'>So far=
, I've document 3 main methods with some variations detailed here <a h=
ref=3D"http://www.coding-dude.com/wp/css/css-circle-image/" target=3D"_blan=
k"><span style=3D'color:#1155CC'>http://www.coding-dude.com/wp/css/css-circ=
le-image/</span></a><o:p></o:p></span></p></div><div><p class=3DMsoNormal s=
tyle=3D'background:white'><span style=3D'font-size:12.0pt;font-family:"Aria=
l",sans-serif;color:#500050'><o:p> </o:p></span></p></div><div><div><p=
class=3DMsoNormal style=3D'background:white'><span style=3D'font-size:12.0=
pt;font-family:"Arial",sans-serif;color:#500050'>Method #1 =E2=80=93 Wrappi=
ng the image in another element that has a </span><span style=3D'font-=
size:12.0pt;font-family:"Courier New";color:#500050'>border-radius</span><s=
pan style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'=
> of 50%<o:p></o:p></span></p></div><div><p class=3DMsoNormal style=3D=
'background:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans=
-serif;color:#500050'><o:p> </o:p></span></p></div><div><p class=3DMso=
Normal style=3D'background:white'><span style=3D'font-size:12.0pt;font-fami=
ly:"Arial",sans-serif;color:#500050'>Method #2 =E2=80=93 Using an element a=
nd setting the image as the background. Then applying the border-radius to =
this element<o:p></o:p></span></p></div><div><p class=3DMsoNormal style=3D'=
background:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-=
serif;color:#500050'><o:p> </o:p></span></p></div><div><p class=3DMsoN=
ormal style=3D'background:white'><span style=3D'font-size:12.0pt;font-famil=
y:"Arial",sans-serif;color:#500050'>Method #3 =E2=80=93 Using </span><=
span style=3D'font-size:12.0pt;font-family:"Courier New";color:#500050'>cli=
p-path</span><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif=
;color:#500050'> to clip the image element to a circle.<o:p></o:p></sp=
an></p></div></div><div><p class=3DMsoNormal style=3D'background:white'><sp=
an style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500050'>=
<o:p> </o:p></span></p></div><div><p class=3DMsoNormal style=3D'backgr=
ound:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;=
color:#500050'>I've also taken into consideration the needs for responsive =
design.<o:p></o:p></span></p></div><div><p class=3DMsoNormal style=3D'backg=
round:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif=
;color:#500050'><o:p> </o:p></span></p></div><div><p class=3DMsoNormal=
style=3D'background:white'><span style=3D'font-size:12.0pt;font-family:"Ar=
ial",sans-serif;color:#500050'>Any other methods you can think of?<o:p=
></o:p></span></p></div><div><p class=3DMsoNormal style=3D'background:white=
'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#500=
050'><o:p> </o:p></span></p></div><div><p class=3DMsoNormal style=3D'b=
ackground:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-s=
erif;color:#500050'>I would really appreciate other ideas on this topic.<o:=
p></o:p></span></p></div><div><p class=3DMsoNormal style=3D'background:whit=
e'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-serif;color:#50=
0050'><o:p> </o:p></span></p></div><div><p class=3DMsoNormal style=3D'=
background:white'><span style=3D'font-size:12.0pt;font-family:"Arial",sans-=
serif;color:#500050'>thanks,<o:p></o:p></span></p></div><div><p class=3DMso=
Normal style=3D'background:white'><span style=3D'font-size:12.0pt;font-fami=
ly:"Arial",sans-serif;color:#500050'>John<o:p></o:p></span></p></div></div>=
</body></html>=
--_5FB899C8-6544-498E-AFAA-B15EB6AF39AE_--