Clearfix
Clearfix is a name given to a CSS solution of an old issue where a the containers of floated element ignore the dimensions of the float and collapse.
Originally this problem was solved by adding extra markup after the float such as a <BR>, <DIV>.
Attr()
Attr() returns the value of an HTML attribute to be used as a value in stylesheet.
This was first introduced in CSS2.1 with the syntax: attr( attribute-name ) could only be used with content and only returned string values.
In CSS3 the syntax changed to: attr( attribute-name, [ <type> ], [ <value> ] ) it can be used with all properties and many types can be returned.
Calc()
Calc allows you to calculate values using mathematical expressions with addition +, subtraction -, multiplication *, division /. You can combine values with different unit values such as em, px or %.
You can use calc where ever length, angle, frequency, time or numbers are used.
The result must be within the allowable range for the property.
Space is required around plus + and minus - symbols.
Great potential for calculating widths in layouts where one value is fixed and others are unknown.
Radial Gradient
The parameters for radial-gradient are: radial-gradient(position, size and shape, color stops );
Position: where to place the center of the gradient. You can use keywords (top, left, center, right, bottom) or numeric values such as (%, px, em) to specify position.
Defaults to center center or 50% 50% if not given.
Size and Shape: Here you can change the dimensions of the gradient to cause a ellipse or a circle.
Color stops: Defines where each color should be strongest.
Defaults if not specified, to 0% the center for the first color, and 100% for the second.
Linear Gradient
Specifying the line angle for the gradient can be done via keywords or degrees. To use a keyword for the angle, prefix it with "to" eg "to top right".
Keywords map to degrees with 0deg equal to top then in a clockwise direction right equals 90deg.
YouCan specify one or more color values.
Stops specify that you want a specific color at the position supplied as the stop.
Be aware that the parameters have gone through some changes and you may find example using old code, and older browers not supporting the newer parameters.
See also:
