Professional Documents
Culture Documents
CSS Animations
CSS Animations
Uploaded by
Vineet K0 ratings0% found this document useful (0 votes)
2 views69 pagesAll the elements and tags for enhanced styling using CSS
Copyright
© © All Rights Reserved
Available Formats
PDF or read online from Scribd
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentAll the elements and tags for enhanced styling using CSS
Copyright:
© All Rights Reserved
Available Formats
Download as PDF or read online from Scribd
0 ratings0% found this document useful (0 votes)
2 views69 pagesCSS Animations
CSS Animations
Uploaded by
Vineet KAll the elements and tags for enhanced styling using CSS
Copyright:
© All Rights Reserved
Available Formats
Download as PDF or read online from Scribd
You are on page 1of 69
CSS Text
TEXT FORMATTING
This text is styled with some of the text formatting properties, The heading uses the
text-align, text-transform, and color properties. The paragraph is indented, aligned, and the
space between characters is specified, The underline is removed from this colored ‘Try \t
Yourself” link
Text Color
‘Tae color property is used to set the color of the text. The color is specified by:
+ a color name - ke "red"
+ a HEX value ~ tke "#ff0000"
+ an RGB value - like "r9b(255,0,0)"
Look at CSS Color Values for a complete list of possible color values. ‘The default text color for a page is defined in the body selector.
Example
body {
color: blue;
hat
color: greens
‘or W3C compliant CSS: If you define the color property, you must also define the background-color
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
‘Tne following example shows center aligned, and left and right aligned text (left alignment is default if text cirection is left-to-right,
and right alignment is default if text direction is right-to-left): Example
ha ¢
text-align: centers
y
ha ¢
text-align: lefty
y
na ¢
text-align: rights
»
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right
‘margins are straight (like in magazines and newspapers):
Example
div ¢
text-align: justify;
y Text Decoration
‘The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove undertines from links:
Example
at
text-decoration: none;
y
‘The other text-decoration values are used to decorate text
Example
rag
‘text-decoration: overline;
y het
text-decoration: Line-through;
>
hat
‘text-decoration: underlines
y
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
Tt can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
Example
Peuppercase {
‘text-transform: uppercase;
y
pelowercase {
‘text-transform: lowercase: y
pecapitalize {
‘text-transform: capitalizes
y
Text Indentation
‘The text-indent property is used to specify the indentation of the frst line of a text:
Example
pt
text-indent: S@px;
y
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text. ‘Tne following example demonstrates how to increase or decrease the space between characters:
Example
me
letter-spacing: xi
)
na
letter-spacing: -3px;
>
Line Height
‘The Line-height property Is used to specify the space between lines:
Example
pesnalt ¢
Zine-hetght: 0.8:
»
p.big { Line-height: 1.85
»
Text Direction
Tne direction property is used to change the text clrection of an element:
Example
ize
direction: tl)
y
Word Spacing
‘The word-spacing property is used to specify the space between the words in a text.
‘The following example demonstrates how to increase or decrease the space between words: Example
m
word-spacing: 18pxs
>
nee
word-spacing: -Spxs
?
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of
the shadow (red):
Example
hat
text-shadow: 3px 2px reds More Examples
Disable text wranoing inside an element
Tris example demonstrates how to disable text wrapping inside an element.
Vertical alignment of an image
Tals example demonstrates how to set the vertical align of an image In 2 text.
All CSS Text Properties
Property Description
color Sets the color of text direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
Jine:hetght Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
Specifies the shadow effect added to text
Controls the capitalization of text
Specifies how overflowed content that is not displayed should be signaled to the user
Used together with the direction property to set or return whether the text should be
overridden to support multiple languages in the same document
Sets the vertical alignment of an element
Specifies how white-space inside an element is handled
Increases or decreases the space between words in a text
Copyright 1999-2019 by Refsnes Data, All Rights Reserved, CSS Text Effects
CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes
In this chapter you will learn about the following properties:
+ text-overflow
word-wnap
word-break
+ uriting-aode
CSS Text Overflow
‘The CSS text-overflow property specifies how overflowee content that isnot cisplayed should be signaled to the user
Ik can be clipes:
[This is some long text thal
or it can be rendered as an ellipsis ...)
fis is some long text ‘The CSS code is as follows
Example
p.testt {
white-space: nowrap;
width: 209%;
border: 1px solic see0ee0;
overflow: hidden;
text-overflow: clips
>
ptest2 (
white-space: nowrap;
width: 200px;
border: 1px solid #800000;
overflow: hidden;
text-overflow: ellipsisy
x
‘The following example shows haw you can display the overflowed content when hovering aver the element:
Example div. test hover
overflow: vis
4
ible;
CSS Word Wrapping
‘The CSS woré-wrap property allows long words to be able to be broken and wrap onto the next line,
If a word Is too long to fit within an area, it expands outside:
fis paragraph
contains a very long
ord
hisisaveryveryveryv
[The long word will
break and wrap to
he next line.
iryveryverylongword.
‘The word-wrap proper
ty allows you to force the tex
fis paragraph
contains a very long
ord
hisisaveryveryveryy
ryveryverylongwiord
‘The long word will
wrap - even if it means splitting it in the middle of 2 word: loreak and wrap to
he next line
The CSS code Is as follows:
Example
Allow long words to be able to be broken and wrap onto the next line:
pt
word-wrap: break-word;
»
CSS Word Breaking
‘The CSS woré-break property specifies line breaking rules.
fis paragraph
contains some
ext. This line
il-break-at-
hyphens.
[iris paragraph co)
lntains some text.
[The lines will brea kc at any characte
The CSS code Is as follows:
Example
potest ¢
word-break: keep-a12;
>
potest {
word-break: break-all;
»
CSS Writing Mode
‘The CSS writing-node property specifies whether lines of text are Iaid out horizontally or vertically.
2
Some text with a span element with a 3. writings mode:
‘The following example shows some different writing modes: Example
p.testi {
writing-node: horizontal-tb;
y
span.test2 {
writing-node: vertical-r1;
y
p.test2 {
writing-mode: vertical-r1;
»
CSS Text Effect Properties ‘Tne following table lists the CSS text effect properties:
Property Description
text-align-last Specifies how to align the last line of a text
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
mord-break Specifies line breaking rules for non-C)k scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically
Conysight 1999-2019 by Refsnes Data. All Rights Reserved. CSS Transitions
CSS Transitions
CSS transitions allows you to change property values smoothly, over @ given duration
Mouse over the element below to see a CSS transition effect:
In this chapter you will learn about the following properties:
+ transition
+ transition-delay
+ transition-duration
+ transition-property
+ transition-tining-function
Browser Support for Transitions ‘The numbers in the table specify the first browser version that fully supports the property.
Property
transition 26.0 10.0 16.0 61 124
transition-delay 26.0 10.0 16.0 6.1 124
transition-duration 26.0 10.0 16.0 6.1 124
transition-property 26.0 10.0 16.0 6.1 12a
transition-timing-funetion 26.0 10.0 16.0 6.1 124
Browser Specific Prefixes
Some older browsers need specif prefixes (-webklt-) to understand the transition properties:
Example
div ¢
width: 108px;
height: 160px;
background: reds
-webkit-transition: width 2s; /* Safari prior 6.1 */
transition: width 255 How to Use CSS Transitions?
‘To create a transition effect, you must specify two things:
+ the CSS property you want to add an effect to
+ the duration of the effect
Note: If the duration partis not specified, the transition will have no effect, because the default value is 0
‘The following example shows @ 100px * L00px red
element. The
element has also specified a transition effect for the
width property, with a duration of 2 seconds:
Example
div (
width: 100px;
height: 108px;
background: red;
‘transition: width 255
‘Tne transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the
element: Example
divihover {
width: 300px;
y
Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
Change Several Property Values
‘Tne following example adds a transition effect for both the width and helght property, with a duration of 2 seconds for the width and
4 seconds for the height:
Example
div ¢
transition: width 2s, height 45;
> Specify the Speed Curve of the Transition
The transition-tining-function property specifies the speed curve of the transition effect.
‘The transition-timing-functlon property can have the following values:
+ ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
+ Linear - specifies a transition effect with the same speed fram start to end
+ ease-in - specifies a transition effect with a slow start
+ ease-out - specifies a transition effect with a slow end
+ ease-in-out ~ specifies a transition effect with a slow start and eng
+ cubic-bezier(n,n,njn) lets you define your own values in a cubie-bezier function
‘Tae following example shows the some of the different speed curves that can be used:
Example
divi {transition-timing-function: Linears}
#div2 (transition-timing-function: ease;}
#div3 (transition-timing-function: ease-ins}
/4 {transition-tining-function: ease-out;}
5 {transition-timing-function: ease-in-out;}
Delay the Transition Effect ‘Tne transition-delay property specifies delay (in seconds) for the transition effect.
“Te fllowing example has a1 second delay before starting
Example
div (
y
felay: 155
Transition + Transformation
‘The following example adds a transition effect to the transformation
Example
div (
transition: width 2s, height 2s, transform 255
y More Transition Examples
‘The CSS transition properties can be specified one by one, lke this:
Example
jon-property: wid!
tlon-duration: 253
transition-tining-function: linear
transition-elay: 15;
or by using the shorthand property transition
Example
div ¢
transition: width 2s Linear
> CSS Transition Properties
‘Tne following table lists all the CSS transition properties:
Property Description
transition ‘A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
fransition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
Iransition-timing-function Specifies the speed curve of the transition effect
Int 1999-2019 by Refsnes Data. All Rights Reserved. CSS 2D Transforms
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
Mouse over the element below to see @ 20 transformation:
[EJ
In this chapter you will learn about the following CSS property:
+ transform
Browser Support
The numbers in the table specty the first browser version that fully supports the property
Property transform 36.0 10.0 16.0 9.0
Browser Specific Prefixes
Some elder browsers need specific prefixes (-ms- or -webkit-) to understand the 2D transform properties:
Example
aiv ¢
-ms-transform: rotate(2edeg); /* TE 9 */
~webkit-transform: rotate(2adeg); /* Safari prior 9.9 */
transform: rotate(2edeg); /* Standard syntax */
CSS 2D Transforms Methods
With the C55. transform property you can use the following 20 transformation methods:
+ translate()
+ rotate()
+ sealex()
+ scalev()
23.0 + scale()
+ skowx()
+ skew¥()
+ sken()
+ matrix()
You will learn about 30 transformations in the next chapter.
The translate() Method
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-
axis).
‘Tne following example moves the < element 50 pixels tothe right, and 100 pixels down from its current postion:
Example
div
transform: translate(S@px, 1809x) 5
> The rotate() Method
‘The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
“Te following examole rotates the element clockwise with 20 degrees:
Example
eve
‘transform: otate(2ede;
d
Using negative values will rotate the element counter-dlockwise
The following example rotates the
element counter-clockwise with 20 degrees: Example
div ¢
‘transform: rotate(-20deg) ;
y
The scale() Method
Tne scale() method increases or decreases the size of an element (according to the parameters given for the width and height),
‘Te following example increases the
element to be two times ofits original width, an three times of its original helght:
Example
div ¢
‘transform: scale(2, 3)
x The following example decreases the
element to be half of its original width and height:
Example
div
‘transform: scale(®.5, 0.5);
y
The scaleX() Method
‘The scalex() method increases or decreases the width of an element,
“Te fllowing example increases the
- element tobe two times of Its orginal wth
Example
div ¢
‘transform: scalex(2):
y The following example decreases the
element to be half ofits original width:
Example
div
‘transform: scalex(@.5)5
y
The scaleY() Method
‘The scaleY() method increases or decreases the height of an element.
“Tne following example increases the element tobe three times ofits orginal height
Example
div ¢
‘transform: scalev(3);
y The following example decreases the
element to be half of its original height:
Example
div
‘transform: scaleV(@.5)5
y
The skewX() Method
‘The skewx() method skews an element along the X-axis by the given angle,
“Tne following example skews the element 20 degrees along the X-ans
Example
div ¢
‘transform: skewk(20deg)
y The skewY() Method
The skeuy() method skews an element along the Y-axis by the given angle
“Tne following example skews the
element 20 degrees along the Y-axis
Example
aw (
‘transform: sken¥(20¢eg)
y
The skew() Method
‘The skew() method skews an element along the X and Y-axis by the given angles,
The following example skews the
element 20 degrees along the X-axis, and 10 degrees along the Y-axis:
Example aiv ¢
‘transform: skew(20deg, 10deg)5
y
If the second parameter is not specified, it has a zero value, So, the following example skews the
element 20 degrees along
the X-axis:
Example
div ¢
‘transform: skew(2@deg);
y
The matrix() Method ‘The matrix() method combines all the 20 transform methods into one,
‘The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and
skew elements,
“Te parameters are as fellow: matrin(scalek( skew) skew) scale¥()ranslatex(ranlate())
Example
div (
‘transform: matrix(1, -0.3, @, 1, ®, 8);
y
CSS Transform Properties
‘The following table lists all the 20 transform properties: Property
ransform
transform-origin
Description
Applies a 2D or 30 transformation to an element
Allows you to change the position on transformed elements
CSS 2D Transform Methods
Funetion
matrix(n,n,n,n,0,n)
translate(x,y)
translatex(n)
translateY(n)
scale(x,y)
scalex(n)
scaleY(n)
rotate(angle)
skew(x-angle,y-angle)
skewx(angle)
skew (angle)
Description
Defines a 2D transformation, using a matrix of six values
Defines a 20 translation, moving the element along the X+ and the Y-axis
Defines a 2D translation, moving the element along the X-axis
Defines a 20 translation, moving the element along the Y-axis
Defines a 20 scal
insformation, changing the elements width end hefght
Defines a 2D sca
;nsfermation, changing the element's width
Defines a 20 scale transformation, changing the element's height
Defines 2 20 rotation, the angle is specified in the parameter
Defines 2 20 skew transformation along the X- and the Y-axis
Defines @ 20 skew transformation along the X-axis
Defines a 20 skew transformation along the Y-axis Copyright 1999-2019 by Refsnes Data. All Rights Reserved. CSS Animations
CSS Animations
CSS allows animation of HTML elements without using JavaScript or Flash!
In this chapter you will learn about the following properties:
+ keyframes
+ animation-nane
+ animation-duration
+ animation-delay
+ animation-iteration-count
+ animation-direction
+ animation-timing-function
+ animation-#il1-node
+ animation
Browser Support for Animations ‘The numbers in the table specify the first browser version that fully supports the property.
Property
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
‘animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
~animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
~animation-timing-funetion 43.0 10.0 16.0 9.0 30.0
animation-fil-mode 43.0 10.0 16.0 9.0 30.0
‘animation 43.0 10.0 16.0 9.0 30.0
Browser Specific Prefixes
‘Some older browsers need specific prefixes (-webkit-) to understand the animation properties:
Example
div (
width: 100px;
hesght: 100px;
background-color: reds ~webkit-animation-nase: example; /* Safari 4.0 - 8. */
~webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-nane: examples
anination-duration: 45
[7 Safari 4.0 - 8.0 */
G-webkit-keyfranes example {
from {background-color: red;)
to (background-color: yellows)
y
/* Standard syntax */
keyframes example {
from {background-color: reds}
to {background-color: yellows)
»
What are CSS Animations?
‘An animation lets an element gradually change from one style to another
You can change as many CSS properties you want, as many times you want.
‘To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the @keyfranes rule, the animation will gradually change from the current style to the new style
at certain
‘To get an animation to work, you must bind the animation t
‘The following example binds the "example" animation to the
element, The animation will last for 4 seconds, and it will
gradually change the background-color of the
element from "rec" to "yellow'
Example
/* The animation code */
Gkeyfranes example {
from {background-color: red;)
to (background-color: yellow)
y
[* The elenent to apply the anination to */
div (
width: 209px;
hedght: 108px;
background-color: red;
animation-nane: examples
anination-duration: 43; Note: The anination-duration property defines how long time an animation should take to complete, If the anination-duration
property is ne ion will occur, because the default value is Os (0 seconds)
Specified, no anim:
In the example above we have specified when the style will change by using the keywords "trom" and
(start) and 100% (complete)).
to" (which represents 09%
It is also possible to use percent. By using percent, you can add as many style changes as you lke.
‘The following example will change the background-color of the
element when the animation is 25% complete, 50% complete,
‘and again when the animation is 100% complete
Example
J The animation code */
keyframes example {
@& — {background-color: reds}
25% background-color: yellow:
5e% {background-coler: blues}
300% {background-color: green
/* The elenent to apply the animation to */
div ¢
width: 109%;
hesght: 108px3
background-color: red;
animation-nane: exanples anination-duration: 455
‘Tae following example will change both the background-color and the position of the
element when the animation is 25%
complete, 50% complete, and again when the animation is 100% complete:
Example
J The anination code */
Geeyfranes example {
@% —(hackground-color:red; Left:0px; top:epxs)
28% {hackground-color:yellows Left:200px; top:@px3)
50% {background-color:blues left:20epx3 top:20ep%3)
75% {(background-coler:green; Left:8px; op: 200p%;)
100% {(background-coler:red; leFt:@9x3 top:8px;}
/* The elenent to apply the animation to */
div (
width: 106px;
hedght: 108px;
position: relative;
background-color: reds
animation-nane: exanples
anination-duration: 433 Delay an Animation
‘Tne animation-delay property specifies a delay for the start of an animation,
‘The following examale has a 2 seconds delay before starting the animation:
Example
div ¢
width: 108px;
hesght: 100px;
position: relative;
background-color: red;
anination-nane: exanple;
anination-duration: 453
anination-delay: 2s;
Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds, Inthe following example, he animation wil star as it had areacy been paying for 2 seconds:
Example
div ¢
width: 108px;
height: 100px;
position: relative;
background-color: red;
animation-nane: exanples
anination-duration: 453,
anination-delay: -253
Set How Many Times an Animation Should Run
‘The anination-iteration-count property specifies the number of times an animation should run.
‘Tne following example will run the animation 3 times before it stops:
Example
div ¢
width: 10px; height: 108px;
position: relative;
background-color: reds
animation-nane: exanples
anination-duration: 433
anination-{teration-count: 33
‘Tne following example uses the value "infinite" to make the animation continue for ever:
Example
div ¢
width: 109%;
height: 108px;
position: relative;
background-color: reds
anination-nane: exanples
anination-duration: 453
anination-iteration-count: infinite; Run Animation in Reverse Direction or Alternate Cycles
‘The anination-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles
‘The animation-direction property can have the following values:
+ normal - The animation is played as normal (forwards). This is default
+ reverse - The animation is played in reverse direction (backwards)
+ alternate - The animation is played forwards first, then backwards
+ alternate-reverse - The animation is played backwards first, then forwards
‘The following example will run the animation in reverse direction (backwards):
Example
aiv ¢
width: 106px;
height: 108px;
position: relative;
background-color: reds
animation-nane: exanples
anination-duration: 433
anination-direction: reverses
lernate* to make the animation run forwards first, then backwards:
‘Tne following example uses the value Example
aiv (
width: 109px;
hesght: 108px;
position: relative;
background-color: red;
animation-nane: exanple;
anination-duration: 433
anination-iteration-count: 25
anination-direction: alternates
‘The following example uses the value
Iternate-reverse” to make the animation run backwards first, then forwards:
Example
div (
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-nane: exanples
anination-duration: 453
anination-iteration-count anination-direction: alternate-reverse;
y
Specify the Speed Curve of the Animation
‘The anination-tining-function property specifies the speed curve of the animation.
‘The animation-timing-function property can have the following values:
+ ease + Specifies an animation with a slow start, then fast, then end slowly (this is default)
+ Linear - Specifies an animation with the same speed from start to end
+ ease-in - Specifies an animation with a slow start
+ ease-out + Specifies an animation with a slow end
+ ease-in-out - Specifies an animation with a slow start and end
+ cubic-bezier(n,n,n,n) = Lets you define your own values in a cubic-bezier function
‘The following example shows the some of the different speed curves that can be used:
Example
divi (animation-timing-function: Linear}
dive (animation-timing-function: eases}
#div3 {animation-timing-function: ease-in;}
diva {antmation-timing-function: ease-out;}
divs (animation-tining-function: ease-in-out;} Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fll-
‘mode property can override this behavior.
The anination-Fill-node property specifies a style for the target element when the animation is not playing (before it starts, after
It ends, or both).
‘The animation-fil- mode property can have the following values:
+ none ~ Default value. Animation will not apply any styles to the element before or after it is executing
+ forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and
‘animation-iteration-count)
+ backwards ~The element will get the style values that Is set by the first keyframe (depends on animation-direction), and retain
this during the animationsdelay period
+ both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both
directions
‘Tae following example lets the
element retain the style values from the last keyframe when the animation ends
Example
aiv ¢
width: 106px;
height: 108px;
background: red; position: relative;
animation-nane: exanple;
anination-duration: 353
anination-Fil1-node: forwards;
‘Tre following example lets the
element get the style values set by the first keyframe before the animation starts (during the
animation-delay period):
Example
div (
width: 100px;
height: 108px;
background: reds
position: relative;
animation-nane: exanples
anination-duration: 353
animation-delay: 25;
animation-fill-node: backwards; ‘Tae following example lets the
element get the style values set by the first keyframe before the animation starts, and retain
the style values from the last key‘rame when the animation ends:
Example
div (
width: 109px;
height: 108px;
background: reds
position: relative;
animation-nane: exanple;
anination-duration: 353
anination-delay: 25;
animation-Fi11-nod
both:
Animation Shorthand Property
‘The example below uses six ofthe animation properties:
Example
div ¢
animation-nane: examples anination-duration: 535
anination-tining-funct ion:
anination-delay: 254
anination-iteration-count: infinite;
anination-direction: alternate;
‘Tne same animation effect as above can be achieved by using the shorthand anination
Example
div (
animation: exanple 5s linear 25 infinite alternate;
y
property CSS Animation Properties
‘Tne following table lists the @keytrames rule and all the CSS animation properties:
Property
@keyframes
animation-direction
animation-duration
animation-filemade
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
Description
Specifies the animation code
A shorthand property for setting all the animation properties
Specifies a delay for the start of an animation
Specifies whether an animation should be played forwards, backwards or in alternate
cycles
Specifies how long time an animation should take to complete one cycle
Specifies a style for the element when the animation is not playing (before it sterts,
after it ends, or both)
Specifies the number of times an animation should be played
Specifies the name of the @keyframes animation
Specifies whether the animation is running or paused
Specifies the speed curve of the animation
Copyright 1999-2039 by Refsnes Data. All Rights Reserved. CSS Multiple Columns
CSS Multi-column Layout
‘The CSS multi-column layout allows easy definition of muttiple columns of text - just like In newspapers:
Daily Ping
Lorem ipsum tation ullamcorper suscipit lobortis nis! blandit praesent luptatum zzrll delenit
dolor sit amet, consectetuer adipiscing _ ut aliquip ex ea commode consequat. augue duis dolore te feugait nulla
elit, sed diam nonummy nibh euismad Oui autem vel eum iriure dolor in facili. Nam ber tempor cum soluta
tincidunt ut laoreet dolore magna hendrerit in vulputate velit esse nobis eleifend option congue nihil
aliquam erat volutpat. Ut wisi enim ad ‘molestie consequat, vel illum dolore eu __imperdiet daming id quod mazim
minim veniam, quis nostrud exerci feugiat nulla facilisis at vero eros et placerat facer possim assum,
accumsan et iusto odio dignissim qui CSS Multi-column Properties
In this chapter you will learn about the following mult-column praperties:
+ column-count
+ column-gap
+ column-rule-style
+ column-rule-width
+ column-rule-color
+ colunn-rule
+ colurn-span
+ column-width
Browser Support
‘The numbers in the table specify the fist browser version that fully supports the property.
Property
columa-count 50.0
colurna-gap 50.0
column-rule 50.0
columa-rule-color 50.0
columa-rule-style 50.0
columa-rule-width 50.0
ccolumn-span 50.0
10.0
10.0
10.0
10.0
10.0
10.0
10.0
52.0
52.0
52.0
52.0
52.0
52.0
Not supported
9.0
9.0
9.0
9.0
9.0
9.0
9.0
37.0
37.0
37.0
37.0
37.0
37.0
37.0 columa-width 50.0 10.0 52.0 9.0 37.0
CSS Create Multiple Columns
The colunn-count property specifies the number of columns an element should be divided into
‘Tne following example will divide the text In the
element into 3 columns
Example
av ¢
colunn-count: 33
>
CSS Specify the Gap Between Columns
The colusn-gap property specifies the gap between the columns.
‘Tne following example specifies @ 40 pixels gap between the columns
Example aay ¢
column-gap: 40px3
y
CSS Column Rules
The colunn-rule-style property specifies the style of the rule between colurnns:
Example
div (
inn-rule-style: solids
The colusn-rule-width property specifies the width of the rule between columns:
Example
div ¢
column-rule-width: Ipxs Tne colunn-rule-color property specifies the colar of the rule between columns:
Example
div (
colum-rule-coler: 1ightblues
‘The colunn-rule property is a shorthand property for setting all the columnerule-* properties above.
‘The following example sets the width, style, ane color ofthe rule between columns:
Example
div (
colum-rule: 1px solid lightblues
y Specify How Many Columns an Element Should Span
‘Tne colun-span property specifies how many columns an element should span across.
“Te fllowing example specifies thatthe element should span across all columns:
Example
me
columa-span: alls
y
Specify The Column Width
‘The colunn-width property specifies a suggested, optimal width for the columns.
“Tne following example specifi thatthe suggested, optima width forthe columns shoul be 409px:
Example
dav ¢
coluna-width: 10x;
y CSS Multi-columns Properties
‘Tae following table lists all the multi-columns properties:
Property
ccoluma-count
solumnefill
column-9ap
columaerule
‘column-rule-colar
column-rule-style
‘column-rule-width
columa-span
ccolumnswidth
Description
Specifies the number of columns an element should be divided into
Specifies how to fill columns
Specifies the gap between the columns
A shorthand property for setting all the columnerule-* properties
Specifies the color of the rule between columns
Specifies the style of the rule between columns
Specifies the width of the rule between columns
Specifies how many columns an element should span across
Specifies a suggested, optimal width for the columns
A shorthand property for setting column-width and column-count Copyright 1999-2019 by Refsnes Data. All Rights Reserved. CSS User Interface
CSS User Interface
In this chapter you will learn about the following CSS user interface properties:
+ outLine-of feet
Browser Support
‘The numbers in the table specify the first browser version that fully supports the property.
Property
resize 4.0 15.0 5.0 4.0
outline-offset 4.0 15.0 5.0 4.0
CSS Resizing
15.0
95 ‘The resize property specifies if (and how) an element should be resizable by the user.
‘This div element is resizable by the user!
‘To resize: Click and drag the bottom right
corner of this div element.
Note: Internet Explorer does not support the
resize property.
‘Tne following example lets the user resize only the width of a
element should span across all columns:
Example
me
columa-span: alls
y
Specify The Column Width
‘The colunn-width property specifies a suggested, optimal width for the columns.
“Tne following example specifi thatthe suggested, optima width forthe columns shoul be 409px:
Example
dav ¢
coluna-width: 10x;
y CSS Multi-columns Properties
‘Tae following table lists all the multi-columns properties:
Property
ccoluma-count
solumnefill
column-9ap
columaerule
‘column-rule-colar
column-rule-style
‘column-rule-width
columa-span
ccolumnswidth
Description
Specifies the number of columns an element should be divided into
Specifies how to fill columns
Specifies the gap between the columns
A shorthand property for setting all the columnerule-* properties
Specifies the color of the rule between columns
Specifies the style of the rule between columns
Specifies the width of the rule between columns
Specifies how many columns an element should span across
Specifies a suggested, optimal width for the columns
A shorthand property for setting column-width and column-count Copyright 1999-2019 by Refsnes Data. All Rights Reserved. CSS User Interface
CSS User Interface
In this chapter you will learn about the following CSS user interface properties:
+ outLine-of feet
Browser Support
‘The numbers in the table specify the first browser version that fully supports the property.
Property
resize 4.0 15.0 5.0 4.0
outline-offset 4.0 15.0 5.0 4.0
CSS Resizing
15.0
95 ‘The resize property specifies if (and how) an element should be resizable by the user.
‘This div element is resizable by the user!
‘To resize: Click and drag the bottom right
corner of this div element.
Note: Internet Explorer does not support the
resize property.
‘Tne following example lets the user resize only the width of a element
Example
div (
resize: horizontal;
overflow: auto;
‘The following example lets the user resize only the height of a element:
Example aay ¢
resize: verticals
overflow: auto;
»
‘Tne following example ets the user resize both the height ang wicth of a element:
Example
dw ¢
resize: both;
overflow: auto;
In many browsers,
element:
Example aay ¢
resize: verticals
overflow: auto;
»
‘Tne following example ets the user resize both the height ang wicth of a
element:
Example
dw ¢
resize: both;
overflow: auto;
In many browsers,