There are browser default styles for fonts but you can use CSS to change that. In this video, you update the project to customize the font family and font-size.
- [Instructor] To further customize your CSS shapes, each shape function takes optional parameters. The circle function can hold two values, one to specify the radius and the other to specify the position of the circle which actually uses two values itself for the horizontal and vertical position. Note that the position value must include the keyword at before the value. The values can be set using any length unit such as pixels or percentages. The radius is calculated from the center of the circle, so if you use any value larger than 50% of the element's width and height, your circle will fall outside of the element's borders.
There are a few things to understand about the shape coordinate system. The origin of the coordinate system starts at the top left of the element's box with the value of zero on the X axis and zero on the Y axis. The X axis goes from left to right and at the end of the X axis, coordinates are 100% on the X and zero on the Y axis. The Y axis moves from top to bottom and at the end of the Y axis, the coordinates are zero on the X axis and 100% on the Y axis.
In this example, the dotted square represents the element's bounding box area. The circle's radius is set to 50%, which makes it the same size as the bounding box since the radius is measured from the center of the circle. The origin of the circle's coordinate system is in the center of the circle represented by the green dot. A position value of zero and 50 means that the circle's origin is positioned zero from the left of the X axis and 50% from the top of the Y axis.
If you need to create more complex shapes, use the polygon function, the syntax requires you to specify a pair of X and Y coordinates, each pair is separated by a comma. The minimum number of coordinate pairs is three, which will create a triangle. Each coordinate pair defines a point on the X and Y axis, which will connect to the next coordinate pair in the order that it is declared. The last coordinate pair will connect to the first coordinate pair to close the shape. If you want to create an even more complex shape, just add more pairs of X and Y coordinates for each point of the shape.
Reminder, the last point will automatically join the first point to close the shape. Let's take a look at this last shape in the live example. Each of these pairs represents a point in the shape. If I change the value, I'll change where the point is in the coordinate system. Let's change this one to 40% and see how the first point changes. Make another change here. For more information about additional shape functions and properties, check out this Codrops reference.
There are lots of detailed examples and notes. You can also check out the HTML 5 Rocks Getting Started guide, since this isn't quite a standard among browsers yet, the unsupported browsers will continue to interpret these shapes as square and rectangular shapes. This effect can be thought of as a progressive enhancement for the browsers that do support this feature. The page should still be functional for the browsers that don't support this feature.
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS