CodeLab
Tutorials For Everyone
Run
Learn CSS
<!DOCTYPE html> <html> <head> <style> #container { width: 70%; padding: 20px; border: 2px solid #00f; margin: auto; box-shadow: 0 0 10px 0 #aaa; } #container h2{animation: anim-h 5s infinite;} #container p{animation: anim-p 5s infinite;} @keyframes anim-h {50% {font: 40px bold;}} @keyframes anim-p {50% {font: 3px bold;}} </style> </head> <body> <h1>Animatable 'font' Property</h1> <hr> <p>Experience the changing font properties of the text using font property.</p> <div id="container"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p> </div> <p style="position: absolute; bottom: 0;">The font property is a shorthand property for all font properties.<br> font-size, font-weight, font-stretch, and line-height are <em>animatable</em> in CSS.</p> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console