рдЯреНрд░реЗрди рдХрд╛ рдбрд┐рдмреНрдмрд╛-рд╕рд╛рдпрд╛

рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдЙрджрд╛рд╣рд░рдг W3C рдбреЗрд╡рд▓рдкрд░реНрд╕ рдиреЗ рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдХреЛ рдПрдХ рдмрд╣реБрдд рд╣реА рд▓рдЪреАрд▓рд╛ рдлреАрдЪрд░ рдмрдирд╛рдпрд╛ рд╣реИред рдЗрд╕рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдмрд╣реБрдд рд╣реА рд░реЛрдЪрдХ рдкрд░рд┐рдгрд╛рдо рдкреНрд░рд╛рдкреНрдд рдХрд┐рдП рдЬрд╛ рд╕рдХрддреЗ рд╣реИрдВ рдпрджрд┐ рдЗрд╕ рд╕рдВрдкрддреНрддрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЧреИрд░-рддреБрдЪреНрдЫ рддрд░реАрдХреЗ рд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ рдореИрдВ рдЙрди рдХреБрдЫ рдкреНрд░рднрд╛рд╡реЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд▓рд┐рдЦреВрдВрдЧрд╛ рдЬреЛ рдореИрдВрдиреЗ "рдЫрд╛рдпрд╛ рдкреНрд░реМрджреНрдпреЛрдЧрд┐рдХреА" рдХреА рд╕рд╣рд╛рдпрддрд╛ рд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣реЗред



рдЬрдм рдореИрдВ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЛ рд╕рдВрдХрд▓рд┐рдд рдХрд░ рд░рд╣рд╛ рдерд╛, рдореБрдЭреЗ рдЕрдкреНрд░рддреНрдпрд╛рд╢рд┐рдд рд░реВрдк рд╕реЗ рдкрддрд╛ рдЪрд▓рд╛ рдХрд┐ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдЙрдиреНрд╣реЗрдВ рдХрд╛рдлреА рдЕрд▓рдЧ рддрд░реАрдХреЗ рд╕реЗ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдкрд░рд┐рдгрд╛рдорд╕реНрд╡рд░реВрдк, рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдХреНрд╖рдорддрд╛рдУрдВ рдХреЗ рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдкреНрд░рджрд░реНрд╢рди рдХреЗ рдЕрд▓рд╛рд╡рд╛, рд╣рдореЗрдВ CSS 3 рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдЫреЛрдЯрд╛ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкрд░реАрдХреНрд╖рдг рднреА рдорд┐рд▓рд╛ред рд╕рднреА рдЙрджрд╛рд╣рд░рдг CSS рдХреЛрдб рдФрд░ рдПрдХ рддрд╕реНрд╡реАрд░ (рд╕рднреА PNG рдХреА рдХреБрд▓ рд░рд╛рд╢рд┐ 161 KB) рд╕реЗ рд▓реИрд╕ рд╣реИрдВред рд▓реЗрдЦ рдореЗрдВ, рдореИрдВрдиреЗ рд╡рд┐рдХреНрд░реЗрддрд╛ рдЙрдкрд╕рд░реНрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдЧреБрдгреЛрдВ рдХреЛ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ -moz- рдФрд░ -webkit-, рддрд╛рдХрд┐ рдкрдардиреАрдпрддрд╛ рдЦрд╝рд░рд╛рдм рди рд╣реЛред рд╕рднреА рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЗ рд╕рд╛рде рд╕рд╛рд░рд╛рдВрд╢ рдкреГрд╖реНрда рдореЗрдВ, рдпреЗ рдЙрдкрд╕рд░реНрдЧ рд╣реИрдВ (рдореИрдВ рдЖрдкрдХреЛ рдЪреЗрддрд╛рд╡рдиреА рджреЗрддрд╛ рд╣реВрдВ рдХрд┐ рдУрдкреЗрд░рд╛ рдореЗрдВ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддреЗ рд╕рдордп рдмрд╛рд╣рд░реА рдмреЙрдХреНрд╕-рдЫрд╛рдпрд╛ рдЦреАрдВрдЪрдиреЗ рдХреЗ рд╕рд╛рде рдПрдХ рдмрдЧ рд╣реИ)ред



рдХреНрд▓реЛрдирд┐рдВрдЧ (рд▓реВрдк)



рдмреЙрдХреНрд╕-рдЫрд╛рдпрд╛ рд╕рдВрдкрддреНрддрд┐ рдЖрдкрдХреЛ рдХрдИ рдЫрд╛рдпрд╛ рдмрдирд╛рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреА рд╣реИ, рдЬрд┐рд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдмрд╣реБрдд рд╣реА рдЕрдЬреАрдм рддрд░реАрдХреЗ рд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдиреАрдЪреЗ рдПрдХ рджрд┐рд╡реНрдп рддрддреНрд╡ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдПрдХ рдкреНрд░рдХрд╛рд░ рдХрд╛ рд▓реВрдк рд╣реЛрддрд╛ рд╣реИ (рдХреБрдЫ рдЦреЗрд▓реЛрдВ рдореЗрдВ, рдЧреЛрд▓реЗ рдРрд╕реЗ "рдкреВрдВрдЫ" рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрддрд╛рддреЗ рд╣реИрдВ)ред



