Some Neat CSS Tricks — Clip-path And Transform

For circles you specify the percentage of your diameter along with where the center of your circle is, and for ellipses you specify the diameters on the x-axis and the y-axis along with where the center of the ellipse is.The first 50% is the diameter and the two other 50% values are where the center of the circle is on the x and y axes.The ellipse method works the same except it has two diameters.If you want to experiment with all the ways you can clip images this site is a great tool.Let’s keep this ellipse clip and use our handy transform tool to center some text in the middle.We’ll create a div that will contain our h1 with the text we want to center.Aside from the styling of the text (color, letter-spacing, and font-family), we need to use absolute position and then we move our text 50% from the top and 50% from the left..But this makes our text start at the center and not actually in the center of our screen.In order to center we’ll add a transform to move our text-box element from here.Presto!.A perfectly centered element.. More details

Leave a Reply