() translation by (you can also view the original English article)
फिल्टर करने योग्य पोर्टफोलियो की अंतर्निहित दृश्य अपील (जैसे Tuts + hub) ने उन्हें बहुत लोकप्रिय बना दिया है। आज, हम सीधे-आगे मार्कअप, CSS3 और jQuery का एक छोटा सा उपयोग कर रहे हैं।
Step 1: फ़ाइल संरचना
हम अपने प्रोजेक्ट के लिए निम्न फ़ाइल संरचना का उपयोग करेंगे:
इन फ़ाइलों के आधार पर एक परियोजना को एक साथ खींचें (आपको HTML5 Shiv को पकड़ने की आवश्यकता होगी) और index.html में HTML मार्कअप के साथ शुरू करें।
Step 2: HTML हेड
आइए टेम्पो को उच्च रखें और उन चीजों की एक सूची बंद करें जिन्हें हमें <head> बनाने के लिए करना है:
- पृष्ठ के मीडिया प्रकार और चरित्र सेट की घोषणा करें।
- हमारी व्यूपोर्ट की चौड़ाई को डिवाइस की चौड़ाई के समान सेट करें और प्रारंभिक ज़ूम को 1 पर सेट करें (इसके बारे में और पढ़ें)
- हमारे पेज को एक शीर्षक दें।
- एक फेविकॉन संलग्न करें (रेटिना-सबूत फेविकॉन में रुचि रखते हैं?)
- हमारी मुख्य स्टाइल शीट संलग्न करें (style.css)
- मीडिया प्रश्नों को संभालने के लिए हमारी स्टाइल शीट संलग्न करें (मीडिया-प्रश्न.css)
- jQuery के नवीनतम संस्करण से लिंक करें।
- पुराने ब्राउज़र के साथ HTML5 संगतता मुद्दों को संभालने के लिए एक HTML5 Shiv जोड़ें।
और यहां हमें क्या मिलता है:
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 |
<title>John Doe's Portfolio</title> |
7 |
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> |
8 |
<link rel="stylesheet" href="css/style.css" media="screen"> |
9 |
<link rel="stylesheet" href="css/media-queries.css" media="screen"> |
10 |
<script src="http://code.jquery.com/jquery-latest.min.js"></script> |
11 |
<script src="js/js.js"></script> |
12 |
<!--[if lt IE 9]>
|
13 |
<script src="js/html5shiv.js"></script>
|
14 |
<![endif]-->
|
15 |
</head>
|
Step 3: HTML बेसिक मार्कअप
बॉडी में, हम पहले पृष्ठ पर केंद्रित सेट चौड़ाई के भीतर हमारे सभी तत्वों को पकड़ने के लिए 'कंटेनर' जोड़ते हैं। उसमें हम जोड़ते हैं (एक और तेजी से आग सूची के लिए तैयार हो जाओ):
- हमारे शीर्षक के लिए
<header>('जॉन डो')। - एक बुनियादी नेविगेशन (
<nav>) जिसमें<ul>मेनू शामिल है, जिसमें पांच आइटम हैं, प्रत्येक संबंधित ID के साथ। - वर्ग 'काम' के साथ थंबनेल के लिए एक
<section>। - एक
<footer>सभी कॉपीराइट सामान के साथ।
1 |
<body>
|
2 |
<div class="container"> |
3 |
<header>
|
4 |
<h1 class="title"> |
5 |
John Doe |
6 |
</h1>
|
7 |
</header>
|
8 |
<nav>
|
9 |
<ul>
|
10 |
<li id="all">All</li> |
11 |
<li id="web">Web</li> |
12 |
<li id="print">Print</li> |
13 |
<li id="illustration">Illustration</li> |
14 |
<li id="logo">Logo</li> |
15 |
</ul>
|
16 |
|
17 |
</nav>
|
18 |
<section class="work"> |
19 |
</section>
|
20 |
<footer>© 2012 John Doe. Valid HTML5.</footer> |
21 |
</body>
|
Step 4: HTML फिगर और इमेज
हम अपने थंबनेल के लिए <figure> टैग का उपयोग करेंगे और संबंधित श्रेणी के वर्ग को लागू करेंगे जो इसका है। आकृति के भीतर, हम थंबनेल की बैकग्राउंड के लिए इमेज (<img>) और कैप्शन के लिए एक विवरण सूची (<dl>) शामिल <a> टैग जोड़ देंगे।
1 |
<figure class="illustration"> |
2 |
<a href="#"> |
3 |
<img src="images/1.png" alt="" /> |
4 |
<dl>
|
5 |
</dl>
|
6 |
</a>
|
7 |
</figure>
|
Step 5: HTML कैप्शन (DL, DT, DD)
जैसा ऊपर बताया गया है, हम अपने कैप्शन के लिए एक विवरण सूची का उपयोग करेंगे। हमारे विवरण (<dt>) हमारे विवरण (<dd>) - क्रमशः Envato और चित्रण के लिए, हमारे छोटे शीर्षलेख - ग्राहक और भूमिका होगी।
1 |
<figure class="illustration"> |
2 |
<a href="#"> |
3 |
<img src="images/1.png" alt="" /> |
4 |
<dl>
|
5 |
<dt>Client</dt> |
6 |
<dd>Envato</dd> |
7 |
<dt>Role</dt> |
8 |
<dd>Illustration</dd> |
9 |
</dl>
|
10 |
</a>
|
11 |
</figure>
|
Step 6: पूर्ण HTML
यहां बताया गया है कि हमारा पूरा HTML मार्कअप कैसा दिखता है:
1 |
<!doctype html>
|
2 |
|
3 |
<html lang="en"> |
4 |
|
5 |
<head>
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<title>John Doe's Portfolio</title> |
9 |
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> |
10 |
<link rel="stylesheet" href="css/style.css" media="screen"> |
11 |
<link rel="stylesheet" href="css/media-queries.css" media="screen"> |
12 |
<script src="http://code.jquery.com/jquery-latest.min.js"></script> |
13 |
<script src="js/js.js"></script> |
14 |
<!--[if lt IE 9]>
|
15 |
<script src="js/html5shiv.js"></script>
|
16 |
<![endif]-->
|
17 |
|
18 |
</head>
|
19 |
|
20 |
<body>
|
21 |
|
22 |
<div class="container"> |
23 |
|
24 |
<header>
|
25 |
|
26 |
<h1 class="title"> |
27 |
John Doe |
28 |
</h1>
|
29 |
|
30 |
</header>
|
31 |
|
32 |
<nav>
|
33 |
|
34 |
<ul>
|
35 |
<li id="all">All</li> |
36 |
<li id="web">Web</li> |
37 |
<li id="print">Print</li> |
38 |
<li id="illustration">Illustration</li> |
39 |
<li id="logo">Logo</li> |
40 |
</ul>
|
41 |
|
42 |
</nav>
|
43 |
|
44 |
<section class="work"> |
45 |
|
46 |
<figure class="illustration"> |
47 |
<a href="#"> |
48 |
<img src="images/1.png" alt="" /> |
49 |
|
50 |
<dl>
|
51 |
<dt>Client</dt> |
52 |
<dd>Envato</dd> |
53 |
<dt>Role</dt> |
54 |
<dd>Illustration</dd> |
55 |
</dl>
|
56 |
</a>
|
57 |
</figure>
|
58 |
|
59 |
<figure class="print"> |
60 |
<a href="#"> |
61 |
<img src="images/2.png" alt="" /> |
62 |
<dl>
|
63 |
<dt>Client</dt> |
64 |
<dd>Envato</dd> |
65 |
<dt>Role</dt> |
66 |
<dd>Print</dd> |
67 |
</dl>
|
68 |
</a>
|
69 |
</figure>
|
70 |
|
71 |
<figure class="logo"> |
72 |
<a href="#"> |
73 |
<img src="images/3.png" alt="" /> |
74 |
<dl>
|
75 |
<dt>Client</dt> |
76 |
<dd>Envato</dd> |
77 |
<dt>Role</dt> |
78 |
<dd>Logo</dd> |
79 |
</dl>
|
80 |
</a>
|
81 |
</figure>
|
82 |
|
83 |
<figure class="web"> |
84 |
<a href="#"> |
85 |
<img src="images/4.png" alt="" /> |
86 |
<dl>
|
87 |
<dt>Client</dt> |
88 |
<dd>Envato</dd> |
89 |
<dt>Role</dt> |
90 |
<dd>Web</dd> |
91 |
</dl>
|
92 |
</a>
|
93 |
</figure>
|
94 |
|
95 |
<figure class="print"> |
96 |
<a href="#"> |
97 |
<img src="images/5.png" alt="" /> |
98 |
<dl>
|
99 |
<dt>Client</dt> |
100 |
<dd>Envato</dd> |
101 |
<dt>Role</dt> |
102 |
<dd>Print</dd> |
103 |
</dl>
|
104 |
</a>
|
105 |
</figure>
|
106 |
|
107 |
<figure class="web"> |
108 |
<a href="#"> |
109 |
<img src="images/6.png" alt="" /> |
110 |
<dl>
|
111 |
<dt>Client</dt> |
112 |
<dd>Envato</dd> |
113 |
<dt>Role</dt> |
114 |
<dd>Web</dd> |
115 |
</dl>
|
116 |
</a>
|
117 |
</figure>
|
118 |
|
119 |
<figure class="print"> |
120 |
<a href="#"> |
121 |
<img src="images/7.png" alt="" /> |
122 |
<dl>
|
123 |
<dt>Client</dt> |
124 |
<dd>Envato</dd> |
125 |
<dt>Role</dt> |
126 |
<dd>Print</dd> |
127 |
</dl>
|
128 |
</a>
|
129 |
</figure>
|
130 |
|
131 |
<figure class="web"> |
132 |
<a href="#"> |
133 |
<img src="images/8.png" alt="" /> |
134 |
<dl>
|
135 |
<dt>Client</dt> |
136 |
<dd>Envato</dd> |
137 |
<dt>Role</dt> |
138 |
<dd>Web</dd> |
139 |
</dl>
|
140 |
</a>
|
141 |
</figure>
|
142 |
|
143 |
<figure class="illustration"> |
144 |
<a href="#"> |
145 |
<img src="images/9.png" alt="" /> |
146 |
<dl>
|
147 |
<dt>Client</dt> |
148 |
<dd>Envato</dd> |
149 |
<dt>Role</dt> |
150 |
<dd>Illustration</dd> |
151 |
</dl>
|
152 |
</a>
|
153 |
</figure>
|
154 |
|
155 |
<figure class="print"> |
156 |
<a href="#"> |
157 |
<img src="images/10.png" alt="" /> |
158 |
<dl>
|
159 |
<dt>Client</dt> |
160 |
<dd>Envato</dd> |
161 |
<dt>Role</dt> |
162 |
<dd>Print</dd> |
163 |
</dl>
|
164 |
</a>
|
165 |
</figure>
|
166 |
|
167 |
<figure class="web"> |
168 |
<a href="#"> |
169 |
<img src="images/11.png" alt="" /> |
170 |
<dl>
|
171 |
<dt>Client</dt> |
172 |
<dd>Envato</dd> |
173 |
<dt>Role</dt> |
174 |
<dd>Web</dd> |
175 |
</dl>
|
176 |
</a>
|
177 |
</figure>
|
178 |
|
179 |
<figure class="logo"> |
180 |
<a href="#"> |
181 |
<img src="images/12.png" alt="" /> |
182 |
<dl>
|
183 |
<dt>Client</dt> |
184 |
<dd>Envato</dd> |
185 |
<dt>Role</dt> |
186 |
<dd>Logo</dd> |
187 |
</dl>
|
188 |
</a>
|
189 |
</figure>
|
190 |
|
191 |
<figure class="illustration"> |
192 |
<a href="#"> |
193 |
<img src="images/13.png" alt="" /> |
194 |
<dl>
|
195 |
<dt>Client</dt> |
196 |
<dd>Envato</dd> |
197 |
<dt>Role</dt> |
198 |
<dd>Illustration</dd> |
199 |
</dl>
|
200 |
</a>
|
201 |
</figure>
|
202 |
|
203 |
<figure class="web"> |
204 |
<a href="#"> |
205 |
<img src="images/14.png" alt="" /> |
206 |
<dl>
|
207 |
<dt>Client</dt> |
208 |
<dd>Envato</dd> |
209 |
<dt>Role</dt> |
210 |
<dd>Web</dd> |
211 |
</dl>
|
212 |
</a>
|
213 |
</figure>
|
214 |
|
215 |
<figure class="logo"> |
216 |
<a href="#"> |
217 |
<img src="images/15.png" alt="" /> |
218 |
<dl>
|
219 |
<dt>Client</dt> |
220 |
<dd>Envato</dd> |
221 |
<dt>Role</dt> |
222 |
<dd>Logo</dd> |
223 |
</dl>
|
224 |
</a>
|
225 |
</figure>
|
226 |
|
227 |
<figure class="print"> |
228 |
<a href="#"> |
229 |
<img src="images/16.png" alt="" /> |
230 |
<dl>
|
231 |
<dt>Client</dt> |
232 |
<dd>Envato</dd> |
233 |
<dt>Role</dt> |
234 |
<dd>Print</dd> |
235 |
</dl>
|
236 |
</a>
|
237 |
</figure>
|
238 |
|
239 |
</section>
|
240 |
|
241 |
<footer>© 2012 John Doe. Valid HTML5.</footer> |
242 |
|
243 |
</div>
|
244 |
|
245 |
</body>
|
246 |
|
247 |
</html>
|
चलो अब स्टाइल पर चले जाओ।
Step 7: CSS चयन और स्क्रॉलबार
हम कुछ चंचल तत्वों से निपटकर शुरू करेंगे; चयन स्थिति और स्क्रॉलबार (जो पूरी तरह से वैकल्पिक हैं) प्लस हम कुछ फोंट में भाग लेंगे।
1 |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); |
2 |
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); |
3 |
|
4 |
::selection { |
5 |
background: #333; |
6 |
color: #FFF; |
7 |
}
|
8 |
|
9 |
::-webkit-scrollbar { |
10 |
width: 9px; |
11 |
}
|
12 |
|
13 |
::-webkit-scrollbar-track { |
14 |
background:#eee; |
15 |
border: thin solid lightgray; |
16 |
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; |
17 |
}
|
18 |
|
19 |
::-webkit-scrollbar-thumb { |
20 |
background:#999; |
21 |
border: thin solid gray; |
22 |
}
|
उपर्युक्त कोड में, हमने Google - ओपन सेन्स और पीटी संस नरो से दो वेबफोंट आयात किए। फिर, हम उपयोगकर्ता चयन के लिए एक गहरा भूरे रंग की बैकग्राउंड और एक सफेद टेक्स्ट रंग सेट करते हैं।
इसके बाद हमने अपनी स्क्रॉलबार (वेबकिट ब्राउजर में) के लिए 9px की चौड़ाई निर्धारित की और 'हल्का भूरे रंग की बैकग्राउंड', एक पतली सीमा और एक हल्का इंसेट बॉक्स-शैडो दिया है। फिर, हमने स्क्रॉलबार अंगूठे को एक गहरा भूरा बैकग्राउंड दिया और इसमें एक पतली सीमा जोड़ा।
नोट: वेबकिट-स्क्रोलबार पर अधिक जानकारी के लिए, Chris Coyier's post देखें।
Step 8: CSS बॉडी
हम अपने बॉडी को एक हल्का भूरा शोर बैकग्राउंड देंगे और पहले आयात किए गए 'ओपन सेन्स' फ़ॉन्ट को लागू करेंगे। हम एक उन्नत फैननेस के लिए एक लाल शीर्ष सीमा भी जोड़ देंगे।
कुछ धमाल करें...
1 |
body { |
2 |
font-family: 'Open Sans', sans-serif; |
3 |
background: url('../images/bg.gif'); |
4 |
padding: 0; |
5 |
margin: 0; |
6 |
border-top: 10px solid #9d2e2c; |
7 |
}
|
Step 9: CSS कंटेनर
अब, हमारे कंटेनर के लिए, हम 960px, एक 10px टॉप और नीचे मार्जिन की चौड़ाई निर्धारित करेंगे, और दाएं और बाएं मार्जिन को 'auto' पर सेट करके पृष्ठ पर केंद्रित करेंगे। हम 'कुछ) मोबाइल उपकरणों पर हार्डवेयर त्वरण को' -webkit-transform: translateZ (0); 'का उपयोग करके भी मजबूर करेंगे।
1 |
.container { |
2 |
width: 960px; |
3 |
margin: 10px auto; |
4 |
-webkit-transform: translateZ(0); |
5 |
}
|
Step 10: CSS हैडर
हम बस हमारे शीर्षक font-size को बढ़ाएंगे, टेक्स्ट को केंद्र में रखेंगे और इसे चिकना दिखने के लिए 300 का font-weight देंगे।
1 |
header { |
2 |
text-align: center; |
3 |
font-weight: 300; |
4 |
font-size: 700%; |
5 |
}
|
Step 11: CSS Footer
हम टेक्स्ट को हॉरिज़ॉन्टली रूप से संरेखित करेंगे, प्रत्येक 50px के शीर्ष और निचले मार्जिन जोड़ें, टेक्स्ट रंग को भूरे रंग में सेट करें, और इसे 'clear: both' का उपयोग करके 'कार्य' अनुभाग के नीचे रखें।
1 |
footer { |
2 |
text-align: center; |
3 |
height: 100px; |
4 |
line-height: 100px; |
5 |
color: gray; |
6 |
clear: both; |
7 |
}
|
आइए अब नेविगेशन पर काम करते हैं।
Step 12: CSS नेविगेशन
हम अपने <ul> से सभी डिफ़ॉल्ट स्टाइल को हटाकर शुरू करेंगे। फिर, हम 50px शीर्ष और नीचे मार्जिन जोड़ देंगे और टेक्स्ट को केंद्र में संरेखित करेंगे।
1 |
nav ul { |
2 |
list-style: none; |
3 |
padding: 0; |
4 |
margin: 50px 0; |
5 |
text-align: center; |
6 |
}
|
अब, 'display: inline' का उपयोग करके, हम अपने सभी <li> को एक पंक्ति में प्रदर्शित करने के लिए प्राप्त करेंगे। हम कर्सर को 'पॉइंटर' पर सेट करेंगे और प्रत्येक <li> में 10px दायां मार्जिन जोड़ देंगे। डिफ़ॉल्ट टेक्स्ट रंग ग्रे की एक हल्की छाया होगी जो होवर पर काला हो जाएगी।
रंग परिवर्तन को एनिमेट करने के लिए हम एक छोटा संक्रमण समय भी जोड़ देंगे।
1 |
nav ul li { |
2 |
display: inline; |
3 |
cursor: pointer; |
4 |
margin-right: 10px; |
5 |
color: #666; |
6 |
|
7 |
transition: 0.3s; |
8 |
-webkit-transition: 0.3s; |
9 |
-moz-transition: 0.3s; |
10 |
-o-transition: 0.3s; |
11 |
-ms-transition: 0.3s; |
12 |
}
|
13 |
|
14 |
nav ul li:hover { |
15 |
color: #000; |
16 |
}
|
चूंकि अंतिम <li> है, umm, अंतिम चाइल्ड, इसे किसी भी सही मार्जिन की आवश्यकता नहीं है। तो, हम इसे हटा देंगे।
1 |
nav ul li:last-child { |
2 |
margin-right: 0; |
3 |
}
|
अब, <li> s के बाद स्लैश जोड़ें। इसे ': after' छद्म चयनकर्ता का उपयोग करके पूरा करेंगे। अपनी 'content' को '/', हल्के भूरे रंग के रंग और उचित बाएं हाशिए को सेट करके, हम लिंक अलगाव की एक सरल-अभी-प्रभावी प्रणाली का उत्पादन कर सकते हैं। हम यह भी सुनिश्चित करेंगे कि स्लैश होवर पर रंग को अपने डिफ़ॉल्ट रंग को मजबूर कर रंग में नहीं बदलते हैं li: hover भी।
1 |
nav ul li:after { |
2 |
margin-left: 10px; |
3 |
content: '/'; |
4 |
color: #bbb; |
5 |
}
|
6 |
|
7 |
nav ul li:hover:after { |
8 |
color: #bbb; |
9 |
}
|
फिर, हमें अंतिम <li> से स्लैश को हटाना होगा।
1 |
nav ul li:last-child:after { |
2 |
content: ''; |
3 |
}
|
यह सब नेविगेशन के लिए है, आइए अब थंबनेल पर जाएं।
Step 13: CSS थंबनेल
सबसे पहले, हम '.work' अनुभाग में 20px शीर्ष और निचला मार्जिन जोड़ देंगे।
1 |
.work { |
2 |
margin: 20px 0; |
3 |
}
|
इसके बाद, हम प्रत्येक '.work figure' (यानी हमारे सभी थंबनेल) स्टाइल देंगे। हम उन्हें रेखांकित करने के लिए 'float: left' का उपयोग करेंगे। इसके बाद हम एक 20px मार्जिन जोड़ देंगे, 200px की ऊंचाई और चौड़ाई निर्धारित करेंगे, और '-webkit-filter: sepia (0.4)' का उपयोग कर हल्के सेपिया प्रभाव को जोड़ देंगे। फिर, हम स्थिति को relative को position करेंगे कि हम आंकड़े के भीतर अन्य तत्वों (इस मामले में कैप्शन) को पूर्ण स्थिति में डाल सकते हैं। फिर हम एक हल्का box-shadow जोड़ देंगे जो हमारी सीमा के रूप में भी काम करेगा। हम अपने बक्से को बढ़ने और स्केल करने के लिए एक छोटा संक्रमण समय भी जोड़ देंगे।
1 |
.work figure { |
2 |
float: left; |
3 |
margin: 20px; |
4 |
width: 200px; |
5 |
height: 200px; |
6 |
background: #9d2e2c; |
7 |
line-height: 200px; |
8 |
-webkit-filter: sepia(0.4); |
9 |
position: relative; |
10 |
padding: 0 !important; |
11 |
|
12 |
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); |
13 |
|
14 |
transition: 0.6s; |
15 |
-webkit-transition: 0.6s; |
16 |
-moz-transition: 0.6s; |
17 |
-o-transition: 0.6s; |
18 |
-ms-transition: 0.6s; |
19 |
}
|
हम यह सुनिश्चित करेंगे कि हमारी छवि हमेशा इसकी ऊंचाई और चौड़ाई को 100% पर सेट करके थंबनेल फिट करेगी।
1 |
.work figure a img { |
2 |
height: 100%; |
3 |
width: 100%; |
4 |
}
|
यह सब हमारे मूल थंबनेल के लिए है। आइए अब उनके कैप्शन पर काम करें।
Step 14: CSS कैप्शन
विवरण सूची
चूंकि हम नहीं चाहते हैं कि हमारा कैप्शन प्रारंभ में दिखाई दे, हम इसकी opacity 0 पर सेट कर देंगे। फिर, हम इसे पूर्ण स्थिति (आकृति के भीतर) करेंगे और इसे सभी 4 गुणों को सेट करके पूरी तरह से आकृति को भर देंगे - top , right, bottom, और left - 0 तक।
इसके बाद हम इसकी line-height 2.5 तक सेट करेंगे और इसे एक अंधेरा, पारदर्शी बैकग्राउंड देंगे। चूंकि हम एक अंधेरे बैकग्राउंड का उपयोग कर रहे हैं, हम अपने टेक्स्ट रंग को सफेद पर सेट करेंगे। हम आकृति पर इसकी अस्पष्टता को एनिमेट करने के लिए एक छोटा संक्रमण समय भी जोड़ देंगे figure:hover।
1 |
.work figure dl { |
2 |
opacity: 0; |
3 |
position: absolute; |
4 |
left: 0; |
5 |
right: 0; |
6 |
bottom: 0; |
7 |
top: 0; |
8 |
padding: 20px; |
9 |
margin: 0; |
10 |
line-height: 2.5; |
11 |
background: rgba(0, 0, 0, 0.8); |
12 |
color: white; |
13 |
|
14 |
transition: 0.6s; |
15 |
-webkit-transition: 0.6s; |
16 |
-moz-transition: 0.6s; |
17 |
-o-transition: 0.6s; |
18 |
-ms-transition: 0.6s; |
19 |
}
|
जैसा कि हम थंबनेल पर होवरिंग पर दिखना चाहते हैं, हम इसकी opacity को आकृति पर 1 पर सेट करेंगे figure: hover।
1 |
.work figure:hover dl { |
2 |
opacity: 1; |
3 |
}
|
विवरण शर्तें
सबसे पहले, हम अपने font-family को 'PT संस नरो' में सेट करेंगे। उन्हें अपने विवरणों से थोड़ा छोटा दिखाई देने के लिए, हम उनके font-size 80% सेट करेंगे। फिर, हम 'text-transform:uppercase' का उपयोग करके हमारे विवरण शर्तों (क्लाइंट और रोल) को अपरकेस में बदल देंगे। नियमों और उनके विवरणों के बीच अत्यधिक अंतर से बचने के लिए हम नकारात्मक मार्जिन भी सेट करेंगे।
1 |
.work figure dl dt { |
2 |
text-transform: uppercase; |
3 |
font-family: 'PT Sans Narrow'; |
4 |
font-size: 12px; |
5 |
margin-bottom: -16px; |
6 |
}
|
परिभाषा विवरण
हमें यहां बहुत कुछ करने की आवश्यकता नहीं है - हम केवल margin को 0 पर सेट करेंगे। (डिफ़ॉल्ट रूप से, <dd> के पास थोड़ा बायां मार्जिन है।)
1 |
.work figure dl dd { |
2 |
margin-left: 0; |
3 |
}
|
Step 15: CSS 'current' / 'not-current' थंबनेल
.current
जब किसी निश्चित श्रेणी के थंबनेल को .current क्लास (JS के माध्यम से) दिया जाता है, तो हम चाहते हैं कि वे बढ़ जाएं और अपना सामान्य स्वर वापस प्राप्त करें (i। E। Sepia को हटाएं)। हम 'transform: scale(1.05)' का उपयोग करके उन्हें स्केल करेंगे, इस प्रकार एक्स और वाई अक्ष दोनों पर मूल आकार 1.05 गुणा तक स्केल कर रहे हैं और '-webkit-filter: sepia'(0)' का उपयोग करके पहले से जोड़े गए सेपिया को हटा दें।
1 |
.current { |
2 |
-webkit-filter: sepia(0) !important; |
3 |
|
4 |
-webkit-transform: scale(1.05); |
5 |
-moz-transform: scale(1.05); |
6 |
-o-transform: scale(1.05); |
7 |
-ms-transform: scale(1.05); |
8 |
transform: scale(1.05); |
9 |
|
10 |
-webkit-backface-visibility: hidden; |
11 |
-moz-backface-visibility: hidden; |
12 |
-o-backface-visibility: hidden; |
13 |
-ms-backface-visibility: hidden; |
14 |
backface-visibility: hidden; |
15 |
}
|
.not-current
यहां, हम .current थंबनेल के साथ किए गए कार्यों के ठीक विपरीत करेंगे - हम उन्हें 'transform: scale(0.75)' का उपयोग करके 75% तक स्केल करेंगे और उन्हें '-webkit-filter:grayscale(1)' का उपयोग करके काले और सफेद बना देंगे।
1 |
.not-current { |
2 |
-webkit-transform: scale(0.75); |
3 |
-moz-transform: scale(0.75); |
4 |
-o-transform: scale(0.75); |
5 |
-ms-transform: scale(0.75); |
6 |
transform: scale(0.75); |
7 |
|
8 |
-webkit-filter: grayscale(1) !important; |
9 |
}
|
.current-li
हम बस '.current-li के काले रंग के टेक्स्ट रंग को सेट करेंगे।
1 |
.current-li { |
2 |
color: #000; |
3 |
}
|
Step 16: पूर्ण CSS
यहां बताया गया है कि हमारा पूरा CSS कैसा दिखता है:
1 |
/* Style */
|
2 |
|
3 |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); |
4 |
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); |
5 |
|
6 |
::selection { |
7 |
background: #333; |
8 |
color: #FFF; |
9 |
}
|
10 |
|
11 |
::-webkit-scrollbar { |
12 |
width: 9px; |
13 |
}
|
14 |
|
15 |
::-webkit-scrollbar-track { |
16 |
background:#eee; |
17 |
border: thin solid lightgray; |
18 |
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; |
19 |
}
|
20 |
|
21 |
::-webkit-scrollbar-thumb { |
22 |
background:#999; |
23 |
border: thin solid gray; |
24 |
}
|
25 |
|
26 |
/* --------------------------
|
27 |
Body
|
28 |
----------------------------- */
|
29 |
|
30 |
body { |
31 |
font-family: 'Open Sans', sans-serif; |
32 |
background: url('../images/bg.gif'); |
33 |
padding: 0; |
34 |
margin: 0; |
35 |
border-top: 10px solid #9d2e2c; |
36 |
}
|
37 |
|
38 |
/* --------------------------
|
39 |
Container
|
40 |
----------------------------- */
|
41 |
|
42 |
.container { |
43 |
width: 960px; |
44 |
margin: 10px auto; |
45 |
-webkit-transform: translateZ(0); |
46 |
}
|
47 |
|
48 |
a { |
49 |
text-decoration: none; |
50 |
}
|
51 |
|
52 |
/* --------------------------
|
53 |
Header
|
54 |
----------------------------- */
|
55 |
|
56 |
header { |
57 |
text-align: center; |
58 |
font-weight: 300; |
59 |
font-size: 700%; |
60 |
}
|
61 |
|
62 |
/* --------------------------
|
63 |
Footer
|
64 |
----------------------------- */
|
65 |
|
66 |
footer { |
67 |
text-align: center; |
68 |
height: 100px; |
69 |
line-height: 100px; |
70 |
color: gray; |
71 |
clear: both; |
72 |
}
|
73 |
|
74 |
/* --------------------------
|
75 |
Navigation
|
76 |
----------------------------- */
|
77 |
|
78 |
nav ul { |
79 |
list-style: none; |
80 |
padding: 0; |
81 |
margin: 50px 0; |
82 |
text-align: center; |
83 |
}
|
84 |
|
85 |
nav ul li { |
86 |
display: inline; |
87 |
cursor: pointer; |
88 |
margin-right: 10px; |
89 |
color: #666; |
90 |
|
91 |
transition: 0.3s; |
92 |
-webkit-transition: 0.3s; |
93 |
-moz-transition: 0.3s; |
94 |
-o-transition: 0.3s; |
95 |
-ms-transition: 0.3s; |
96 |
}
|
97 |
|
98 |
nav ul li:last-child { |
99 |
margin-right: 0; |
100 |
}
|
101 |
|
102 |
nav ul li:hover { |
103 |
color: #000; |
104 |
}
|
105 |
|
106 |
nav ul li:hover:after { |
107 |
color: #bbb; |
108 |
}
|
109 |
|
110 |
nav ul li:after { |
111 |
margin-left: 10px; |
112 |
content: '/'; |
113 |
color: #bbb; |
114 |
}
|
115 |
|
116 |
nav ul li:last-child:after { |
117 |
content: ''; |
118 |
}
|
119 |
|
120 |
/* --------------------------
|
121 |
Main Image Box
|
122 |
----------------------------- */
|
123 |
|
124 |
.work { |
125 |
margin: 20px 0; |
126 |
}
|
127 |
|
128 |
.work figure { |
129 |
float: left; |
130 |
margin: 20px; |
131 |
width: 200px; |
132 |
height: 200px; |
133 |
background: #9d2e2c; |
134 |
line-height: 200px; |
135 |
-webkit-filter: sepia(0.4); |
136 |
position: relative; |
137 |
padding: 0 !important; |
138 |
|
139 |
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); |
140 |
|
141 |
transition: 0.6s; |
142 |
-webkit-transition: 0.6s; |
143 |
-moz-transition: 0.6s; |
144 |
-o-transition: 0.6s; |
145 |
-ms-transition: 0.6s; |
146 |
}
|
147 |
|
148 |
.work figure a img { |
149 |
height: 100%; |
150 |
width: 100%; |
151 |
}
|
152 |
|
153 |
.work figure dl { |
154 |
opacity: 0; |
155 |
position: absolute; |
156 |
left: 0; |
157 |
right: 0; |
158 |
bottom: 0; |
159 |
top: 0; |
160 |
padding: 20px; |
161 |
margin: 0; |
162 |
line-height: 2.5; |
163 |
background: rgba(0, 0, 0, 0.8); |
164 |
color: white; |
165 |
|
166 |
transition: 0.6s; |
167 |
-webkit-transition: 0.6s; |
168 |
-moz-transition: 0.6s; |
169 |
-o-transition: 0.6s; |
170 |
-ms-transition: 0.6s; |
171 |
}
|
172 |
|
173 |
.work figure:hover dl { |
174 |
opacity: 1; |
175 |
}
|
176 |
|
177 |
.work figure dl dt { |
178 |
text-transform: uppercase; |
179 |
font-family: 'PT Sans Narrow'; |
180 |
font-size: 12px; |
181 |
margin-bottom: -16px; |
182 |
}
|
183 |
|
184 |
.work figure dl dd { |
185 |
margin-left: 0; |
186 |
}
|
187 |
|
188 |
.current-li { |
189 |
color: #000; |
190 |
}
|
191 |
|
192 |
.current { |
193 |
-webkit-filter: sepia(0) !important; |
194 |
|
195 |
-webkit-transform: scale(1.05); |
196 |
-moz-transform: scale(1.05); |
197 |
-o-transform: scale(1.05); |
198 |
-ms-transform: scale(1.05); |
199 |
transform: scale(1.05); |
200 |
|
201 |
-webkit-backface-visibility: hidden; |
202 |
-moz-backface-visibility: hidden; |
203 |
-o-backface-visibility: hidden; |
204 |
-ms-backface-visibility: hidden; |
205 |
backface-visibility: hidden; |
206 |
}
|
207 |
|
208 |
.not-current { |
209 |
-webkit-transform: scale(0.75); |
210 |
-moz-transform: scale(0.75); |
211 |
-o-transform: scale(0.75); |
212 |
-ms-transform: scale(0.75); |
213 |
transform: scale(0.75); |
214 |
|
215 |
-webkit-filter: grayscale(1) !important; |
216 |
}
|
217 |
|
218 |
.not-current:hover dl { |
219 |
opacity: 0 !important; |
220 |
}
|
आइए अब JS पर काम करना शुरू करें।
Step 17: JS एल्गोरिदम
यहां हम अपने Javascript (कालक्रम क्रम में) के माध्यम से क्या करने जा रहे हैं:
-
nav > liप्रेस का पता लगाएं। - सभी थंबनेल को उन्हें
.not-currentक्लास देकर स्केल करें। class. - जोड़ें
.current-liचयनित श्रेणी के संबंधित<li>में .current-li क्लास जोड़ें। - हटाएं
.not-currentचयनित श्रेणी के थंबनेल से क्लास को हटाएं। - चयनित श्रेणी के सभी थंबनेल में
.currentक्लास जोड़ें।
#2 यहां scaleDown() फ़ंक्शन का उपयोग किया जाएगा और #3, #4, और # 5 show(category) फ़ंक्शन का उपयोग किया जाएगा।
Step 18: JS scaleDown() फ़ंक्शन
removeClass और addClass विधियों का उपयोग करके, हम उन तत्वों से .current क्लास को हटा देंगे, जिनमें से सभी को .not-current क्लास जोड़ना होगा। हम किसी भी .current-li क्लास को भी हटा देंगे। हम किसी भी <li से वर्तमान में यह है।
1 |
function scaleDown() { |
2 |
|
3 |
$('.work > figure').removeClass('current').addClass('not-current'); |
4 |
$('nav > ul > li').removeClass('current-li'); |
5 |
|
6 |
}
|
Step 19: JS show(category) समारोह
यह फ़ंक्शन प्रत्येक बार <li> क्लिक होने पर लागू किया जाएगा। सबसे पहले, हम सभी थंबनेल को स्केल करने के लिए scaleDown() फ़ंक्शन को कॉल करेंगे। फिर, हम .current-li क्लास को जोड़ देंगे क्लास को <li में जोड़ देंगे जो चयनित श्रेणी से मेल खाता है। इसके बाद हम श्रेणी के थंबनेल की श्रेणी को .not-current से .current में बदल देंगे (हमने .not-current क्लास लागू किया था)। scaleDown() फ़ंक्शन में सभी थंबनेल पर क्लास लागू किया था)। अंत में, यदि चयनित श्रेणी 'all' है, तो हम गतिशील रूप से जोड़े गए क्लासेज (यानी .current और .not-current) को हटा देंगे। सभी थंबनेल से।
नोट: चूंकि प्रत्येक श्रेणी के id (<li) और class (figure S) के नाम समान हैं, हम बस <li as '# + श्रेणी' और figure s 'के रूप में देखेंगे . + category '।
1 |
function show(category) { |
2 |
|
3 |
scaleDown(); |
4 |
|
5 |
$('#' + category).addClass('current-li'); |
6 |
$('.' + category).removeClass('not-current'); |
7 |
$('.' + category).addClass('current'); |
8 |
|
9 |
if (category == "all") { |
10 |
$('nav > ul > li').removeClass('current-li'); |
11 |
$('#all').addClass('current-li'); |
12 |
$('.work > figure').removeClass('current, not-current'); |
13 |
}
|
14 |
|
15 |
}
|
Step 20: JS क्लिक का पता लगाने और show(category) समारोह को कार्यान्वित करना
आखिरकार, document.ready विधि के माध्यम से, हम .current-li क्लास को li#all में जोड़ देंगे और nav> li क्लिक का पता लगाएंगे। इसके बाद हम क्लिक किए गए <li की id प्राप्त करेंगे और show(category) फ़ंक्शन को कार्यान्वित करेंगे जहां 'category' क्लिक किया जाएगा 'this.id' यानी क्लिक की गई <li>। इसलिए, उदाहरण के लिए, यदि <li> id #print के साथ क्लिक किया गया है, तो show('print') लागू किया जाएगा।
1 |
$(document).ready(function(){ |
2 |
|
3 |
$('#all').addClass('current-li'); |
4 |
|
5 |
$("nav > ul > li").click(function(){ |
6 |
show(this.id); |
7 |
});
|
8 |
|
9 |
});
|
यह हमारी Javascript को पूरा करता है।
चरण 21: पूर्ण JS
हमारा पूरा JS इस तरह दिखता है:
1 |
function scaleDown() { |
2 |
|
3 |
$('.work > figure').removeClass('current').addClass('not-current'); |
4 |
$('nav > ul > li').removeClass('current-li'); |
5 |
|
6 |
}
|
7 |
|
8 |
function show(category) { |
9 |
|
10 |
scaleDown(); |
11 |
|
12 |
$('#' + category).addClass('current-li'); |
13 |
$('.' + category).removeClass('not-current'); |
14 |
$('.' + category).addClass('current'); |
15 |
|
16 |
if (category == "all") { |
17 |
$('nav > ul > li').removeClass('current-li'); |
18 |
$('#all').addClass('current-li'); |
19 |
$('.work > figure').removeClass('current, not-current'); |
20 |
}
|
21 |
|
22 |
}
|
23 |
|
24 |
$(document).ready(function(){ |
25 |
|
26 |
$('#all').addClass('current-li'); |
27 |
|
28 |
$("nav > ul > li").click(function(){ |
29 |
show(this.id); |
30 |
});
|
31 |
|
32 |
});
|
अब जब हमारी साइट पूरी तरह कार्यात्मक है, चलिए इसे रेस्पॉन्सिव बनाते हैं।
चरण 22: CSS से रेस्पॉन्सिव बनाना
आइए 'media-queries.css' खोलने जा रहे हैं। आप अपने मीडिया प्रश्नों को लागू करने का तरीका चुनते हैं जो पूरी तरह से आपके ऊपर है। आप अपने मुख्य स्टाइलशीट में मीडिया प्रश्नों को प्राथमिकता देना पसंद कर सकते हैं, आप उन्हें प्रत्येक स्टाइल की घोषणा के साथ मॉड्यूलर और इनलाइन भी करना पसंद कर सकते हैं - यह आपके ऊपर है!
प्रत्येक ब्रेकपॉइंट के लिए आवश्यक स्टाइल परिवर्तन यहां वर्णित हैं।
965px या उससे कम
- कंटेनर की चौड़ाई 840px घटाएं
- प्रत्येक पंक्ति में 4 थंबनेल को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 170px प्रत्येक में घटाएं [(170px + 40px) x 4 = 210px x 4 = 840px]
1 |
/* Small viewports — Old monitors, netbooks, tablets (landscape), etc. */
|
2 |
|
3 |
@media only screen and (max-width: 965px) { |
4 |
.container { |
5 |
width: 840px; |
6 |
}
|
7 |
.work figure { |
8 |
width: 170px; |
9 |
height: 170px; |
10 |
}
|
11 |
}
|
860px या उससे कम
- कंटेनर की चौड़ाई 720px पर घटाएं
- प्रत्येक पंक्ति में 3 समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 40px) x 3 = 240px x 3 = 720px]
1 |
/* Smaller viewports — more tablets, old monitors */
|
2 |
|
3 |
@media only screen and (max-width: 860px) { |
4 |
.container { |
5 |
width: 720px; |
6 |
}
|
7 |
.work figure { |
8 |
width: 200px; |
9 |
height: 200px; |
10 |
}
|
11 |
}
|
740px या उससे कम
- कंटेनर की चौड़ाई 600px तक घटाएं
-
.not-currentकी ओपेसिटी को 50% तक घटाएं (चूंकि हम मुख्य रूप से मोबाइल उपकरणों के लिए काम कर रहे हैं) - प्रत्येक पंक्ति में 3 समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 160px प्रत्येक में घटाएं [(160px + 40px) x 3 = 200px x 3 = 600px]
1 |
/* Even smaller viewports — more tablets, etc. */
|
2 |
|
3 |
@media only screen and (max-width: 740px) { |
4 |
.container { |
5 |
width: 600px; |
6 |
}
|
7 |
.work figure { |
8 |
width: 160px; |
9 |
height: 160px; |
10 |
}
|
11 |
.not-current { |
12 |
opacity: 0.5; |
13 |
}
|
14 |
}
|
610px या उससे कम
- कंटेनर की चौड़ाई को 460px तक घटाएं
- थंबनेल के शीर्ष और निचले मार्जिन को 20px पर सेट करें और बाएं और दाएं मार्जिन 60px पर सेट करें
- प्रत्येक पंक्ति में 1 को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 120px) x 1 = 320px x 1 = 320px]
1 |
/* Mobile phones (Landscape) and Tablets (Portrait) */
|
2 |
|
3 |
@media only screen and (max-width: 610px) { |
4 |
.container { |
5 |
width: 460px; |
6 |
}
|
7 |
header { |
8 |
font-size: 400%; |
9 |
}
|
10 |
nav ul li { |
11 |
}
|
12 |
.work figure { |
13 |
margin-left: 40px; |
14 |
margin-bottom: 60px; |
15 |
}
|
16 |
.work figure dl { |
17 |
height: 40px; |
18 |
top: 200px; |
19 |
bottom: 0px; |
20 |
}
|
21 |
}
|
480px या उससे कम
- कंटेनर की चौड़ाई 320px तक घटाएं
- थंबनेल के शीर्ष और निचले मार्जिन को 20px पर सेट करें और बाएं और दाएं मार्जिन 60px पर सेट करें
- प्रत्येक पंक्ति में 1 को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 120px) x 1 = 320px x 1 = 320px]
1 |
/* Mobile phones (Portrait) */
|
2 |
|
3 |
@media only screen and (max-width: 480px) { |
4 |
.container { |
5 |
width: 320px; |
6 |
}
|
7 |
|
8 |
.work figure { |
9 |
width: 200px; |
10 |
height: 200px; |
11 |
margin: 20px 60px; |
12 |
}
|
13 |
}
|
ब्राउज़र संगतता
मूल स्केलिंग कार्यक्षमता (CSS ट्रांसफॉर्म) अधिकांश प्रमुख ब्राउज़रों में पूरी तरह से काम करती है, जिसमें निम्न शामिल हैं:
- IE 9+ (use http://www.useragentman.com/IETransformsTranslator/ for lower versions)
- Firefox 14+
- Chrome 21+
- Safari 5.1+
फिल्टर इफेक्ट्स (सेपिया और ग्रेस्केल) केवल वेबकिट ब्राउज़र में काम करते हैं।
jsFiddles
मैंने आपके लिए कोशिश करने और प्रयोग करने के लिए तीन js फिडल्स बनाए हैं:
निष्कर्ष
बस! हमने सफलतापूर्वक एक काम किया है, फ़िल्टर करने योग्य और रेस्पॉन्सिव पोर्टफोलियो बनाया है। मुझे आशा है कि आपको यह ट्यूटोरियल उपयोगी लगेगा। पढ़ने के लिए धन्यवाद!
