वेबसाइट पेज के तत्वों को घुमाने का एक बहुत ही सरल तरीका - बस कुछ सीएसएस शैलियों को लागू करें। इस पाठ से परिचित होने से आप पेज पर एक अनफोल्डेड कार्ड फैन, बिखरी हुई गिरी हुई पत्तियां या स्टाइलिश तस्वीरें एक एल्बम में रख सकेंगे। पाठ में एक फोटो एलबम के कार्यान्वयन का एक उदाहरण है और सभी आधुनिक ब्राउज़रों के समाधान को ध्यान में रखता है।
यह आवश्यक है
450px चौड़ी चार फ़ोटो
अनुदेश
चरण 1
यह उदाहरण घुमाए गए फ़ोटो के साथ एक स्टाइलिश एल्बम पृष्ठ बनाने पर केंद्रित होगा।
मैंने पतों के साथ अग्रिम चित्र (चौड़ाई 400px) तैयार किए:
भविष्य में, हम इमेज को उनके नाम के अनुसार आईडी असाइन करेंगे।
चरण दो
सबसे पहले, हम div टैग का उपयोग करके अपने फोटो एलबम के लिए एक ब्लॉक तैयार करेंगे, और img टैग का उपयोग करके इसमें फोटो भी जोड़ेंगे (प्रत्येक छवि को अपने स्वयं के div टैग में संलग्न किया जाना चाहिए), जैसे:
कृपया ध्यान दें कि हमने ब्लॉक को एक पहचानकर्ता सौंपा है -। पहचानकर्ता द्वारा, हम css का उपयोग करके ब्लॉक को संदर्भित कर सकते हैं।
चरण 3
इसके बाद, आपको सीएसएस शैलियों को ब्लॉक में सेट करने की आवश्यकता है। शैलियों की सूची: "स्थिति: सापेक्ष;" - हमारे ब्लॉक के ऊपरी बाएँ कोने से मूल सेट करेगा; "मार्जिन: 50px ऑटो;" - पेज की बाकी सामग्री के ऊपर और नीचे हमारे ब्लॉक "50px" का इंडेंटेशन सेट करेगा, साथ ही स्वचालित इंडेंटेशन को दाएं और बाएं सेट करेगा, इस प्रकार हमारे ब्लॉक को केंद्र में संरेखित करेगा; "चौड़ाई: 900px; ऊंचाई: 650px;" - चौड़ाई को क्रमशः 900px और ऊँचाई को 650px पर सेट करेगा।
शैलियों की निर्दिष्ट सूची इस प्रकार रखी जानी चाहिए:
#फोटो_पेज {
स्थिति: रिश्तेदार;
मार्जिन: 0 ऑटो;
चौड़ाई: 900px;
ऊंचाई: 650px;
पाठ-संरेखण: केंद्र;
}
"#photo_page" के उपयोग पर ध्यान दें - इस प्रकार हम ब्लॉक आईडी का उल्लेख करते हैं।
चरण 4
अब हम photo_page ब्लॉक के अंदर प्रत्येक छवि के लिए सामान्य शैलियाँ निर्दिष्ट करेंगे। ये गोल कोने, ग्रे बॉर्डर, सफेद बैकग्राउंड, पैडिंग और ड्रॉप शैडो हैं।
यह एक फोटोग्राफिक प्रभाव पैदा करेगा:
#फोटो_पेज img {
सीमा-त्रिज्या: 7px;
सीमा: 1px ठोस ग्रे;
पृष्ठभूमि: #ffffff;
पैडिंग: 10px;
बॉक्स-छाया: 2px 2px 10px # 697898;
}
"#photo_page img" के उपयोग पर ध्यान दें - यह photo_page ब्लॉक के अंदर की सभी छवियों को संदर्भित करेगा
चरण 5
इस तरह की एक छोटी शैली जोड़ना भी महत्वपूर्ण है:
#फोटो_पेज डिव {
बाईंओर तैरना;
}
यह photo_page ब्लॉक के अंदर सभी ब्लॉक को बाईं ओर सिकोड़ता है।
चरण 6
पाठ का मध्यवर्ती चरण अब पूरा हो चुका है। यदि आपका काम स्क्रीनशॉट में छवि के समान है, तो आपने कोई गलती नहीं की है और अगले चरण पर आगे बढ़ सकते हैं।
चरण 7
अब हम पोस्ट की गई तस्वीरों को घुमाने की बारी करते हैं। इसके लिए हमें ट्रांसफॉर्म स्टाइल की जरूरत है। फिलहाल, अपने शुद्ध रूप में, इसका उपयोग नहीं किया जाता है, लेकिन शुरुआत में प्रत्येक ब्राउज़र के लिए केवल एक उपसर्ग के साथ, जैसे:
-वेबकिट-ट्रांसफॉर्म: रोटेट (मान);
-मोज-ट्रांसफॉर्म: रोटेट (मान);
-ओ-ट्रांसफॉर्म: रोटेट (मान);
यह ब्राउज़रों के लिए रोटेशन शैली है: Google क्रोम, मज़िला, ओपेरा (क्रमशः)। "value" शब्द के बजाय, हम अंत में deg के साथ एक संख्या डालेंगे, जैसे:
90 डिग्री - 90 डिग्री दक्षिणावर्त घुमाएं।
-5 डिग्री - घुमाएँ -5 डिग्री वामावर्त।
आदि।
चरण 8
फ़ोटो फ़ोटो के लिए शैली_1:
# फोटो_1 {
-वेबकिट-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
-मोज-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
-ओ-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
}
पहली छवि को 5 डिग्री घुमाया गया है।
चरण 9
फोटो फोटो_2 के लिए शैली:
# फोटो_2 {
-वेबकिट-ट्रांसफॉर्म: रोटेट (-3deg);
-मोज-ट्रांसफॉर्म: रोटेट (-3deg);
-ओ-ट्रांसफॉर्म: रोटेट (-3deg);
}
दूसरी छवि -3 डिग्री घुमाई गई है।
चरण 10
फोटो फोटो_3 के लिए शैली:
# फोटो_3 {
-वेबकिट-ट्रांसफॉर्म: रोटेट (-2deg);
-मोज-ट्रांसफॉर्म: रोटेट (-2deg);
-ओ-ट्रांसफॉर्म: रोटेट (-2deg);
}
तीसरी छवि -2 डिग्री घुमाई गई है।
चरण 11
फोटो फोटो_4 के लिए शैली:
# फोटो_4 {
-वेबकिट-ट्रांसफॉर्म: रोटेट (8 डिग्री);
-मोज-ट्रांसफॉर्म: रोटेट (8 डिग्री);
-ओ-ट्रांसफॉर्म: रोटेट (8 डिग्री);
}
चौथी छवि को 8 डिग्री घुमाया गया है।
चरण 12
आइए देखें कि आप छवियों की स्थिति को कैसे ठीक कर सकते हैं। उदाहरण के लिए, आप पहली छवि को ऊपर से 20px और बाईं ओर से 10px ऑफसेट करना चाहते हैं। इस मामले में, आपको मार्जिन शैली का उपयोग करने की आवश्यकता है। हमारे मामले के लिए इसका उपयोग करने का सही तरीका यहां दिया गया है:
# फोटो_1 {
मार्जिन: 20px -10px -20px 10px;
-वेबकिट-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
-मोज-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
-ओ-ट्रांसफॉर्म: घुमाएं (5 डिग्री);
}
कृपया ध्यान दें कि शैली का पहला मान शीर्ष मार्जिन है; दूसरा दाहिनी ओर का इंडेंट है; तीसरा नीचे से एक इंडेंट है; चौथा - बायां इंडेंट।
महत्वपूर्ण: हमारे मामले में, निचला मार्जिन शीर्ष मार्जिन के नकारात्मक मूल्य के बराबर है।यदि आप अपने पृष्ठ पर छवि के नीचे सफेद स्थान देखते हैं, तो छवि के निचले भाग को और भी नकारात्मक रूप से इंडेंट करने का प्रयास करें।
चरण 13
काम पूरा हो गया है, मैं एक स्क्रीनशॉट प्रदान करता हूं (चरण 12 में वर्णित पहली छवि के इंडेंटेशन में परिवर्तन को ध्यान में रखते हुए)।
किसी भी छवि में इंडेंटेशन शैली जोड़ें जो आपके अनुरूप नहीं है।
