Advertisement
  1. Web Design
  2. Complete Websites

CSS3 ट्विस्ट के साथ एक रेस्पॉन्सिव, फ़िल्टर करने योग्य पोर्टफोलियो बनाएँ

Scroll to top
Read Time: 23 min

() translation by (you can also view the original English article)

फिल्टर करने योग्य पोर्टफोलियो की अंतर्निहित दृश्य अपील (जैसे Tuts + hub) ने उन्हें बहुत लोकप्रिय बना दिया है। आज, हम सीधे-आगे मार्कअप, CSS3 और jQuery का एक छोटा सा उपयोग कर रहे हैं।


Step 1: फ़ाइल संरचना

हम अपने प्रोजेक्ट के लिए निम्न फ़ाइल संरचना का उपयोग करेंगे:

File Structure

इन फ़ाइलों के आधार पर एक परियोजना को एक साथ खींचें (आपको 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>&copy; 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>&copy; 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 (कालक्रम क्रम में) के माध्यम से क्या करने जा रहे हैं:

  1. nav > li प्रेस का पता लगाएं।
  2. सभी थंबनेल को उन्हें .not-current क्लास देकर स्केल करें। class.
  3. जोड़ें .current-li चयनित श्रेणी के संबंधित <li> में .current-li क्लास जोड़ें।
  4. हटाएं .not-current चयनित श्रेणी के थंबनेल से क्लास को हटाएं।
  5. चयनित श्रेणी के सभी थंबनेल में .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 फिडल्स बनाए हैं:

  1. Caption Split Effect (Vertical)
  2. Caption Split Effect (Horizontal)
  3. Diagonal Masked Thumbnail Images

निष्कर्ष

बस! हमने सफलतापूर्वक एक काम किया है, फ़िल्टर करने योग्य और रेस्पॉन्सिव पोर्टफोलियो बनाया है। मुझे आशा है कि आपको यह ट्यूटोरियल उपयोगी लगेगा। पढ़ने के लिए धन्यवाद!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.