how to create a simple circle mask CSS3 using clip-path? -
i trying apply circle clip picture
<style> .circle { -webkit-clip-path: circle(50%,50%,10%); clip-path: circle(50%,50%,10%); }; </style> </head> <body> <img src="image1.jpg" width="1024" height="768" alt="" class="circle"/> </body> and doest not work
class="snippet-code-css lang-css prettyprint-override">.circle { -webkit-clip-path: circle(50%,50%,10%); clip-path: circle(50%,50%,10%); }; class="snippet-code-html lang-html prettyprint-override"><img src="http://cp91279.biography.com/leonardo-da-vinci_a-divine-mind_hd_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>
i don't want utilize border-radius !
it appears the circle syntax more like
clip-path: circle(50% @ 50% 10%); so alter
.circle { -webkit-clip-path: circle(50% @ 50% 10%); clip-path: circle(50% @ 50% 10%); } fiddle here
i found mention of here on mdn
circle([<shape-radius>] [at <position>]) shape-radius argument radius of circle. position argument defines center point of circle , has same syntax background-position (see background-position details).
nice explanation resource found here on webplatform.org
css3
No comments:
Post a Comment