() translation by (you can also view the original English article)
इस ट्यूटोरियल के दौरान हम शानदार टाइमलाइन पोर्टफोलियो का निर्माण करेंगे, जैसा कि टॉमस लॉरीनेविसियस द्वारा earlier tutorial में देखा गया था। हम कुछ रेस्पॉन्सिव तकनीकों के साथ-साथ CSS3 एनिमेशन, Sass और jQuery का एक छोटा सा इस्तेमाल करेंगे।
फ़ाइल और निर्देशिका संरचना
ठीक है, पहला कदम उन फ़ाइलों और फ़ोल्डरों को बनाने के लिए है जिसकी हमें ज़रूरत हैं। नीचे दी गई इमेज हमारे रूट संरचना को दर्शाती है।
जैसा कि आप देख सकते हैं, हमारे पास यहां बहुत आसान सेट है। "css" निर्देशिका के अंदर आगे बढ़ो और एक style.scss फ़ाइल बनाएं और normalize.css की कॉपी भी लें। इस परियोजना में Sass का उपयोग करने के लिए आपको या तो अपनी मशीन पर Sass की आवश्यकता होगी या आपको अपने लिए देख और संकलन करने के लिए एक ऐप की आवश्यकता होगी। मैं वर्तमान में मैक के लिए CodeKit का प्रयोग कर रहा हूं, लेकिन कुछ नामों के लिए Prepos, Scout और Koala जैसे बहुत सारे विकल्प हैं I वे सभी स्वतंत्र नहीं हैं, लेकिन जो भी आप चुनते हैं वह आपका बहुत समय बचाएगा!
"js" फ़ोल्डर के अंदर एक फ़ाइल बनाइए जिसे app.js कहा जाता है और साथ ही यहां जगह करने के लिए modernizr.js की एक कॉपी डाउनलोड भी करें। आधुनिक तौर पर इस्तेमाल किए गए आधुनिक इंस्ट्रूमेंट बिल्ड में सभी CSS3 और HTML5 टेस्ट शामिल हैं, क्योंकि हमें उस से अधिक की आवश्यकता नहीं होनी चाहिए। ठीक है, जो हमारी प्रारंभिक फाइलों और फ़ोल्डर्स को कवर करता है अगले वेरिएबल्सण में यह देखना है कि किस बिट को स्लिसिंग आउट की आवश्यकता है, यह देखने के लिए हमारे PSD डिजाइन की जांच करना है।
PSD Slicing करना
इस पृष्ठ का डिज़ाइन सीधे-आगे है जो कि निर्णय लेने का काम करता है अगर हमें किसी भी स्लाइस की आवश्यकता होती है टॉमस ने वास्तव में PSD के साथ इन सभी संपत्तियां प्रदान की हैं, इसलिए इस डिजाइन से सभी में कोई स्लाइस नहीं होना संभव होगा। हालांकि, मैंने इस ट्यूटोरियल के लिए निर्णय लिया है कि हमें तीन पोर्टफोलियो इमेजेज और पेज के निचले भाग में लोडिंग आइकन को बाहर करना चाहिए। यह बस कुछ और से अधिक आसानी के लिए है, इसलिए हमें फ़ोटोशॉप में कोई भी आकार बदलने की ज़रूरत नहीं है।
फ़ोटोशॉप में slice टूल को पकड़ो और ध्यान से स्लाइस को निकाल लें। आप उस पर दो बार क्लिक करके प्रत्येक टुकड़ा नाम कर सकते हैं। फिर Save for Web... (या इसी तरह के मेनू आइटम को फ़ोटोशॉप के आपके संस्करण के आधार पर) का उपयोग करें ताकि स्लाइड्स को हमारी इमेज डायरेक्टरी में निर्यात किया जा सके।
मैंने फिर "portfolio" नामक "इमेजेज" के अंदर एक नया फ़ोल्डर बनाया, जिसमें पोर्टफोलियो आइटम से संबंधित इमेजेज होंगी। इस फ़ोल्डर में तीन पोर्टफोलियो इमेजेज को ले जाएं और यह हमारी स्कीइसिंग प्रक्रिया को पूरा करता है!
अवतार इमेज
अब uifaces.com पर जाएं और हमारी प्रोफ़ाइल की इमेज के रूप में उपयोग करने के लिए इमेजेज में से एक चुनें। मैं डिजाइन के रूप में एक ही खोजने में कामयाब रहा, लेकिन इससे कोई फर्क नहीं पड़ता कि आप कौन सा चुनते हैं 128x128 संस्करण प्राप्त करें और इसे "images" फ़ोल्डर में पॉप करें।
हम लगभग अपनी इमेजेज के साथ केवल सोशल मीडिया और नेविगेशन आइकन के साथ किया जाता है ताकि वे बाहर निकल सकें। हम अगले में ऐसा करेंगे।
Sprites
जब आपके पास आइकनों जैसी इमेजेज के समूह होते हैं तो यह ग्रिड पैटर्न में उन सभी को एक इमेज बनाने का एक अच्छा विचार है। इन्हें Sprites कहा जाता है। आप इसे अधिकतम करने के लिए ले जा सकते हैं और अपनी वेबसाइट पर हर एक इमेज की एक बड़ी फाइल बना सकते हैं, लेकिन इस ट्यूटोरियल के लिए हम दो sprites और प्रत्येक के लिए इसी रेटिना संस्करण बनाने जा रहे हैं।
इसलिए, टोमास द्वारा प्रदान की गई asset links का उपयोग करके, हम प्रत्येक सोशल मीडिया आइकन को डाउनलोड कर सकते हैं। प्रत्येक के 128x128 पिक्सेल संस्करण को पकड़ो, ताकि हम आकारों की आवश्यकता के अनुसार हम पैमाने पर कर सकें। फिर फ़ोटोशॉप में हमें एक फाइल बनाने की आवश्यकता है जो 101px 51px से है प्रत्येक सामाजिक मीडिया आइकन को इस फ़ाइल में खींचें और 24px by 24px से नीचे का आकार बदलें। आइकन काले हैं, लेकिन हमें उन्हें सफेद करने की आवश्यकता है, इसलिए प्रत्येक के लिए एक लेयर स्टाइल लागू करें जो सफेद रंग का ओवरले देता है। अपनी बैकग्राउंड का रंग कुछ अंधेरे में परिवर्तित करें ताकि हम उन्हें देख सकें और फिर उन्हें ऐसा व्यवस्थित कर सकें...
प्रत्येक आइकन किनारों और एक दूसरे से ठीक 1 पिक्सेल है। मैंने प्रत्येक आइकन की ओपेसिटी को 80% में बदल दिया है। अब माउस की इस पंक्ति को दोहराएं और इसे नीचे सीधे स्थान पर रखें ताकि इसे किनारों से 1 पिक्सेल रखें। माउस की दूसरी पंक्ति की ओपेसिटी को 100% में बदलें यह कुछ इस तरह दिखना चाहिए...
अब फ़ोटोशॉप में बैकग्राउंड लेयर को छिपाने के लिए "images" फ़ोल्डर के अंदर एक पारदर्शी बैकग्राउंड और Save For Web एक PNG नामित social-sprite.png के रूप में सहेजें। अगला कदम इस स्प्रीट के रेटिना संस्करण को बनाने के लिए है, इसलिए हम उच्च पिक्सेल घनत्व प्रदर्शित होने पर कुरकुरे चिह्न प्राप्त करते हैं। यह काफी सरल होना चाहिए और बस हमारे पहले से ही आकार के आकार को दोहरी करना चाहिए। इसलिए रेटिना संस्करण 202px 102px होगा। याद रखें, हर चीज को दोगुना करना पड़ता है जिसमें प्रत्येक आइकन के आस-पास के अंतराल शामिल होते हैं ताकि इस स्प्रीट के लिए हमें प्रत्येक आइकन और किनारों के बीच 2 पिक्सल की आवश्यकता होगी। समाप्त रेटिना संस्करण इस तरह दिखना चाहिए...
ग्रेट! अब बस पहले की तरह बैकग्राउंड लेयर छिपाए और PNG के रूप में निर्यात करें, लेकिन इस बार इसे social-sprite@2x.png कहते हैं। यह एक इमेज फ़ाइल के रेटिना संस्करण के लिए एक मानक नामकरण सम्मेलन है।
तो अब हमें नेविगेशन आइकन के साथ ऐसा करने की आवश्यकता है। ये आइकन वेक्टर ऑब्जेक्ट्स PSD के अंदर हैं जिसका मतलब है कि हम उन्हें एक नई फाइल में डुप्लिकेट कर सकते हैं और आवश्यकतानुसार उन्हें स्केल कर सकते हैं। सामान्य संस्करण के लिए आवश्यक आकार 49px 18px से है और दोहरे आकार पर रेटिना संस्करण 98px by 36px है। समाप्त चित्र इस तरह दिखना चाहिए:
अति उत्कृष्ट! इन्हें nav-sprite.png और nav-sprite@2x.png के रूप में सहेजें। मुझे लगता है कि इमेजेज के लिए हमें जो कुछ करना है, वह पोंछते हैं, तो हम कुछ कोड लिखने के लिए आगे बढ़ें!
बेस HTML और Sass
आइए हमारे पृष्ठ के barebones के साथ शुरू करते हैं। हमारे index.html में, चीजें बंद करने के लिए निम्न मार्कअप की कॉपी बनाएं:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta name="viewport" content="initial-scale=1.0"> |
6 |
|
7 |
<title>My Portfolio</title> |
8 |
<link rel="stylesheet" href="css/style.css"> |
9 |
<script src="js/modernizr.js"></script> |
10 |
</head>
|
11 |
<body>
|
12 |
<main class="wrap group"> |
13 |
<aside class="sidebar"> |
14 |
<div class="my-info"> |
15 |
|
16 |
</div>
|
17 |
<nav class="menus"> |
18 |
|
19 |
</nav>
|
20 |
</aside>
|
21 |
<div class="content"> |
22 |
|
23 |
</div>
|
24 |
</main>
|
25 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
26 |
<script src="js/app.js"></script> |
27 |
</body>
|
28 |
</html>
|
यह साइडबार को एक तरफ और एक सामग्री डिवेल युक्त main रैपिंग एलिमेंट के साथ एक सरल लेआउट है। साइडबार के aside हमारे पास दो अनुभाग हैं, my-info और menus का div वाला एक nav। हमारी निर्भरताएं भी सभी शामिल हैं, विशेष रूप से jQuery 1.x का नवीनतम संस्करण। आइए अब हम कुछ वैरिएबल के साथ हमारे सास फाइल को भरना शुरू करते हैं।
1 |
$black: #000; |
2 |
$white: #FFF; |
3 |
$grey: #f7f7f7; |
4 |
$darkgrey: #5e5e5e; |
5 |
$red: #d35136; |
6 |
$green: #27b599; |
7 |
$blue: #088ecc; |
8 |
$darkblue: #11171c; |
9 |
|
10 |
$padding: 10px; |
11 |
$margin: 10px; |
12 |
$main-width: 1000px; |
13 |
|
14 |
$font-size: 14px; |
15 |
$font-family: 'Lato', sans-serif; |
16 |
$line-height: 1.4; |
17 |
|
18 |
$break-four: 1050px; |
19 |
$break-three: 760px; |
20 |
$break-two: 520px; |
21 |
$break-one: 360px; |
22 |
|
23 |
@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700'); |
24 |
@import url('normalize.css'); |
25 |
|
26 |
//Utilities |
27 |
.group:after { |
28 |
content: ""; |
29 |
display: table; |
30 |
clear: both; |
31 |
}
|
यह कोड का एक उचित हिस्सा है, के साथ शुरू! यह वास्तव में हमारे Sass फ़ाइल में उपयोग के लिए कुछ डिफ़ॉल्ट और वेरिएबल्स सेट कर रहा है। यहां का सबसे महत्वपूर्ण हिस्सा यह है कि चार ब्रेक पॉइंट वेरिएबल्स रखता है। ये परिभाषित करते हैं जिस पर हमारे लेआउट को बदलना चाहिए। Sass बहुत काम में आता है क्योंकि हम इन वेरिएबल्स को संदर्भित कर सकते हैं जब हमारे मीडिया प्रश्नों को लिखते हैं और यदि एक ब्रेक पॉइंट को बदलने की जरूरत होती है तो उसे बदलने के लिए केवल एक ही स्थान होता है।
जैसा कि आप @import कथन से देख सकते हैं, हम भी डिजाइन में इस्तेमाल किए जाने वाले Google फ़ॉन्ट और हम पहले डाउनलोड किए गए Normalize.css की कॉपी भी आयात कर रहे हैं। एकमात्र घोषणा अभी तक group क्लास है जो कि एलिमेंट्स के लिए एक clearfix है जो कि शुरुआती एलिमेंट शामिल हैं। इस पर अधिक जानकारी के लिए nicolasgallagher.com देखें।
यदि सब कुछ ठीक से सेट अप किया गया है, तो styles.scss को बचाने के लिए। सादे CSS फ़ाइल उत्पन्न करेगा जो हमने हमारे पेज में शामिल किया है। पृष्ठ देखना अब एक उबाऊ सफेद स्क्रीन दिखाई देगी, इसलिए कुछ और स्टाइल्स में जोड़कर और साइडबार क्षेत्र को बाहर निकालने से हम इसे और अधिक मजेदार बनाते हैं।
साइडबार; माई इन्फो
सबसे पहले हम अपने Sass फ़ाइल को निम्नलिखित जोड़ते हैं:
1 |
//Main styles |
2 |
* { |
3 |
position: relative; |
4 |
-webkit-box-sizing: border-box; |
5 |
-moz-box-sizing: border-box; |
6 |
-ms-box-sizing: border-box; |
7 |
box-sizing: border-box; |
8 |
}
|
9 |
|
10 |
html, body, .wrap { |
11 |
min-height: 100%; |
12 |
}
|
13 |
|
14 |
body { |
15 |
color: $grey; |
16 |
font-size: $font-size; |
17 |
font-family: $font-family; |
18 |
line-height: $line-height; |
19 |
background: $darkblue; |
20 |
}
|
प्रत्येक एलिमेंट को अब relative होना चाहिए और box-sizing गुण border-box पर सेट होना चाहिए, जिससे एलिमेंट्स को उनके पैडिंग के साथ परसेंटेज चौड़ाई होनी चाहिए। इसका मतलब है कि हम 50% चौड़ाई के एक दूसरे के बगल में दो एलिमेंट सेट कर सकते हैं, फिर लेआउट को तोड़ने के बिना जितना हम चाहते हैं, उतना हर एक में पैडिंग को समायोजित करें। बहुत, उपयोगी CSS नियम! लगभग सभी ब्राउज़रों के लिए समर्थन विक्रेता प्रीफिक्स्ड घोषणाओं के माध्यम से आता है।
यहाँ शेष स्टाइल्स हमारे पृष्ठ के लिए डिफ़ॉल्ट के रूप में कार्य करती हैं। हमें यह सुनिश्चित करना है कि मुख्य रैपिंग एलिमेंट हर समय 100% ऊंचाई पर बने रहें क्योंकि हमारे साइडबार को स्क्रीन को लंबवत भरने की जरूरत है। हमने body की बैकग्राउंड को $darkblue पर सेट किया है, जो कि वास्तव में हमारे साइडबार का रंग है यही हमारी साइडबार को 100% ऊँचाई के रूप में दिखाता है। वास्तव में, साइडबार एलिमेंट ही इसकी सामग्री के जितना ऊंचा होगा, लेकिन एक पारदर्शी बैकग्राउंड होगी, इस प्रकार इसके पीछे का रंग दिखाना होगा।
आइए साइडबार को बाहर निकालना शुरू करें...
1 |
<img src="images/cj.jpg" alt="Chris Johnson" class="portfolio-image"> |
2 |
<h1>Chris Johnson</h1> |
3 |
<h2>Experienced UX/UI <br> Designer based in London, UK</h2> |
4 |
<div class="social group"> |
5 |
<a href="#" class="dribbble">Dribbble</a> |
6 |
<a href="#" class="twitter">Twitter</a> |
7 |
<a href="#" class="facebook">Facebook</a> |
8 |
<a href="#" class="googleplus">Google+</a> |
9 |
</div>
|
इस कोड को .my-info div में जोड़ें आपको portfolio-image का नाम बदलना पड़ सकता है, जिस पर आप इसे कहते हैं। यहां पर एक भयानक बहुत कुछ नहीं चल रहा है, लेकिन फ़ाइल को सहेजें और ब्राउज़र में एक नज़र डालें।
बहुत खूब। अब style.scss खोलें और निम्नलिखित कोड डालें:
1 |
.sidebar { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
|
5 |
@media screen and (min-width: $break-three) { |
6 |
float: left; |
7 |
width: 20%; |
8 |
}
|
9 |
|
10 |
|
11 |
.my-info { |
12 |
text-align: center; |
13 |
padding: $padding*3 0; |
14 |
border-bottom: 1px solid $darkgrey; |
15 |
|
16 |
.portfolio-image { |
17 |
border-radius: 50%; |
18 |
}
|
19 |
|
20 |
h1, h2 { |
21 |
font-weight: normal; |
22 |
}
|
23 |
|
24 |
h1 { |
25 |
font-size: 120%; |
26 |
}
|
27 |
|
28 |
h2 { |
29 |
font-size: 100%; |
30 |
}
|
31 |
|
32 |
}
|
33 |
|
34 |
}
|
चूंकि हम यहां मोबाइल-पहली रणनीति का अनुसरण कर रहे हैं, हमें मोबाइल रिजोल्यूशन पर पूर्ण चौड़ाई और पूर्ण-ऊंचाई होने की हमारी साइडबार की आवश्यकता है। हमारी $break-three ब्रेक पॉइंट के लिए एक त्वरित मीडिया क्वेरी ने साइडबार को छोड़ दिया और चौड़ाई को 20% तक सीमित कर दिया।
.my-info के लिए स्टाइल्स काफी सरल हैं I हम बस सब कुछ केंद्र करना चाहते हैं और इसे किनारों के आस-पास कुछ स्थान दे सकते हैं। हमारे जल्द-से-मेनू मेनू अनुभाग को अलग करने के लिए हम नीचे के किनारे पर 1px सीमा का उपयोग करते हैं। portfolio-image परिपत्र बनाने के लिए, इसे 50% border-radius दें और अंत में, हमें इस अनुभाग के किसी भी h1 या h2 एलिमेंट्स के लिए कुछ फ़ॉन्ट स्टाइल्स को ओवरराइड करना होगा।
सोशल मीडिया लिंक
अब हमें उन सोशल मीडिया लिंक्स से निपटने की जरूरत है, जो पहले हमने बनाई थी। कोड के अंतिम ब्लॉक में h2 घोषणाओं के बाद सीधे निम्नलिखित कोड रखें।
1 |
.social { |
2 |
width: 120px; |
3 |
margin: 0 auto; |
4 |
|
5 |
a { |
6 |
float: left; |
7 |
width: 25px; |
8 |
height: 25px; |
9 |
margin: 0 $margin/5; |
10 |
background: url(../images/social-sprite.png) no-repeat; |
11 |
text-indent: -9999px; |
12 |
|
13 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
14 |
background: url(../images/social-sprite@2x.png) no-repeat; |
15 |
background-size: 101px 51px; |
16 |
}
|
17 |
|
18 |
&.dribbble { |
19 |
background-position: 0px 0px; |
20 |
|
21 |
&:hover { |
22 |
background-position: 0px -25px; |
23 |
}
|
24 |
|
25 |
}
|
26 |
|
27 |
&.twitter { |
28 |
background-position: -25px 0px; |
29 |
|
30 |
&:hover { |
31 |
background-position: -25px -25px; |
32 |
}
|
33 |
}
|
34 |
|
35 |
&.facebook { |
36 |
background-position: -50px 0px; |
37 |
|
38 |
&:hover { |
39 |
background-position: -50px -25px; |
40 |
}
|
41 |
}
|
42 |
|
43 |
&.googleplus { |
44 |
background-position: -75px 0px; |
45 |
|
46 |
&:hover { |
47 |
background-position: -75px -25px; |
48 |
}
|
49 |
}
|
50 |
|
51 |
}
|
52 |
}
|
यह काफी जटिल दिखता है लेकिन यह वास्तव में नहीं है। इस कोड का बड़ा हिस्सा इस बात को नियंत्रित कर रहा है कि कैसे माउस और उनके होवर के स्टेट्स दिखाई देते हैं। सबसे पहले हमें <a> एलिमेंट्स में से हर एक को फ्लोट करना होगा, उन्हें चौड़ाई और ऊंचाई देनी चाहिए और उन्हें कुछ स्थान देना होगा। अगली बात हम करते हैं बैकग्राउंड इमेज निर्दिष्ट करें। यह पहले हमने बनाई गई सामाजिक स्प्रीट के लिए निर्धारित किया जाना चाहिए। अंत में, हमें यह सुनिश्चित करना होगा कि प्रत्येक एलिमेंट में प्रयुक्त लेख पृष्ठ पर दिखाई नहीं देता है। text-indent संपत्ति उस अच्छी तरह से देखभाल करती है।
अगले खंड दिलचस्प है। यहां, हम यह निर्दिष्ट कर रहे हैं कि उच्च पिक्सेल घनत्व प्रदर्शित करने के लिए किस बैकग्राउंड का उपयोग करना है। यह विचार सामाजिक स्प्रीट का "doubled up" संस्करण का उपयोग करना है, if डिवाइस का पिक्सेल अनुपात 2 है। background-size की संपत्ति फ़ाइल को वापस मूल आकार में स्केल करने के लिए आवश्यक है, इसलिए हमारे सभी पोजीशनिंग कोड कुछ भी डुप्लिकेट किए just work करता है।
अगले चार खंड सभी समान अवधारणा हैं। हम सिर्फ प्रत्येक आइकन और संबंधित hover स्टेट के लिए बैकग्राउंड की स्थिति निर्धारित कर रहे हैं। ब्राउज़र में एक नज़र डालें:
बहुत बढ़िया! यह वास्तव में अच्छा लग रहा है। यदि सब कुछ ठीक है तो होवर स्टेट्स को सभी काम करना चाहिए और उन्हें सभी को एक iPhone/iPad आदि पर कुरकुरा दिखना चाहिए। अब, साइडबार मेनू से निपटना शुरू करें।
साइडबार मेनू
menus कंटेनर में index.html में निम्नलिखित को दर्ज करके शुरू करें।
1 |
<h3 class="work">Work</h3> |
2 |
<ul>
|
3 |
<li><a href="#" class="current-menu-item">Latest</a></li> |
4 |
<li><a href="#">Web Design</a></li> |
5 |
<li><a href="#">Branding</a></li> |
6 |
<li><a href="#">Photography</a></li> |
7 |
<li><a href="#">Print</a></li> |
8 |
<li><a href="#">Mobile Design</a></li> |
9 |
</ul>
|
10 |
|
11 |
<h3 class="about">About</h3> |
12 |
<ul>
|
13 |
<li><a href="#">Skills</a></li> |
14 |
<li><a href="#">Experience</a></li> |
15 |
<li><a href="#">Education</a></li> |
16 |
<li><a href="#">Clients</a></li> |
17 |
<li><a href="#">Testimonials</a></li> |
18 |
<li><a href="#">Blog</a></li> |
19 |
</ul>
|
20 |
|
21 |
<h3 class="contact">Contact</h3> |
22 |
<ul>
|
23 |
<li><a href="#">Address</a></li> |
24 |
<li><a href="#">Phone</a></li> |
25 |
<li><a href="#">Social Networks</a></li> |
26 |
<li><a href="#">Email</a></li> |
27 |
</ul>
|
मुझे लगता है कि काफी आत्मविवेकपूर्ण है, तो my-info अनुभाग के बाद निम्नलिखित स्टाइल्स को दर्ज करते हुए चलते हैं, लेकिन अभी भी समग्र sidebar एलिमेंट के अंदर।
1 |
.menus { |
2 |
text-align: center; |
3 |
|
4 |
@media screen and (min-width: $break-three) { |
5 |
padding: $padding*2 $padding*3; |
6 |
}
|
7 |
|
8 |
h3 { |
9 |
text-transform: uppercase; |
10 |
font-size: 120%; |
11 |
font-weight: normal; |
12 |
padding-left: $padding*2.5; |
13 |
cursor: pointer; |
14 |
width: 20%; |
15 |
margin: $margin*2 $margin*11 $margin; |
16 |
|
17 |
@media screen and (min-width: $break-one) { |
18 |
margin: $margin*2 auto $margin*2; |
19 |
}
|
20 |
|
21 |
@media screen and (min-width: $break-three) { |
22 |
margin: $margin*2 0 $margin 0; |
23 |
}
|
24 |
|
25 |
&:before { |
26 |
content: ""; |
27 |
position: absolute; |
28 |
top: 0px; |
29 |
left: 0px; |
30 |
height: 18px; |
31 |
display: block; |
32 |
background: url(../images/nav-sprite.png) no-repeat; |
33 |
|
34 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
35 |
background: url(../images/nav-sprite@2x.png) no-repeat; |
36 |
background-size: 49px 18px; |
37 |
}
|
38 |
}
|
39 |
|
40 |
&.work { |
41 |
color: $red; |
42 |
|
43 |
&:before { |
44 |
width: 15px; |
45 |
background-position: 0px 0px; |
46 |
}
|
47 |
}
|
48 |
|
49 |
&.about { |
50 |
color: $green; |
51 |
|
52 |
&:before { |
53 |
width: 17px; |
54 |
background-position: -15px 0px; |
55 |
}
|
56 |
}
|
57 |
|
58 |
&.contact { |
59 |
color: $blue; |
60 |
|
61 |
&:before { |
62 |
width: 17px; |
63 |
background-position: -32px 0px; |
64 |
}
|
65 |
}
|
66 |
}
|
67 |
}
|
यह वास्तव में सोशल आइकॉन के समान है, जहां तक अवधारणा और अवधारणा के कार्यान्वयन। menus आइटम के लिए हम बस सब कुछ केन्द्रित होना चाहते हैं। एक बार जब हम हमारे $break-three ब्रेक प्वाइंट से ऊपर आ जाए तो हमें किनारों से मेनू को दूर रखने के लिए कुछ पैडिंग की आवश्यकता होगी।
h3 एलिमेंट्स में से प्रत्येक में अलग-अलग रंग और अलग-अलग आइकन होने चाहिए। हम इस का एक संयोजन का उपयोग कर रहे हैं :before सूडो एलिमेंट, स्प्रिट्स और मीडिया प्रश्नों को प्राप्त करने के लिए। इसके अलावा हमारे पास बड़ी स्क्रीन आकारों पर h3 एलिमेंट्स के हाशिये को नियंत्रित करने के लिए कुछ मीडिया प्रश्न हैं। ऐसा इसलिए है कि वे हमेशा अपने मेनू के संबंध में सही तरीके से तैनात होते हैं।
मेनू का बोलते हुए, हम एक पल में उनके लिए CSS जोड़ देंगे। सबसे पहले, ब्राउज़र में एक नज़र डालें:
खिताब वास्तव में अच्छा लग रहा हैं! मेनू इतना नहीं है नीले चूक से पहले हमें और दर्द का सामना करने से पहले इसका ध्यान रखना चाहिए...
मेनू लिस्ट्स
1 |
ul { |
2 |
list-style: none; |
3 |
padding: 0; |
4 |
display: none; |
5 |
margin: 0 $margin*13.5 $margin; |
6 |
text-align: left; |
7 |
|
8 |
@media screen and (min-width: $break-three) { |
9 |
margin: 0 0 0 $margin*2.5; |
10 |
display: block; |
11 |
width: auto; |
12 |
}
|
13 |
|
14 |
&.open { |
15 |
display: inline-block; |
16 |
margin: 0 auto $margin $margin*6; |
17 |
|
18 |
@media screen and (min-width: $break-three) { |
19 |
margin: 0 0 0 $margin*2.5; |
20 |
display: block; |
21 |
width: auto; |
22 |
}
|
23 |
}
|
24 |
|
25 |
li { |
26 |
a { |
27 |
color: $darkgrey; |
28 |
text-decoration: none; |
29 |
-webkit-transition: color 0.4s ease; |
30 |
-moz-transition: color 0.4s ease; |
31 |
-o-transition: color 0.4s ease; |
32 |
-ms-transition: color 0.4s ease; |
33 |
transition: color 0.4s ease; |
34 |
|
35 |
&:hover, &.current-menu-item { |
36 |
color: $white; |
37 |
-webkit-transition: color 0.4s ease; |
38 |
-moz-transition: color 0.4s ease; |
39 |
-o-transition: color 0.4s ease; |
40 |
-ms-transition: color 0.4s ease; |
41 |
transition: color 0.4s ease; |
42 |
}
|
43 |
}
|
44 |
}
|
45 |
}
|
मोबाइल रिज़ॉल्यूशन में हम चाहते हैं कि हमारे मेनू छिपाए जाएं, जिससे उपयोगकर्ता उन्हें छिपाने या दिखाने का विकल्प चुन सकें, जब उन्हें उन तक पहुंच चाहिए। एक बार जब हम हमारे $break-three पॉइंट को मारते हैं, तो मेनू हर समय दृश्यमान होना चाहिए।
.open क्लास संभालता है कि मेनू खोलने पर वे कैसे प्रदर्शित होते हैं। डिजाइन में उन्हें काफी ठीक रखा गया है, इसलिए हम मार्जिन का उपयोग करते हुए यहां भी करते हैं। फिर, $break-three पॉइंट खेल में आता है और उन प्रस्तावों और इसके बाद के संस्करण के लिए मार्जिन ओवरराइड करता है। li एलिमेंट्स के लिए स्टाइल्स बहुत सरल हैं। नोट करने के लिए मुख्य बात यह है कि CSS3 के Transitions का उपयोग। मैंने उनको एलिमेंट्स पर होवेरिंग करते हुए अच्छा फीका दिखने के लिए यहां का उपयोग किया है। मैं आपको संक्रमण के साथ चारों ओर खेलने के लिए प्रोत्साहित करता हूं यह देखने के लिए कि आप कौन से दिलचस्प प्रभाव प्राप्त कर सकते हैं!
आइए फाइल को सहेजते हैं और परिणाम ब्राउज़र में देखें।
बहुत अच्छा! मेनू ठीक उसी तरह व्यवहार कर रहे हैं जितना चाहिए। अब हम मेनू के उद्घाटन और समापन को नियंत्रित करने के लिए JavaScript/jQuery के पहले बिट को पूरा करने जा रहे हैं।
app.js खोलें और निम्न फ़ंक्शन दर्ज करें:
1 |
$(function() { |
2 |
|
3 |
$('.menus h3').on('click', function(e) { |
4 |
$(this).next('ul').toggleClass('open'); |
5 |
e.preventDefault(); return false; |
6 |
});
|
7 |
|
8 |
});
|
हम इस फाइल को jQuery document ready function के साथ शुरू कर रहे हैं, जो मूलतः डाक्यूमेंट्स को किसी भी कोड को चलाने से पहले पूरी तरह तैयार करने की प्रतीक्षा करता है। on api.jquery.com तैयार घटना पर अधिक पढ़ें।
फिर हम अपने menus एलीमेंट के अंदर किसी भी h3 को एक क्लिक ईवेंट संलग्न कर रहे हैं। जब यह ईवेंट होता है (जब उपयोगकर्ता h3 पर क्लिक करता है) हम "next" ul एलिमेंट को खोजने के लिए jQuery का उपयोग करते हैं और इसके open क्लास को टॉगल करते हैं। इसलिए यदि एलिमेंट में क्लास पहले से है, तो इसे हटा दिया जाएगा, और इसके विपरीत यदि यह नहीं है। एलिमेंट के लिए किसी भी डिफ़ॉल्ट कार्रवाई को रोकने के लिए अंतिम पंक्ति है। यह शायद यहां लागू नहीं होता है क्योंकि h3 एलिमेंट्स की कोई डिफ़ॉल्ट कार्यवाही नहीं है, जबकि एक एंकर टैग, उदाहरण के लिए, करता है। फिर भी, क्लिक ईवेंट हैंडलर का उपयोग करते समय इसे शामिल करने की आदत में शामिल होना अच्छा अभ्यास है।
इस फाइल को सहेजें और ब्राउज़र पर वापस जाएं। जब मोबाइल प्रस्तावों पर, यदि आप मेनू शीर्षकों पर क्लिक करते हैं, तो आपको मेनू नीचे दिखाई देना चाहिए। यदि ऐसा नहीं होता है, तो किसी भी त्रुटि के लिए JavaScript चेक करें, या अपने ब्राउज़र को रीफ्रेश करें और फिर से प्रयास करें।
यह साइडबार क्षेत्र को व्रैप करता है! चलिए आगे बढ़ें और पृष्ठ पर कुछ सामग्री प्राप्त करें।
मुख्य सामग्री
पहला कदम यहां पृष्ठ को HTML जोड़ना है जो हमें चाहिए।
1 |
<article class="portfolio-item group first"> |
2 |
<header class="portfolio-info"> |
3 |
<div class="date">7 Nov 2013</div> |
4 |
<div class="description"> |
5 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
6 |
</div>
|
7 |
<div class="meta"> |
8 |
<p><strong>Client:</strong> Despreneur</p> |
9 |
<p><strong>Tags:</strong> Web Design</p> |
10 |
</div>
|
11 |
</header>
|
12 |
<figure class="portfolio-image"> |
13 |
<img src="images/portfolio/free-psd-templates.jpg" alt="Free PSD Templates"> |
14 |
</figure>
|
15 |
</article>
|
16 |
<article class="portfolio-item group"> |
17 |
<header class="portfolio-info"> |
18 |
<div class="date">7 Nov 2013</div> |
19 |
<div class="description"> |
20 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
21 |
</div>
|
22 |
<div class="meta"> |
23 |
<p><strong>Client:</strong> Despreneur</p> |
24 |
<p><strong>Tags:</strong> Web Design</p> |
25 |
</div>
|
26 |
</header>
|
27 |
<figure class="portfolio-image"> |
28 |
<img src="images/portfolio/moody-shot.jpg" alt="Moody Shot"> |
29 |
</figure>
|
30 |
</article>
|
31 |
<article class="portfolio-item group"> |
32 |
<header class="portfolio-info"> |
33 |
<div class="date">7 Nov 2013</div> |
34 |
<div class="description"> |
35 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
36 |
</div>
|
37 |
<div class="meta"> |
38 |
<p><strong>Client:</strong> Despreneur</p> |
39 |
<p><strong>Tags:</strong> Web Design</p> |
40 |
</div>
|
41 |
</header>
|
42 |
<figure class="portfolio-image"> |
43 |
<img src="images/portfolio/new-york.jpg" alt="New York"> |
44 |
</figure>
|
45 |
</article>
|
46 |
<article class="portfolio-item group loading-wrap"> |
47 |
<header class="portfolio-info"> |
48 |
</header>
|
49 |
<figure class="portfolio-image"> |
50 |
<div class="loading"> |
51 |
<img src="images/loading.png" alt="Loading" class="rotate"> Loading... |
52 |
</div>
|
53 |
</figure>
|
54 |
</article>
|
इस कोड को .content div में रखें। हमारे पास तीन लेख हैं जो डिज़ाइन में सुविधा रखते हैं और "Loading" लेख भी। मैंने लोडिंग आइकन को अपने portfolio-item के अंदर रखा है इसलिए हम पृष्ठ की संरचना को रख सकते हैं। मैं तो बस portfolio-image एलिमेंट के अंदर लोडिंग आइकन को स्थान दे सकता हूं। आप यहां देखेंगे कि पहले portfolio-item में first का एक क्लास है। हमारे CSS में यह महत्वपूर्ण होगा कि हम ब्राउजर में एक और त्वरित देखने के बाद देखेंगे:
अच्छा है, लेकिन हम जो चाहते हैं वह काफी नहीं है, तो हम सीधे स्टाइल्स में बैठें।
1 |
.content { |
2 |
width: 100%; |
3 |
min-height: 100%; |
4 |
background: $white; |
5 |
|
6 |
@media screen and (min-width: $break-three) { |
7 |
float: left; |
8 |
width: 80%; |
9 |
}
|
10 |
|
11 |
.portfolio-item { |
12 |
background: $grey; |
13 |
|
14 |
&:before { |
15 |
content: ""; |
16 |
position: absolute; |
17 |
width: 3px; |
18 |
background: darken($grey, 5%); |
19 |
top: 0px; |
20 |
left: 17px; |
21 |
bottom: 0px; |
22 |
}
|
23 |
|
24 |
&.first { |
25 |
&:before { |
26 |
top: 30px; |
27 |
}
|
28 |
}
|
29 |
|
30 |
.portfolio-info { |
31 |
min-height: 100%; |
32 |
color: $darkgrey; |
33 |
padding: $padding*2 $padding*2 $padding*2 $padding*4; |
34 |
-webkit-box-sizing: border-box; |
35 |
-moz-box-sizing: border-box; |
36 |
-ms-box-sizing: border-box; |
37 |
box-sizing: border-box; |
38 |
|
39 |
@media screen and (min-width: $break-three) { |
40 |
float: left; |
41 |
width: 30%; |
42 |
}
|
43 |
|
44 |
.date { |
45 |
font-size: 110%; |
46 |
color: $black; |
47 |
margin-bottom: $margin; |
48 |
|
49 |
&:before { |
50 |
content: ""; |
51 |
position: absolute; |
52 |
width: 11px; |
53 |
height: 11px; |
54 |
border-radius: 50%; |
55 |
border: 2px solid $grey; |
56 |
background: $red; |
57 |
left: -29px; |
58 |
top: 3px; |
59 |
}
|
60 |
}
|
61 |
|
62 |
.meta { |
63 |
color: $black; |
64 |
margin-top: $margin; |
65 |
|
66 |
p { |
67 |
margin: 0; |
68 |
}
|
69 |
}
|
70 |
|
71 |
}
|
72 |
|
73 |
}
|
74 |
|
75 |
}
|
वहाँ कोड का एक बड़ा हिस्सा! चलो इसे नीचे टुकड़े टुकड़े करे। .content स्टाइल मोबाइल रेजोल्यूशंस में साइडबार स्टाइल्स के समान होती है, हमें इसकी पूरी चौड़ाई की आवश्यकता होती है, लेकिन हमारी $break-three पॉइंट के ऊपर या उससे ऊपर के कुछ भी हम इसे फ्लोट कर सकते हैं और चौड़ाई को 80% तक खींच सकते हैं। हमें साइडबार से content div को एक सफेद बैकग्राउंड को खंड में छोड़ देना होगा।
portfolio-item एलिमेंट्स की एक ग्रे बैकग्राउंड होनी चाहिए। सामग्री क्षेत्र के बायीं किनारे पर चलने वाली टाइमलाइन को बनाने के लिए, हम प्रत्येक portfolio-item को देने जा रहे हैं :before एलिमेंट। यहां हम पूरी तरह से बाएं किनारे से 17px की स्थिति रखते हैं और इसे ऊपर / नीचे चाल का उपयोग करने के लिए इसे 100% ऊँचाई बनाने के लिए मजबूर करते हैं। इस में top और bottom की संपत्ति दोनों को 0 पर सेट करना शामिल है, जो प्रभाव में है एलिमेंट दोनों स्थानों पर बता रहा है, जिसके परिणामस्वरूप एक पूर्ण-ऊँचाई एलिमेंट होता है। यह एक पूर्ण-चौड़ाई एलिमेंट बनाने के लिए बाएं और दाएं प्रॉपर्टी के लिए काम करता है। हमें अपने पहले portfolio-item को खिड़की के शीर्ष किनारे से दूर रखना चाहिए जो कि हम शीर्ष संपत्ति को 30px तक सेट करके प्राप्त करते हैं।
portfolio-info वाले लेखों को 100% चौड़ा होना चाहिए, जब तक कि हम $break-three या इससे अधिक नहीं हो। डिजाइन पर दिखने वाले छोटे लाल वृत्त को बनाने के लिए मैंने date के एलिमेंट्स का उपयोग करने का निर्णय लिया, जैसा कि दो लग रहे हैं। CSS में इसे प्राप्त करने का सर्वोत्तम तरीका है :before सूडो एलिमेंट।पहले इसे एक मंडल बनाने के लिए इसमें कुछ ऊँचाई और चौड़ाई और border-radius 50% है। हम फिर तिथि की बाईं ओर पूरी तरह से इसे बंद कर देते हैं। इसके चारों ओर छोटे अंतर प्राप्त करने के लिए, बस portfolio-item एलिमेंट्स के समान सीमा को लागू करें।
meta जानकारी बहुत सरल है। बस टेक्स्ट को काले रंग में सेट करें और इसे एक शीर्ष मार्जिन दें। किसी भी <p> टैग के अंदर कोई मार्जिन नहीं होना चाहिए। फ़ाइल को सहेजें और देखें कि इस अपेक्षाकृत कम सेक्शन कोड को क्या हासिल किया गया है।
यह अब बहुत करीब है! हमारी content स्टाइल्स के साथ चलें...
1 |
.portfolio-image { |
2 |
padding: $padding*2; |
3 |
background: $white; |
4 |
border-left: 1px solid darken($grey, 10%); |
5 |
text-align: center; |
6 |
|
7 |
@media screen and (min-width: $break-three) { |
8 |
float: left; |
9 |
width: 70%; |
10 |
}
|
11 |
|
12 |
img { |
13 |
width: 100%; |
14 |
max-width: 610px; |
15 |
height: auto; |
16 |
}
|
17 |
|
18 |
div.loading { |
19 |
img { |
20 |
width: auto; |
21 |
height: auto; |
22 |
}
|
23 |
}
|
24 |
}
|
portfolio-info स्टाइल्स के बाद इसे सीधे रखें। कोड के इस छोटे से ब्लॉक पोर्टफोलियो आइटम के अंदर इमेजेज को रेस्पॉन्सिव बना देगा। यह विचार है कि इमेजेज को जितनी छोटी जरूरत है, उतनी ही कम करनी चाहिए, लेकिन केवल वास्तविक चौड़ाई तक ही बढ़े। इसका मतलब है कि आपके पास निश्चित-चौड़ाई वाली इमेजेज होनी चाहिए, लेकिन यह इस तरह एक लेआउट/टेम्प्लेट में काफी व्यवहार्य है, क्योंकि इमेजेज को संभवतः गतिशील रूप से तैयार किया जाएगा और एक निश्चित आकार में क्रॉप किया जाएगा।
हम एक और डिज़ाइन विवरण जोड़ने के लिए portfolio-image एलिमेंट्स का भी उपयोग कर रहे हैं, यह इमेजेज और जानकारी के बीच की पतली सीमा के रूप में। यदि आप अब ब्राउज़र में एक और नज़र रखते हैं, तो आपको इमेजेज को अच्छी तरह से ब्राउजर के साथ स्केलिंग करना चाहिए और आम तौर पर बढ़िया लग रहा है!
अगला
यह एक कॉफी ब्रेक का समय है! निम्नलिखित, और अंतिम में, इस श्रृंखला का हिस्सा, हम लेआउट में कुछ चमक जोड़ देंगे। हम अपने सामग्री क्षेत्र के निचले भाग में लोडिंग आइकन का निर्माण करेंगे, इसे CSS3 के साथ एनिमेट कर देंगे, फिर अनन्त स्क्रॉलिंग की नकल करेंगे क्योंकि अधिक पोर्टफोलियो आइटम लोड किए जाते हैं।