рдХреНрд▓реЛрдирд┐рдВрдЧ (рд▓реВрдк)



рдореБрдЭреЗ рдпрд╣ рдХреИрд╕реЗ рдорд┐рд▓рд╛? рдпрд╣ рд╕рд┐рд░реНрдл рдЕрд▓рдЧ рд╕реНрдерд┐рддрд┐ рдФрд░ рд░рдВрдЧ рдХреЗ рд╕рд╛рде рдХреБрдЫ "рдЫрд╛рдпрд╛" рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рд▓рд┐рдпрд╛ред рдореИрдВ рдЖрдкрдХреЛ рдмреЙрдХреНрд╕-рдЫрд╛рдпрд╛ рд╕рдВрдкрддреНрддрд┐ рдХреЗ рд░реИрдЦрд┐рдХ рдЖрдпрд╛рдореЛрдВ рдХреА рдпрд╛рдж рджрд┐рд▓рд╛рддрд╛ рд╣реВрдВ: рдПрдХреНрд╕ рдЕрдХреНрд╖ рдХреЗ рд╕рд╛рде рдЗрдВрдбреЗрдВрдЯреЗрд╢рди (рджрд╛рдИрдВ рдУрд░ рд╕рдХрд╛рд░рд╛рддреНрдордХ рдореВрд▓реНрдп, рдмрд╛рдИрдВ рдУрд░ рдирдХрд╛рд░рд╛рддреНрдордХ рдореВрд▓реНрдп), рд╡рд╛рдИ рдЕрдХреНрд╖ рдХреЗ рд╕рд╛рде рдЗрдВрдбреЗрдВрдЯреЗрд╢рди, рдзрдмреНрдмрд╛ рддреНрд░рд┐рдЬреНрдпрд╛ рдФрд░ рдЕрдВрддрд┐рдо рдкреИрдорд╛рдиреЗ рдкрд░ред



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдУрдкреЗрд░рд╛ рдФрд░ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рдирд╣реАрдВ рдереАред рд╡реЗрдмрдХрд┐рдЯ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рд▓рд┐рдП, рдЙрдиреНрд╣реЗрдВ рд╕реАрдЯреА рдмрдЬрд╛рдирд╛ рдкрд╕рдВрдж рд╣реИред рдЙрдиреНрд╣реЛрдВрдиреЗ "рдЫрд╛рдпрд╛" рд╡рд░реНрдЧ рдЪрд┐рддреНрд░рд┐рдд рдХрд┐рдпрд╛, рд╕рд░реНрдХрд▓ рдХреЗ рдЕрд╕рд▓реА рд╕рд╛рд░ рдХреЛ рдЙрдЬрд╛рдЧрд░ рдХрд┐рдпрд╛: рдХреЛрдиреЛрдВ рдХреЗ рдЕрдзрд┐рдХрддрдо рдЧреЛрд▓рд╛рдИ рдХреЗ рд╕рд╛рде рдПрдХ рд╡рд░реНрдЧред рдпрд╣, рдЬрд╝рд╛рд╣рд┐рд░ рд╣реИ, рджрд┐рд▓рдЪрд╕реНрдк рд╣реИ, рд▓реЗрдХрд┐рди рд╡рд┐рдлрд▓ рд╣реИред рд╡реИрд╕реЗ, рдпрд╣ рдмрд╣реБрдд рд╣реА рдЙрд▓реНрд▓реЗрдЦрдиреАрдп рд╣реИ рдХрд┐ рдЙрдиреНрд╣реЛрдВрдиреЗ рдлрд┐рд░ рднреА рдмрд╣реБрдд рд╣реА рдЕрдВрддрд┐рдо "рдЫрд╛рдпрд╛" рдЧреЛрд▓ рдЦреАрдВрдЪрд╛ (рдпрджрд┐ рдЖрдк рдЗрд╕реЗ рдмрд┐рд▓реНрдХреБрд▓ рдирд╣реАрдВ рджреЗрдЦрддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдЖрдкрдХреЗ рдореЙрдирд┐рдЯрд░ рдХреЗ рд╕рд░рдЧрдо тАЛтАЛрд╕реЗ рдирд┐рдкрдЯрдиреЗ рдХрд╛ рд╕рдордп рд╣реИ)ред



#trail { background: #d0d0d0; border: 1px solid #c0c0c0; border-radius: 40px; box-shadow: #d8d8d8 110px -25px 0 -10px, #e0e0e0 210px 15px 0 -15px, #e8e8e8 310px -10px 0 -20px, #f0f0f0 410px 5px 0 -25px, #f4f4f4 510px 0px 0 -30px; height: 75px; margin: 20px; width: 75px; }
      
      







