របៀបធ្វើអក្សរ 3D ជាមួយនឹងCSS

នៅក្នុង CSS3 មាន script មួយចំនួនអាចឪ្យយើងដាក់ស្រមោលលើ Text ឬ បង្កើតជា 3D Text ដែលមានលក្ខណៈផុស ឬ ផតជាដើម។

ចំពោះ Script ទាំងនោះមានដូចជា:

1- Text Shadow សម្រាប់ដាក់ស្រមោលឪ្យ Text

2- -webkit-text-stroke: សម្រាប់ដាក់ស៊ុមឪ្យអក្សរ

ឧទាហរណ៍: យើងនឹងបង្កើត 3D text ដូចខាងក្រោមនេះ :

•  Text លក្ខណៈ Citylight

 CSS | 
 copy code |
?




1
.citylights h1{

2
color: #fff;

3
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;

4
letter-spacing: 5px;

5
 font: 80px 'MisoRegular';

6
}

• Text លក្ខណៈ Fire

 CSS | 
 copy code |
?




1
.fire h1{

2
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

3
letter-spacing: 5px;

4
font: 80px 'MisoRegular';

5
}

• Text លក្ខណៈ Neon

 CSS | 
 copy code |
?




1
.neon h1{

2
    color: #FFFFFF;

3
    font-family: "Museo";

4
    font-size: 200px;

5
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

6
}

យើងក៏អាចរកឧទាហរណ៍ផ្សេងទៀតក្នុងគេហទំព័រនេះ http://www.antsmagazine.com/web-development/50-cool-text-effects-in-css3/ ឬ Search តាម Google ដើម្បីយកមកកែរច្នៃគេហទំព័ររបស់យើងកាន់តែស្អាត៕

Download