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

सीएसएस के साथ एक श्वेत और श्याम छवि कैसे बनाएं?


CSS के साथ एक श्वेत-श्याम छवि बनाने के लिए निम्नलिखित कोड है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
   margin: 20px;
}
img.normal{
   margin-left: 30%;
   width: 300px;
   height: 300px;
}
img.filter {
   width: 300px;
   height: 300px;
   filter: grayscale(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Black and White Image example</h1>
<img class="normal" src="https://i.picsum.photos/id/59/500/500.jpg">
<img class="filter" src="https://i.picsum.photos/id/59/500/500.jpg">
</body>
</html>

आउटपुट

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

सीएसएस के साथ एक श्वेत और श्याम छवि कैसे बनाएं?


  1. CSS और JavaScript के साथ ट्री व्यू कैसे बनाएं? CSS और JavaScript के साथ ट्री व्यू कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक ट्री व्यू बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: &qu

  1. कैसे सीएसएस और जावास्क्रिप्ट के साथ एक उद्धरण स्लाइड शो बनाने के लिए? कैसे सीएसएस और जावास्क्रिप्ट के साथ एक उद्धरण स्लाइड शो बनाने के लिए?

    CSS और JavaScript के साथ एक कोट स्लाइड शो बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "

  1. CSS का उपयोग करके एक ब्लैक एंड व्हाइट इमेज कैसे बनाएं CSS का उपयोग करके एक ब्लैक एंड व्हाइट इमेज कैसे बनाएं

    CSS के फ़िल्टर गुण के लिए ग्रेस्केल मान निर्दिष्ट करके हम एक श्वेत-श्याम छवि बना सकते हैं। फ़िल्टर गुण का उपयोग छवियों पर धुंधलापन, ड्रॉप-शैडो जैसे विशेष प्रभावों को लागू करने के लिए किया जा सकता है। सिंटैक्स CSS फ़िल्टर प्रॉपर्टी का सिंटैक्स इस प्रकार है - चयनकर्ता {फ़िल्टर:ग्रेस्केल(100%); -वेबकि