рдЪрдордХ



рдХрд┐рд╕реА рднреА рдЫрд╛рдпрд╛ рдХреЛ рдПрдХ рдЙрдЬреНрдЬреНрд╡рд▓ рд░рдВрдЧ рдореЗрдВ рдЪрд┐рддреНрд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдмрд╣реБрдд рдзреБрдВрдзрд▓рд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдЬреЛ рдЪрдордХ рдкреНрд░рднрд╛рд╡ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдЪреВрдВрдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд░рддреЗ?



рдЪрдордХ



рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдореИрдВрдиреЗ рд╣рд▓рдХреЗ рд▓рд╛рд▓ рд░рдВрдЧ рд╕реЗ рд╡реГрддреНрдд (рд╡рд░реНрдЧ) рдХреЛ рднрд░рд╛ рдФрд░ 2 рд▓рд╛рд▓ рдзреБрдВрдзрд▓реА "рдЫрд╛рдпрд╛" рдХреЛ рдмрд╛рд╣рд░ рдирд┐рдХрд╛рд▓рд╛: рдПрдХ рдЕрдВрджрд░, рджреВрд╕рд░рд╛ рдмрд╛рд╣рд░ред рдЗрд╕ рдкреНрд░рдХрд╛рд░, рдореБрдЭреЗ рдПрдХ рдЪрдордХ рдкреНрд░рднрд╛рд╡ рдорд┐рд▓рд╛, рдЬрд┐рд╕рдореЗрдВ рдордзреНрдп рднрд╛рдЧ рдЙрдЬреНрдЬрд╡рд▓ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИред рдХрд┐рд╕реА рднреА рдорд╛рдорд▓реЗ рдореЗрдВ, рд╕рд┐рддрд╛рд░реЗ рдЖрдорддреМрд░ рдкрд░ рдЙрд╕реА рддрд░рд╣ рдЖрдХрд░реНрд╖рд┐рдд рд╣реЛрддреЗ рд╣реИрдВред



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдХрд┐рд╕реА рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдиреЗ рдпрд╣ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИред рдУрдкреЗрд░рд╛ рдФрд░ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ (рд╕рд╛рде рд╣реА рд╕рдлрд╛рд░реА, рд▓реЗрдХрд┐рди рдЗрддрдирд╛ рд╕реНрдкрд╖реНрдЯ рдирд╣реАрдВ) рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рддрддреНрд╡ рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рдкрддрд▓реА рдкреНрд░рдХрд╛рд╢ рд╕реНрдЯреНрд░реЛрдХ рдХреЗ рд╕рд╛рде рд╕рд╛рдордиреЗ рдЖрдпрд╛ред рдореЙрдирд┐рдЯрд░ рдХрд╛ рдЧрд╛рдорд╛ рдЬрд┐рддрдирд╛ рдЕрдзрд┐рдХ рд╣реЛрдЧрд╛, рдЙрддрдирд╛ рд╣реА рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рд╣реЛрдЧрд╛ред рд╕рд┐рджреНрдзрд╛рдВрдд рд░реВрдк рдореЗрдВ, рддрддреНрд╡ рдХреЛ рдкрд╛рд░рджрд░реНрд╢реА рдмрдирд╛рдиреЗ рдФрд░ рдХреЗрд╡рд▓ рдмрд╛рд╣рд░реА "рдЫрд╛рдпрд╛" рдХреЛ рдЫреЛрдбрд╝рдХрд░ рдЗрд╕ рд╕реНрдЯреНрд░реЛрдХ рд╕реЗ рдмрдЪрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рддрдм рдХреЗрдВрджреНрд░ рдореЗрдВ рдПрдХ рд▓рд╛рдЗрдЯрд░ рдХреНрд╖реЗрддреНрд░ рдХрд╛ рдХреЛрдИ рдкреНрд░рднрд╛рд╡ рдирд╣реАрдВ рд╣реЛрдЧрд╛ред рдЕрд░реЗ рдирд╣реАрдВред рдпрд╣ рдкрддрд╛ рдЪрд▓рд╛ рд╣реИ рдХрд┐ рдорд╛рдирдХ рддрддреНрд╡ рдХреЗ рддрд╣рдд рдЫрд╛рдпрд╛ рдХреЛ рдлрд╕рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдкрд╛рд░рджрд░реНрд╢рд┐рддрд╛ рдорджрдж рдирд╣реАрдВ рдХрд░рддреА рд╣реИред рдЕрдм рдпрд╣ рд╕реНрдкрд╖реНрдЯ рд╣реИ рдХрд┐ рд╕реАрдорд╛ рдХрд╣рд╛рдВ рд╕реЗ рдЖрдИ рд╣реИ: рдпрд╣ рдПрдВрдЯреА-рдЕрд▓рд┐рдпрд╛рд╕рд┐рдВрдЧ рд╕рдлрд╛рд░реА рдФрд░ рдХреНрд░реЛрдо рд╣реИ рдЬрд┐рд╕рдиреЗ рдЪрдордХ рдХреЛ рдкрд░реНрдпрд╛рдкреНрдд рд░реВрдк рд╕реЗ рдЧреЛрд▓ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИред рдХреНрд░реЛрдо рд╕рд┐рд░реНрдл рдПрдХ рдЧрдбрд╝рдмрдбрд╝ рд╣реИред



 #glow { background: #ff8080; border-radius: 40px; box-shadow: inset #ff0000 0 0 40px 10px, #ff0000 0 0 24px 12px; height: 75px; margin: 45px; width: 75px; }
      
      







рдПрдХрд╛рдзрд┐рдХ рд╕реАрдорд╛



рдЖрдкрдХреЛ рдХрднреА-рдХрднреА рдХрд┐рд╕реА рддрддреНрд╡ рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рджреЛ рдпрд╛ рдЕрдзрд┐рдХ рд▓рд╛рдЗрдиреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИред рд░реВрдкрд░реЗрдЦрд╛ рдХреЗрд╡рд▓ рдПрдХ рдЕрддрд┐рд░рд┐рдХреНрдд рджреЗрдЧреА, рдФрд░ рд╕рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдЗрд╕реЗ рдЧреЛрд▓ рдирд╣реАрдВ рдХрд░реЗрдВрдЧреЗред рд╕реАрдорд╛-рд╢реИрд▓реА рдХреА рдХрд▓реНрдкрдирд╛ рд╕реАрдорд┐рдд рд╣реИред рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ, рдмреЙрдХреНрд╕-рдЫрд╛рдпрд╛ рдорджрдж рдХрд░реЗрдЧрд╛ред рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдЯреНрд░реЗрдбрдорд┐рд▓ рдХреЛ рджрд░реНрд╢рд╛рдпрд╛ рдЧрдпрд╛ рд╣реИред



рдПрдХрд╛рдзрд┐рдХ рд╕реАрдорд╛



рдореБрдЭреЗ рдпрд╣ рдХреИрд╕реЗ рдорд┐рд▓рд╛? рд╡рд┐рднрд┐рдиреНрди рдкреИрдорд╛рдиреЗ (рдЖрдХрд╛рд░) рдХреЗ рд╕рд╛рде рдПрдХ рдкрдВрдХреНрддрд┐ рдореЗрдВ рдХрдИ "рдЫрд╛рдпрд╛" рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдЖрд╡рд╢реНрдпрдХ рд╣реИред рднреВрд░реЗ рд░рдВрдЧ рдХреА рдкрдЯрд░рд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП, рдореИрдВрдиреЗ рдкрд┐рдЫрд▓реА рдЫрд╛рдпрд╛ (рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ, рдпрд╛ рдлреНрд░реЗрдо) рдХреА рддреБрд▓рдирд╛ рдореЗрдВ 3 рдкрд┐рдХреНрд╕реЗрд▓ рд╕реЗ рдЬрд╝реВрдо рдХрд┐рдпрд╛ред рд╕рдлреЗрдж рд░реЗрдЦрд╛ рдХреЗ рд▓рд┐рдП - рдПрдХ рдкрд┐рдХреНрд╕реЗрд▓ред рдпрд╣ рдпрд╛рдж рд░рдЦрдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ рдЧрд╣рд░реА рдкрд░рддреЗрдВ рд╕реВрдЪреА рдореЗрдВ рдЕрдВрддрд┐рдо рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдП, рдХреНрдпреЛрдВрдХрд┐ рдСрд░реНрдбрд░ рдорд╛рдпрдиреЗ рд░рдЦрддрд╛ рд╣реИ)ред



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдУрдкреЗрд░рд╛ рдФрд░ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдиреЗ рд▓рдЧрднрдЧ рдкрд╣рдЪрд╛рди рдмрдирд╛рдИред рд▓реЗрдХрд┐рди рдХреНрд░реЛрдо рдФрд░ рд╕рдлрд╛рд░реА рдиреЗ рдХреБрдЫ рдХреГрддреНрд░рд┐рдо рдирд┐рджреНрд░рд╛рд╡рд╕реНрдерд╛ рджрд┐рдЦрд╛рдИред рдпрд╣рд╛рдВ, рдЖрдк рдкрд┐рдЫрд▓реЗ рдЙрджрд╛рд╣рд░рдг (рдЪрдордХ) рдореЗрдВ рдЕрдкрд░реНрдпрд╛рдкреНрдд рд░реВрдк рд╕реЗ рдЧреЛрд▓ "рдЫрд╛рдпрд╛" рдХрд╛ рдХрд╛рд░рдг рдкрд╛ рд╕рдХрддреЗ рд╣реИрдВред рдпрд╣ рдкрддрд╛ рдЪрд▓рддрд╛ рд╣реИ рдХрд┐ рдЫрд╛рдпрд╛ рдХреЗ рдмрдврд╝рдиреЗ / рдШрдЯрдиреЗ рдХреЗ рдЕрдиреБрдкрд╛рдд рдореЗрдВ рд╡реЗрдмрдХрд┐рдЯреНрд╕ рдЫрд╛рдпрд╛ рдХреЗ рд▓рд┐рдП рдмреЙрд░реНрдбрд░-рддреНрд░рд┐рдЬреНрдпрд╛ рдХреЛ рдмрдврд╝рд╛рддреЗ рдпрд╛ рдШрдЯрд╛рддреЗ рдирд╣реАрдВ рд╣реИрдВ ред рдХрд╖реНрдЯрдкреНрд░рдж рдЬрдВрдмред



 #multi-border { background: #804020; border: 1px solid #ffffff; border-radius: 40px; box-shadow: /*   */ inset #804020 0 0 0 3px, inset #ffffff 0 0 0 4px, inset #804020 0 0 0 7px, inset #ffffff 0 0 0 8px, /*   */ #804020 0 0 0 3px, #ffffff 0 0 0 4px, #804020 0 0 0 7px, #ffffff 0 0 0 8px, #804020 0 0 0 15px; height: 75px; margin: 35px; width: 150px; }
      
      







рдЖрдпрддрди рдкреНрд░рднрд╛рд╡ (рдЙрднрд╛рд░)



рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдХреА рдорджрдж рд╕реЗ рдЖрдк рдПрдХ рдЕрдЪреНрдЫреЗ рддрддреНрд╡ рдХреЛ рд╕реНрд╡реИрдЪреНрдЫрд┐рдХ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВред рдХрдИ рд▓реЛрдЧ рдЖрдЬ рдЫрджреНрдо рдорд╛рддреНрд░рд╛ рд╡рд╛рд▓реЗ рдЧреНрд░рд╛рдлрд┐рдХреНрд╕ рдХрд╛ рджреБрд░реБрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ рд╣рдо рдЕрдЪреНрдЫреЗ рдлреЙрд░реНрдо рдХреЗ рдбрд┐рдЬрд╛рдЗрди рдирд┐рдпрдореЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдирд╣реАрдВ рдХрд░ рд░рд╣реЗ рд╣реИрдВред



рдЖрдпрддрди рдкреНрд░рднрд╛рд╡ (рдЙрднрд╛рд░)



рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдпрд╣ рджреЛ рдЖрдВрддрд░рд┐рдХ "рдЫрд╛рдпрд╛" рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдерд╛: рдПрдХ рдкреНрд░рдХрд╛рд╢, рджреВрд╕рд░рд╛ рдЕрдВрдзреЗрд░рд╛ред рдкреНрд░рдХрд╛рд╢ - рджрд╛рдИрдВ рдУрд░ рд╢рд┐рдлреНрдЯ рдХреЗ рд╕рд╛рде, рдЕрдВрдзреЗрд░рд╛ - рдмрд╛рдИрдВ рдУрд░ред рдЙрд╕реА рд╕рдордп, рд╕рдлреЗрдж рдФрд░ рдХрд╛рд▓реЗ рд░рдВрдЧреЛрдВ рдХреА рдкрд╛рд░рднрд╛рд╕реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╣рд▓реНрдХрд╛ рдФрд░ рдЧрд╣рд░рд╛ "рдЫрд╛рдпрд╛" рдмрдирд╛рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рдкрд╛рд░рднрд╛рд╕реА (рдпрджрд┐ рдЕрд▓реНрдлрд╛ рдЪреИрдирд▓ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рд╕рдорд╛рдпреЛрдЬрд┐рдд рдХрд┐рдП рдЧрдП рд╣реИрдВ) рдХреЗ рдХрд╛рд░рдг, рдЕрдВрдзреЗрд░реЗ рдФрд░ рдкреНрд░рдХрд╛рд╢ "рдЫрд╛рдпрд╛" рдХреЗ рд╕рдВрдЧрдо рдмрд┐рдВрджреБ рдкреГрд╖реНрдарднреВрдорд┐ рдХреЗ рд░рдВрдЧ рдХреЗ рдХрд░реАрдм рдПрдХ рд░рдВрдЧ рдХрд╛ рдЕрдзрд┐рдЧреНрд░рд╣рдг рдХрд░рддреЗ рд╣реИрдВред рдЕрдиреНрдпрдерд╛, "рдЫрд╛рдпрд╛" рдореЗрдВ рд╕реЗ рдПрдХ рдкреНрд░рдмрд▓ рд╣реЛрдЧрд╛, рдЬреЛ рдпрдерд╛рд░реНрдерд╡рд╛рдж рдХреЛ рдХрдо рдХрд░реЗрдЧрд╛ред рдпрджрд┐ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, "рдЫрд╛рдпрд╛" рдХреЗ рдзреБрдВрдзрд▓рд╛рдкрди рдХреЛ рд░реАрд╕реЗрдЯ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдпрд╣ рд╕рдордЭрдирд╛ рдЖрд╕рд╛рди рд╣реЛрдЧрд╛ рдХрд┐ рдХреЛрдб рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рд╣рдо рдорд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдУрдкреЗрд░рд╛, рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдФрд░ рд╕рдлрд╛рд░реА рдЖрдпрддрд╛рдХрд╛рд░ рдЖрдпрддрди рдХреЛ рдПрдХ рд╣реА рддрд░рд╣ рд╕реЗ рдЖрдХрд░реНрд╖рд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдХреНрд░реЛрдо рдХреЗ рд▓рд┐рдП, рдпрд╣рд╛рдВ рд╣рдо рдкрд┐рдЫрд▓реЗ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рдХреБрдЫ рд╢реЛрд▓реЛрдВ рдХрд╛ рдХрд╛рд░рдг рдкрд╛рддреЗ рд╣реИрдВ: рдЖрдВрддрд░рд┐рдХ "рдЫрд╛рдпрд╛" рд╣рдореЗрд╢рд╛ рд╕реАрдорд╛-рддреНрд░рд┐рдЬреНрдпрд╛ рд╕реЗ рдмрд╛рд╣рд░ рдирд┐рдХрд▓рддреЗ рд╣реИрдВред



 #embossment { background: #404040; border-radius: 20px; box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px, inset rgba(0,0,0,0.5) -8px -8px 18px 5px; height: 75px; margin: 20px; width: 150px; }
      
      







