Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

सीएसएस छाया प्रभाव

<घंटा/>

क्रमशः टेक्स्ट-शैडो और बॉक्स-शैडो प्रॉपर्टी का उपयोग करके टेक्स्ट और एलिमेंट में शैडो जोड़ें।

CSS में शैडो इफेक्ट के लिए कोड निम्नलिखित है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
   color: rgb(28, 0, 128);
   text-shadow: red 2px 4px 2px;
}
div {
   color: white;
   text-align: center;
   width: 100px;
   height: 100px;
   background-color: red;
   box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

सीएसएस छाया प्रभाव


  1. CSS के साथ एनिमेशन प्रभाव में रोल करें

    सीएसएस के साथ एनीमेशन प्रभाव में एक रोल बनाने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/imag

  1. सीएसएस के साथ एनिमेशन प्रभाव को हिलाएं

    एक तत्व के लिए शेक एनीमेशन प्रभाव (एक वस्तु) ऊपर और नीचे या एक तरफ से दूसरी तरफ ले जाता है। उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo

  1. CSS के साथ शैडो में ब्लर इफेक्ट जोड़ें

    छाया में धुंधला प्रभाव जोड़ने के लिए, बॉक्स-छाया गुण का उपयोग करें। धुंधला प्रभाव जोड़ने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          h2 {