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 {