рдврд╛рд▓



рдкрд╛рдЧрд▓рдкрди рдордЬрдмреВрдд рд╣реЛрддрд╛ рд╣реИред рдЕрдм рдмреЙрдХреНрд╕-рд╢реИрдбреЛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЗрдВрджреНрд░рдзрдиреБрд╖ рдврд╛рд▓ рдмрдирд╛рдПрдВред рд╕рд╛рдорд╛рдиреНрдп рддреМрд░ рдкрд░, W3C рдбреНрд░рд╛рдлреНрдЯ рдореЗрдВ рдЧреНрд░реЗрдбрд┐рдПрдВрдЯ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдУрдкреЗрд░рд╛ рдЕрднреА рддрдХ рдЙрдирдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рддреЛ рдЗрд╕рдореЗрдВ рд╡реНрдпрд╛рд╡рд╣рд╛рд░рд┐рдХ рд▓рд╛рдн, рд╡рд┐рдЪрд┐рддреНрд░ рд░реВрдк рд╕реЗ рдкрд░реНрдпрд╛рдкреНрдд рд╣реИред



рдврд╛рд▓



рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдЖрдпрдд рдПрдХ рд▓рд╛рд▓ рдкреГрд╖реНрдарднреВрдорд┐ рд╕реЗ рднрд░ рдЧрдИред рдлрд┐рд░, рдмрджрд▓реЗ рдореЗрдВ, рдореИрдВрдиреЗ рдЖрд╡рд╢реНрдпрдХ рд░рдВрдЧреЛрдВ рдХреЗ "рдЫрд╛рдпрд╛" рд▓рд╛рдЧреВ рдХрд┐рдП (рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд▓рд┐рдП, рдкрд╣рд▓реЗ рдзреБрдВрдзрд▓рд╛ рдХреЗ рдмрд┐рдирд╛): рдкреАрд▓рд╛, рд╣рд░рд╛, рдиреАрд▓рд╛, рдиреАрд▓рд╛, рдмреИрдВрдЧрдиреА, рдлрд┐рд░ рд╕реЗ рд▓рд╛рд▓ред рдкреНрд░рддреНрдпреЗрдХ рдмрд╛рдж рдХреЗ рд░рдВрдЧ рдХреЛ рдЧрд╣рд░рд╛рдИ рд╕реЗ рдЕрдзрд┐рдХ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рджрд╛рдИрдВ рдУрд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рддрд╛рдХрд┐ рдкрд┐рдЫрд▓рд╛ рд░рдВрдЧ рджрд┐рдЦрд╛рдИ рджреЗред рдлрд┐рд░ рдореИрдВрдиреЗ рдХрд▓рдВрдХ рд▓рдЧрд╛рдпрд╛: рддреНрд░рд┐рдЬреНрдпрд╛ рдврд╛рд▓ рдореЗрдВ рд░рдВрдЧ рдХреА рд▓рдВрдмрд╛рдИ рд╕реЗ рдореЗрд▓ рдЦрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рдЬреИрд╕реЗ рд╣реА рдореИрдВрдиреЗ рдкрд░рд┐рдгрд╛рдо рджреЗрдЦрд╛, рдореБрдЭреЗ рдпрд╛рдж рдЖрдпрд╛ рдХрд┐ рдзреБрдВрдзрд▓рд╛рдкрди рд╕рднреА рджрд┐рд╢рд╛рдУрдВ рдореЗрдВ рдЬрд╛рддрд╛ рд╣реИ, рди рдХрд┐ рдХреЗрд╡рд▓ рдкрдХреНрд╖реЛрдВ рдкрд░, рдЬрд┐рд╕рдХреЗ рдХрд╛рд░рдг рдкреВрд░реЗ рдврд╛рд▓ рдХреЗ рдКрдкрд░реА рдФрд░ рдирд┐рдЪрд▓реЗ рд╣рд┐рд╕реНрд╕реЗ рд▓рд╛рд▓ рдкреГрд╖реНрдарднреВрдорд┐ рд╕реЗ рдЧреБрдЬрд░рддреЗ рд╣реИрдВред рдЗрд╕ рдкреНрд░рднрд╛рд╡ рд╕реЗ рдЫреБрдЯрдХрд╛рд░рд╛ рдкрд╛рдиреЗ рдХреЗ рд▓рд┐рдП, рдореБрдЭреЗ рд╕рднреА "рдЫрд╛рдпрд╛" рдХреЛ рдмрдврд╝рд╛рдирд╛ рдерд╛ рдФрд░ рдлрд┐рд░ рдЖрдХрд╛рд░ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рдХреА рднрд░рдкрд╛рдИ рдХреЗ рд▓рд┐рдП рдЙрдиреНрд╣реЗрдВ рдЙрд╕реА рд░рд╛рд╢рд┐ рд╕реЗ рджрд╛рдИрдВ рдУрд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдирд╛ рдерд╛ред рдирд┐рдпрдВрддреНрд░рдг рдХреЗ рд▓рд┐рдП, рдмрд┐рдирд╛ рдзрдмреНрдмрд╛ рдХреЗ рдЬрд╛рдБрдЪ рдХреА рдЧрдИред рд╣реЛ рдЧрдпрд╛ред



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдУрдкреЗрд░рд╛ рдФрд░ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдиреЗ рдлрд┐рд░ рд╕реЗ рдПрдХ рд╕рдорд╛рди рдкрд░рд┐рдгрд╛рдо рджрд┐рдЦрд╛рдпрд╛ред рдХреНрд░реЛрдо рдиреЗ рдЫрд╛рдпрд╛ рдХреЗ рдиреНрдпреВрдирддрдо рдзреБрдВрдзрд▓рд╛рдкрди рдХреЗ рд╕реНрдерд╛рдиреЛрдВ рдореЗрдВ рд╕рдореГрджреНрдз рд░рдВрдЧ рджрд┐рдЦрд╛рдпрд╛ред рдореИрдВ рдпрд╣ рдХрд╣рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрджреНрдпрдо рдирд╣реАрдВ рдХрд░реВрдВрдЧрд╛ рдХрд┐ рдХрд┐рд╕рдиреЗ рд╕рд╣реА рдХрд╛рдо рдХрд┐рдпрд╛ред рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рдЪреНрдЪрд╛рдИ рдмреАрдЪ рдореЗрдВ рд╣реИред рд╕рдлрд╛рд░реА рдиреЗ "рдЫрд╛рдпрд╛" рдХреЛ рдмрд╣реБрдд рдХрдордЬреЛрд░ рддрд░реАрдХреЗ рд╕реЗ рдЙрдбрд╝рд╛ рджрд┐рдпрд╛, рдЗрд╕рд▓рд┐рдП рдврд╛рд▓ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдЧрд▓рдд рд╣реЛ рдЧрдИред Chrome рдХреЛ рдЫреЛрдбрд╝рдХрд░ рд╕рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдзреАрдореЗ рдзреАрдореЗ рдмреНрд▓реЙрдХ рдкрд░ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рддреЗ рд╣реБрдП рдзреАрдореЗ рд╣реЛ рдЧрдПред рд╕рдлрд╛рд░реА рдиреЗ рдЕрдзреВрд░реА рдХрд░рд╛рдорд╛рддреА рдХреЛ рдзреАрдорд╛ рдХрд░ рджрд┐рдпрд╛ред



 #gradient { background: #ff0000; border: 1px solid #000000; box-shadow: inset #FF0000 -150px 0 100px -100px, inset #FF00FF -250px 0 100px -100px, inset #0000FF -350px 0 100px -100px, inset #00FFFF -450px 0 100px -100px, inset #00FF00 -550px 0 100px -100px, inset #FFFF00 -650px 0 100px -100px; height: 200px; margin: 20px; width: 600px; }
      
      







