CSS3 गैलरी

हैलो, खब्रोविट्स!
हाल ही में, मुझे कार्रवाई में css3 बन्स की कोशिश करने के लिए हैरान किया गया था। देखें कि वे वास्तविकता में क्या फिट बैठते हैं। मेरी नजर फैंसीबॉक्स गैलरियों पर पड़ी, जिन्हें हर कोई जानता था, आदि। दूसरे शब्दों में - मैंने एक js गैलरी की झलक बनाने का फैसला किया, लेकिन केवल शुद्ध html + css में।
चलिए शुरू करते हैं।
मैं चित्रों की व्यवस्था से परेशान नहीं था, उन्हें फ्लोट के माध्यम से एक "दीवार" में छोड़ दिया गया: छोड़ दिया। छवि के लिए जनक एक लिंक (टैग "ए") था, क्यों - यह नीचे स्पष्ट हो जाएगा। क्योंकि मैंने चार चित्रों की चार पंक्तियों को बनाने का फैसला किया, हम उनसे ऊँचाई और चौड़ाई का 25% पूछते हैं। बॉक्स-आकार के माध्यम से कंटेनर में बॉर्डर्स को "रखा" जाता है। यह इस तरह दिखता है:

a{ float: left; width: 25%; height: 25%; position: relative; border: 1px solid #333; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

अब हम छवि के साथ काम करते हैं। हम इसे 100% पर सेट करते हैं, पूर्ण और संक्रमण के साथ स्थिति। कोड संलग्न है:

 a img{ display: block; width: 100%; height: 100%; -webkit-transition-property: width, height; /* ,     */ -webkit-transition-duration: 300ms; /* ,         */ -moz-transition-property: width, height; -moz-transition-duration: 300ms; -o-transition-property: width, height; -o-transition-duration: 300ms; position: absolute; opacity: 0.3; /*    */ cursor: pointer; } 

गैलरी के विकल्पों में से एक में, मैंने फ़ोटो पर हस्ताक्षर करने का निर्णय लिया। के माध्यम से कार्यान्वित: छद्म तत्व के बाद।

 a:after { display: block; position: absolute; width: 100%; height: 100%; content: "Studio.com"; color: #eaeaea; font-family: "Trebuchet MS"; font-size: 16px; opacity: 0.5; } 

मुझे लगता है कि यहां सब कुछ स्पष्ट है।

सवाल उठता है कि छवि को खोलने के लिए क्या कार्रवाई की गई। आखिरकार, यह आवश्यक है कि यह खुलता है और इस अवस्था में रहता है जब तक हम देखते नहीं हैं। समाधान में पाया गया था: फोकस छद्म वर्ग। और चूंकि यह केवल फॉर्म फील्ड और लिंक के लिए काम करता है, हमें "ए" टैग की आवश्यकता थी
हम बनाते हैं:

 a:focus img{ width: 250%; /*      */ height: 250%; position: absolute; opacity: 1; /*    */ z-index: 1; /*      */ -moz-box-shadow: 0 0 15px 2px #000; -webkit-box-shadow: 0 0 15px 2px #000; box-shadow: 0 0 15px 2px #000; /*    */ -webkit-transition-property: width, height; /*  «» */ -webkit-transition-duration: 2s; /* ,       */ -webkit-transition-delay: 0.3s; /*     ,  ,   */ -moz-transition-property: width, height; -moz-transition-duration: 2s; -moz-transition-delay: 0.3s; -o-transition-property:width, height; -o-transition-duration: 2s; -o-transition-delay: 0.3s; cursor: default; } 

नोट। : क्रोम ब्राउज़र के साथ फोकस छद्म श्रेणी सही ढंग से काम नहीं करती है, समाधान टैबइंडेक्स लिंक को जोड़कर पाया गया था।

सिद्धांत रूप में, सब कुछ तैयार है और आप इसका उपयोग शुरू कर सकते हैं। लेकिन परेशानी यह है - सभी छवियों को ऊपरी बाएं से निचले दाएं पर तैनात किया जाता है, और यह हमेशा हाथों में नहीं खेला जाएगा। आखिरकार, अगर यह गैलरी ब्राउज़र विंडो की दाईं या निचली सीमाओं के पास है, तो विस्तारित छवि इसी स्क्रॉल पट्टी का निर्माण करेगी। इससे छुटकारा कैसे पाएं? छद्म वर्ग: nth-child गुणों को लागू करने की आवृत्ति निर्धारित करने की अपनी क्षमता के साथ आया:

 a:nth-child(4n+4) img, a:nth-child(4n+3) img{ right: 0; } /*      3-  4-       */ 

 a:nth-child(n+9) img{ bottom: 0; } /*  ,      */ 

क्योंकि मेरे पास 4 * 4 ग्रिड है, तो इस मामले में 12 तत्व, उदाहरण के लिए, नीचे से और ऊपरी बाएं कोने में दाईं ओर प्रकट होगा। इस प्रकार, हमारे साथ सभी छवियों को छवि कंटेनर के अंदर ही प्रदर्शित किया जाएगा। रास्ते के साथ, हमने समस्या को गतिशील रूप से जोड़े गए चित्रों के साथ हल किया - हमें कक्षाओं को असाइन करने की आवश्यकता नहीं है -: nth-child इस बात का ध्यान रखेगा।

खैर, अब बस इतना ही ... लेकिन छवि को कैसे बंद करना है? वाजिब सवाल। हम तय करते हैं। चूँकि हमारी तस्वीर एक "फ़ोकस" के साथ खुलती है, इसलिए इसे बंद करने के लिए, हमें इससे ध्यान हटाने की आवश्यकता है। यहां मैंने बहुत परेशान नहीं किया और एक सामान्य "बटन" बनाने का फैसला किया और इसे गैलरी से ऊपरी दाएं कोने में लटका दिया। यहाँ उल्लेखनीय बात से, मैंने इसे एक साधारण प्लस बना दिया, इसे 45 डिग्री मोड़ दिया और इसमें एक छाया जोड़ दी:

 -webkit-text-shadow: 0px 0px 5px #222; -moz-text-shadow: 0px 0px 5px #222; text-shadow: 0px 0px 5px #222; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); cursor: pointer; 

हालांकि, हम इस तथ्य के लिए उपयोग किए जाते हैं कि एक तत्व दूसरे पर निर्भर हो सकता है और उसके कार्यों का जवाब केवल तभी दे सकता है जब वह वंशज हो। और अनिच्छा के 20 वंशज का उत्पादन करने के लिए (वैसे, उसी कारण से, मैंने सिर्फ एक बटन बनाया)।
सामान्यीकृत संबंधित तत्वों का चयनकर्ता "~" हमारी सहायता के लिए आया था। नतीजतन, हमने मार्कअप में एक तत्व बनाया और इसे हमारी छवियों के लिए कंटेनर में रखा, ताकि उनके पास एक आम अभिभावक हो। ठीक है, हम मानक तकनीक का उपयोग करते हैं:

 .closed{ display: none; } a:focus~.closed{ display: block; } 

अब, यदि हम किसी भी फोटो पर क्लिक करते हैं, तो ऊपरी दाएं कोने में एक क्रॉस दिखाई देता है, जब क्लिक किया जाता है, तो छवि को छोटा किया जाता है। और क्रमशः, क्रॉस भी गायब हो जाता है।

काम के उदाहरण:
पहला विकल्प
दूसरा विकल्प