CodeLab
Tutorials For Everyone
Run
Learn CSS
<!DOCTYPE html> <html> <head> <style> .container1, .container2, .container3 { display: inline-block; width: 50px; height: 50px; margin: 20px; text-align: center; line-height: 50px; box-shadow: 0 0 10px 0 #aaa; border-radius: 100px; border: 2px solid #333; } .container1{animation: anim1 3s infinite;outline: 10px solid #f00;} .container2{animation: anim2 3s infinite 1s;outline: 10px solid #0f0;} .container3{animation: anim3 3s infinite 2s;outline: 10px solid #00f;} .container4{ display: block; box-shadow: 0 0 10px 0 #333; padding:10px; margin: 10px; position: absolute; bottom: 0; animation: anim4 3s infinite; border: 2px solid #333; } @keyframes anim1 { 50% {padding:20px;}} @keyframes anim2 { 50% {padding:20px;}} @keyframes anim3 { 50% {padding:20px;}} @keyframes anim4 { 50% {padding:50px;}} </style> </head> <body> <h1>Animatable 'padding' Property</h1> <hr> <p>Experience the changing padding property.</p> <div class="container1">1 </div> <div class="container2">2 </div> <div class="container3">3 </div> <div class="container4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </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