рд▓рдкрдЯреЗрдВ!



рдЦреИрд░, рдЕрдм рдлреНрд░реА-рдХреЛрдбрд┐рдВрдЧ рдХреЗ рдПрдкреЛрдереЛрд╕рд┐рд╕: рдмреЙрдХреНрд╕-рдЫрд╛рдпрд╛ рдХреЗ рд╕рд╛рде рдЖрдЧ! рдореИрдВрдиреЗ рд╢рд╛рдпрдж рдЙрд╕реЗ рд▓рдЧрднрдЧ 2 рдШрдВрдЯреЗ рддрдХ рдорд╛рд░ рджрд┐рдпрд╛, рдХреНрдпреЛрдВрдХрд┐ рдореБрдЭреЗ рд▓рдЧрд╛рддрд╛рд░ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ рдХрд░рдирд╛ рдкрдбрд╝рд╛ред рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдЬрд╝рдореАрди рдХреЗ рд╕рдорд╛рдирд╛рдВрддрд░ рдПрдХ рдЬрд▓рддреЗ рд╣реБрдП рдореИрдЪ рдХреЛ рджрд┐рдЦрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ рдФрд░ рдЗрд╕рдХреЗ рд╕рд┐рд░ рдХреЛ рджрд░реНрд╢рдХ рдХреА рдУрд░ рдШреБрдорд╛рдпрд╛ рдЧрдпрд╛ рд╣реИред рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдмрд╣реБрдд рд╡рд┐рд╢реНрд╡рд╕рдиреАрдп рдирд╣реАрдВ рд╣реИред рд▓реЗрдХрд┐рди рдпрд╣ рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдПрдХ рд▓реМ рд╣реИ!



