ដាក់ផ្លាកសញ្ញាត្រជាក់ជាមួយនឹង CSS សម្រាប់ Blogg

ដាក់ផ្លាកសញ្ញាត្រជាក់ជាមួយនឹង CSS សម្រាប់ Blogg

ផ្លាកសញ្ញាត្រជាក់ជាមួយនឹងបែបផែន CSS សម្រាប់ Blogger ដូច្នេះនៅថ្ងៃនេះខ្ញុំនឹងបង្ហាញពីរបៀបដែលអ្នកអាចបន្ថែមបានផ្លាកសញ្ញាត្រជាក់ដែលមាននៅ ក្នុងរូបរាងនៃរង្វង់មួយ។ នៅពេលដែល hovered លើវា, ការផ្លាស់ប្តូរ CSS មួយដែលកើតឡើងហើយយើងអាចឃើញឥទ្ធិពលដ៏ស្រស់ស្អាត។ ផលទាំងនេះត្រូវបានគេឃើញនៅក្នុង JavaScript និងកម្រនៅក្នុង CSS ។ CSS នេះត្រូវបានប្រើកូដដ៏ស្រស់ស្អាតនិងការផ្លាស់ប្តូរដែលបានធ្វើការដោយ pseudo ធាតុពោលគឺ i.e. :after :before. ។ ផ្សេងទៀតជាងការ Hack កម្មវិធីរុករកគឺត្រូវបានប្រើនៅក្នុងវា។ សញ្ញានេះគឺជាការដ៏គួរឱ្យទាក់ទាញយ៉ាងខ្លាំងហើយនឹងបង្ខំឱ្យអ្នកប្រើប្រាស់ដើម្បីដាក់នៅលើវា។ អ្នកអាចបន្ថែមធាតុក្រាហ្វិកនេះនៅក្នុងរវាងប្រកាសឬនៅក្នុងរបារចំហៀង។ ការបង្ហាញជាលំនាំការផ្សាយបន្តផ្ទាល់និងធ្វើការរហ័សនៃធាតុក្រាហ្វិកនេះអាចត្រូវបានគេមើល ឃើញថាគ្រាន់តែនៅខាងក្រោម។ ដើម្បីបន្ថែមសញ្ញានេះទៅរបារចំហៀង / ប្រកាសរបស់អ្នកឬនៅកន្លែងណាដែលជាកន្លែង HTML រដោយគ្រាន់តែបន្ថែមកូដខាងក្រោម។
 

<style>
    .circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
    .circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
    .circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
    .circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
    .circle:after{transform:rotate(45deg)}
    .circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
    .circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
    </style>
    <div class="circle"><h1><a href="http://playlearns.blogspot.com/">play Learns</a></h1>
    </div> 

    បន្ទាប់អ្នកអាចផ្លាស់ប្តូរ / URL ដែលដែលមាននៅក្នុង កូដខាងលើទៅជារបស់អ្នក។
    ត្រង់កន្លែង Play Learns អ្នកអាចផ្លាស់ប្តូរទៅជាឈ្នោះ blogs​ របស់អ្នក។
សូមចុចលើ  Save button.។

ខ្ញុំសង្ឃឹមថាអ្នកនឹងធ្វើបានដោយជោគជ័យ Play learns និងខិតខំស្វែងរកនូវអ្វើដែលថ្មីៗមកប្រែជាភាសារខ្មែរដើម្បើងាយស្រួលដល់ការរចនាប្លុក៕
សូមអសគុណសូមមានសំណាល្អ៕

សូមកុំភ្លេចចូលរួមជាមួយពួកយើង
×
blogger tipsblogger templates