CSS-छाया: बनाउन कसरी

अन्धकार बिना त्यहाँ छाया बिना कुनै हल्का कुनै रुप हो। पनि भनिन्छ महिलाहरु को लागि आधारभूत बनाउन-अप उपकरण "छाया।" तपाईं आफ्नो पृष्ठहरूमा सुंदरता ल्याउन चाहनुहुन्छ भने, तपाईंले सही जोर राख्न आवश्यक - CSS-छाया जहाँ आवश्यक छ थप्नुहोस्।

तल प्रस्तुत सामाग्री तपाईं छाया कसरी स्थापना गर्न वा CSS-कोड प्रयोग गरेर छवि ब्लक गर्न सिक्न मदत गर्नेछ।

CSS-छाया। विन्यास

वास्तवमा बक्स-छाया, जहाँ बक्स - एक ब्लक र छाया - यो नै एक छाया छ।

कोड ब्रेसहरू लेखिएको:

{बक्स-छाया: 11px 22px 33px 44px # 333333;}।

लाइन एकाइ छाया पिक्सेल अर्धव्यास संग मानक सेट गरिएको छ भनेर हामीलाई बताउँछ। निम्नानुसार डाटा decrypted छ:

• 11px - छायाँ (एक्स अक्ष मा ब्लक सापेक्षित सकारात्मक मूल्य (20px) सही, नकारात्मक (-37px) गर्न छाया पारी हुनेछ - बायाँ);
• 22px - ब्लक वाई-अक्ष गर्न छाया नातेदार को displacements (को छाया मा एक पारी एउटा सकारात्मक मूल्य (5px) नेतृत्व तल, नकारात्मक (-17px) - अप) संग;
• 33px - प्यारामिटर, उच्च नम्बर, मजबूत प्रभाव धमिल्याउने छ;
• 44px - अर्धव्यास को छाया र छ सीधा समानुपातिक;
• # 333333 - को छाया मा चित्रित छ जो रंग।

पछिल्लो तीन मापदण्डहरू वैकल्पिक छन् र बस लाइन मा हटाइएका गर्न सकिन्छ, कि छ ई {बक्स-छाया: 10px 13px। ;} - यो लाइन गलत छैन (छाया रंग ब्लक पाठ को रंग को समान छ)।

त्यसैले, आफ्नो साइट को पृष्ठ मा छाया सिर्जना गर्न एक कठिनाई, तर धेरै राम्रो देख तपाईं सिर्जना गर्न सक्नुहुन्छ प्रभाव छ! बनाउन आफ्नो बच्चा एक अद्वितीय, inimitable, किनभने डिजाइन छ महत्त्वपूर्ण कुरा, हरेक विवरण, हरेक विवरण। यहाँ, यो, केही विशेष देखिन्छ, तर यो धेरै रोचक र आकर्षक छ।

विचार केही उदाहरणात्मक उदाहरणहरू देखिन्छ जस्तै छाया CSS ब्लक अनुसार गर्न कोडिंग:

1. {बक्स-छाया: 25px 25px;} - CSS-छाया द्वारा 25 पिक्सेल अक्ष अफसेट।
2. {बक्स-छाया: 25px 25px 10px;} - अफसेट CSS-छाया 25 पिक्सेल र किनाराको 10 पिक्सेल धमिल्याउने अक्षों।
3. {बक्स-छाया: 25px 25px 10px 5px;} - CSS-छायाँ अक्ष द्वारा 25 पिक्सेल धमिलो किनाराको 10 पिक्सेल र predetermined अर्धव्यास 5 पिक्सेल
4. {बक्स-छाया: 25px 25px 10px 5px # 9e9e9e;} - 10 पिक्सेल 25 पिक्सेल धमिलो किनाराको द्वारा CSS-छायाँ अक्ष, 5 पिक्सेल र रंग को अर्धव्यास निर्दिष्ट गर्नुहोस्।

छाया प्रभाव

गर्न बनाउन अझ सुन्दर, रमणीय र मूल रंग नै फरक प्रभाव। तपाईं भित्री छाया बनाउन सक्छ। यसलाई सामान्य रूपमा जाने "inset", प्यारामिटरहरू थप विवरण को मापदण्डहरु निर्दिष्ट गर्न पर्याप्त कोड छ:

{बक्स-छाया: inset 4px 2px 6px # 9e9e9e;}।

यो सम्भव गर्न राख्नु अन्तर्गत ब्लक केही छाया संग पूर्ण बिभिन्न मापदण्डहरु मा कोड, तिनीहरूले (को छाया) हो सूचीकृत विभाजित गरेर अल्पविराम:

{बक्स-छाया: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}।

छाया चित्र

मा वाहेक गर्न एकाइहरु मा साइट इच्छा पक्कै BE चित्र, फोटो, पृष्ठभूमिबाट - सबै यी तत्व पनि नजर धेरै रोचक संग छाया। तपाईं पूर्व-छवि सम्पादक मा तस्वीर आकर्षित र छाया संग पहिले नै पृष्ठमा पेस्ट गर्न सक्नुहुन्छ। तर, पहिले, यो सधैं सम्भव विभिन्न कारण सहित किनभने ग्राफिक्स संग काम मा कौशल को कमी को, दोश्रो, छवि कुनै पनि हेरफेर उहाँलाई, थपिएको छ "वजन", र यस्तो तस्वीर राम्रो पृष्ठ लोड सुस्त हुन सक्छ छ। यो मामला, तपाईं बनाउन एक CSS-छाया तस्बिरहरू।

यो समस्या सबैभन्दा सरल र syntactically सही समाधान - एकाइ सिर्जना, तपाईंको चित्रमा पृष्ठभूमिमा Kotormo हुनेछ। अर्को, तपाईं एकाइ लागि आवश्यक छाया बनाउन र तिनीहरूले पृष्ठभूमि छवि प्रदर्शित छन्:

• .block1 {बक्स-छाया: inset 0 0 11px 9px # 9e9e9e; चौडाई: 480px; उचाई: 360px; पृष्ठभूमि: URL (तस्बिरहरू / charlize_theron_2.jpg) 0 0 कुनै दोहोरो;}

यो उदाहरण मा, हामी अक्षहरूमा को अफसेट कुनै एउटा भित्री छाया सिर्जना गर्नुहोस्, अस्पष्टअर्धव्यास, परिभाषित रङ, उचाइ र ब्लक को चौडाई संग, र पृष्ठभूमिमा (पृष्ठभूमि) kuartinku नियुक्त। रूपमा परिणाम हामी, एक तस्वीर को भित्री छाया।

उपयोगी व्यायाम - CSS-कोड प्रयोग छाया सिर्जना गर्न सहमत - यो राम्रो, सरल, अझै रोमाञ्चक छ, र सबै भन्दा महत्वपूर्ण।