рд▓рдкрдЯреЗрдВ!



рдореБрдЭреЗ рдпрд╣ рдХреИрд╕реЗ рдорд┐рд▓рд╛? рдХреЛрдИ рдЯрд┐рдкреНрдкрдгреА рдирд╣реАрдВ, рддреБрд░рдВрдд рдХреЛрдб рджреЗрдЦреЗрдВ :)



рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдУрдкреЗрд░рд╛ рдФрд░ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рдиреНрдпреВрдирддрдо рдЕрдВрддрд░ рд╣реИред рд╕рдлрд╛рд░реА рдХреА "рдЫрд╛рдпрд╛" рдлрд┐рд░ рд╕реЗ рдмрд╣реБрдд рдЪреМрдХреЛрд░ рд╣реИ, рдЗрд╕рд▓рд┐рдП рд▓реМ рд╡реНрдпрд╛рдкрдХ рд░реВрдк рд╕реЗ рд╕рд╛рдордиреЗ рдЖрдИред рдореИрдЪ рдХреЗ рдкреНрд░рдореБрдЦ рдХреЗ рдкреАрдЫреЗ рдХреБрдЫ рдЕрдЬреАрдм рдХрд╛рд▓рд╛ рд╡рд░реНрдЧ рд╣реИред рдХреНрд░реЛрдо рдиреЗ рдЖрдЧ рдХреЛ рдмрд╣реБрдд рд╡реНрдпрд╛рдкрдХ рдмрдирд╛ рджрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдзреБрдВрдзрд▓рд╛ рднреА рдмрд╣реБрдд рдореЛрдЯрд╛ рдерд╛ред



 <div id="black-background"> <div id="burning"></div> </div>
      
      





 #black-background {background: #000000;} #burning { background: #402000; border-radius: 40px; box-shadow: /*  */ inset #806040 0 0 10px 2px, /* --  */ #102030 0px 0px 20px 6px, #c8d8e0 0px -10px 17px 4px, #d8e8f0 0px -20px 15px -2px, #e0f0f8 0px -30px 14px -6px, #e8f8ff 0px -40px 12px -9px, #ffffff 0px -50px 10px -12px, #ffffe0 0px -55px 10px -14px, #ffffc0 0px -60px 10px -20px, #ffffa0 0px -62px 10px -22px, #ffff80 0px -64px 10px -24px, /* -  */ #ffff40 0px 0px 15px 4px, #ffff30 0px -10px 13px 6px, #ffff20 0px -20px 12px 8px, #ffff10 0px -30px 11px 6px, #ffff00 0px -40px 10px 4px, #fff000 0px -50px 10px 2px, #ffe000 0px -60px 10px 0px, #ffd000 0px -70px 10px -4px, #ffc000 0px -80px 10px -6px, #ffa000 0px -90px 10px -10px, #ff8000 0px -100px 10px -14px, #ff6000 0px -110px 10px -16px, #ff4000 0px -120px 10px -20px, #ff2000 0px -124px 10px -22px, #ff0000 0px -127px 10px -24px; height: 60px; margin: 125px 35px 30px 35px; width: 60px; }
      
      





UPD: IE9 PP4 рд╕реЗ рдХреГрдкрдпрд╛ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЧрдП рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рд╕реЗ , рд╣рдо рдХрд╣ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдирдпрд╛ IE рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реИред



All Articles