Monday, 4 December 2017

Bootstrap क्या है? क्या इसे सीखना जरूरी है?


Bootstrap in Hindi:अगर आप web design में interested हैं तो आपने Bootstrap का नाम जरूर सुना होगा| किसी भी web designer के लिए यह एक बहुत ही important tool है जिसका उपयोग करके बहुत ही आसान तरीके से और तेज गति से वेबसाइट को डिजाईन किया जा सकता है|

आज आप इस article में जानेंगे की Bootstrap क्या है और आपको वेबसाइट बनाने के लिए इसका use क्यों करना चाहिए आखिर इसके क्या फायदे हैं|

Bootstrap क्या है?

Bootstrap एक प्रकार का framework है जिसे HTML, CSS और Javascript से बनाया गया है जिसका उपयोग responsive और mobile friendly website बनाने के लिए किया जाता है|

Bootstrap को Twitter कंपनी के employee Mark Otto और Jacob Thornton ने अपनी एक टीम के साथ मिलकर बनाया था |

शुरुआत में उन्होंने इसे Twitter Blueprint नाम दिया था क्योंकि वे इसे Twitter के लिए एक internal tool की तरह उपयोग करना चाहते थे लेकिन बाद में उन्होंने इसे 19 अगस्त 2011 में एक open source project के रूप में GitHub पर Bootstrap के नाम से release कर दिया ताकि दुसरे लोग भी इसका use कर इसका फायदा ले सकें|

देखते ही देखते यह बहुत ज्यादा popular हो गया और आज पूरी दुनिया के developers responsive website design करने के लिए इसका उपयोग करते हैं|

वैसे तो इस प्रकार के कई सारे frameworks हैं लेकिन Bootstrap उनमे से सबसे ज्यादा popular और सबसे ज्यादा उपयोग होने वाला framework है|

Bootstrap काम कैसे करता है?

जब कोई वेब डिज़ाइनर Bootstrap से वेबसाइट डिजाईन करता है तब उसे बहुत ज्यादा coding करने की जरूरत नही पड़ती क्योंकि बूटस्ट्रैप में पहले से ही कई सारे codes दिए गये होते हैं जिन्हें HTML page पर सिर्फ reuse किया जाता है| 

Bootstrap में CSS के कई सारे predefined classes होते हैं जिन्हें आसानी से अपने पेज पर call करके use किया जा सकता है|

Bootstrap एक grid system पर काम करता है जो की पूरे पेज को बराबर columns और rows में divide करता है| सभी rows और columns के लिए अलग-अलग CSS classes बनाये गये हैं जिन्हें जरूरत के अनुसार अपने web page पर उपयोग किया जा सकता है|

Bootstrap से website design करने के क्या फायदे हैं?


  • समय की बचत: Bootstrap का यह सबसे बड़ा advantage है की इसका use करने से development speed बढ़ जाती है और बहुत ही कम समय में काम हो जाता है इसके विपरीत यदि आप खुद से बिना बूटस्ट्रैप के responsive design बनाना चाहते हैं तो आपको इसमें काफी समय लग सकते हैं|
  • Use करना आसान है: यदि आपको HTML और CSS की basic knowledge है तो आप बड़ी आसानी से बूटस्ट्रैप का उपयोग कर सकते हैं|
  • Responsive Design: बूटस्ट्रैप के माध्यम से आप बड़ी आसानी से responsive design बना सकते हैं| यदि आपकी वेबसाइट responsive है तो वह किसी भी platform या device जैसे desktop, laptop, mobile आदि में screen size के हिसाब से अपने आपको adjust कर लेती है|
  • Cross Browser Compatible: Bootstrap को इस तरह बनाया गया है की यह हमारा वेबपेज लगभग सभी modern browsers जैसे Firefox, Chrome, Internet Explorer, Opera आदि में एक समान दिखाई देगा|
  • Open Source: इसकी सबसे बढिया बात यह है की आप इसे free में उपयोग कर सकते हैं |

आज आपने इस article Bootstrap क्या है? क्या इसे सीखना जरूरी है? में  Bootstrap की basic जानकारी हासिल की लेकिन इसके बाद हम आपको Bootstrap से responsive website बनाने की जानकारी भी देंगे तो यदि आप interested हैं तो नीचे जाकर इस वेबसाइट के newsletter को subscribe कर सकते हैं जिससे अगला article सीधे आपके e-mail पर पहुँच जाएगा|

Tuesday, 28 November 2017

Learn Basics of Photoshop in Hindi

learn Photoshop in hindi - basics

Photoshop in Hindi: Photoshop एक ऐसा software है जिसकी जरूरत हर creative professionals को पड़ती है, आप कोई graphic designer हों, photographer हों, या web designing सीख रहे हों आपको Photoshop में काम करना जरूर आना चाहिए|

अगर आपको Photoshop चलाना नही आता तो आपको जल्दी से इसे सीख लेना चाहिए क्योंकि इसे सीखने के बाद graphics designing का लगभग हर काम आसान हो जाता है|

आज इस article में आप Photoshop की basic जानकारी हिंदी में हासिल करेंगे, इसके बाद आपको आगे और भी advanced tutorials हिंदी में मिल जायेंगे इसलिए आप इस वेबसाइट को subscribe कर लें या हमारा Facebook page like कर लें जिससे आपको नए पोस्ट की notification तुरंत मिल जाए|

Photoshop Introduction In Hindi

भले ही आपने कभी image editing का काम न किया हो, आपने Photoshop का नाम जरूर सुना होगा |

Photoshop Adobe company का एक product है जो बहुत ही powerful design software है जिसमे लगभग सभी प्रकार के image editing का काम किया जा सकता है|

Print media से लेकर movies, video games, website designing, logo designing हर जगह फोटोशॉप का उपयोग होता है ऐसे में इसे सीखना आपके लिए फायदेमंद होगा|

Adobe Photoshop Basics For Beginners in Hindi

अगर आप पहली बार फोटोशॉप open कर रहे हैं तो आपको इसके interface में काफी confusion हो सकता है, लेकिन यह इतना भी कठिन नही है, आज आप इस Photoshop tutorial को पढ़ कर इसकी basic tools और interface के बारे में जान पाएंगे|

Photoshop नही है? कहाँ से download करें?

अगर आपके system में फोटोशॉप installed नहीं है तो आप इसकी official site पर जाकर इसे download कर सकते हैं जो की 30 दिनों के लिए free trial होगा|

इस tutorial में हमने Photoshop CS4 version का use किया है, यदि आपके पास कोई दूसरा version है तो परेशान होने की जरूरत नही हैं क्योंकि लगभग सभी versions में ये सारे tools common होते हैं|

Photoshop Interface

सबसे पहले हम इसके इंटरफ़ेस में उपलब्ध अलग-अलग टूल्स और options के बारे में जानेंगे| फोटोशॉप के interface का screenshot आप नीचे देख सकते हैं|
PS-interface-webinhindi

Photoshop का interface आसानी से समझ आ जाये इसके लिए हमने इसे 6 भागों में divide कर दिया है:
  1. Application Bar
  2. Menu Bar
  3. Tool Bar
  4. Option Bar
  5. Palettes
  6. Document Window
चलिए अब इनको विस्तार से समझते है:

Application Bar
Application bar से हम Photoshop को maximize, minimize, close कर सकते हैं इसके अलावा Bridge को access कर सकते है, Photoshop के layout और workspace को customize कर सकते हैं|

Windows में application bar menu bar के right side में होता है|
ps- application bar
आप ऊपर application bar का screenshot देख सकते हैं, अब हम उसमे उपलब्ध options के बारे में जानेंगे:
  • Launch Bridge: Bridge Adobe का ही एक application है, जो की एक प्रकार का file manager है जिसमे आप अपने system में उपलब्ध किसी भी files की पूरी details देख सकते हैं, इसे आप सीधे Photoshop के application bar से भी open कर सकते हैं|
  • View Extras:  अपने document में grids, guides या rulers का उपयोग करना चाहते हैं तो आप view extras में जाकर इस enable कर सकते हैं| design बनाते समय इनका उपयोग किया जाता है जिससे डिजाईन objects की size measurement में आसानी होती है|
  • Zoom Level: Document को zoom करने के लिए हम zoom level का percentage सेट कर सकते हैं |
  • Hand Tool: Click करके Photoshop canvas को drag करने के लिए इसका उपयोग होता है, यदि canvas पहले से ही screen पर fit हो तो यह tool काम नही करेगा,  document को zoom करने के बाद hand tool का उपयोग कर सकते हैं|
  • Zoom Tool: Open किये गये image के किसी भी हिस्से को zoom करने के लिए इसका use कर सकते हैं|
  • Rotate View Tool: Document को किसी भी angle पर rotate कर सकते हैं, इसके लिए rotate view tool का use कर सकते हैं|
  • Arrange Documents: अगर हम multiple documents open करते हैं तो हमारे पास options होते हैं की उन डाक्यूमेंट्स को अपने screen पर कैसे दिखाएँ, चाहें तो हम एक window पर सिर्फ एक या जितने चाहें अपने अनुसार multiple documents को side-by-side open कर सकते हैं  और उन पर काम कर सकते हैं|
  • Screen Mode: तीन प्रकार के screen modes दिए गये हैं जिसमे से standard screen mode by default mode होता है इसके अलावा “Full screen Mode With Menu Bar” या  “Full Screen Mode” का option भी होता है| हम इसे shortcut (F) button से भी access कर सकते हैं|
  • Workspace options: Photoshop में कई प्रकार के tools और palettes/panels होते हैं लेकिन जरूरी नही की हम सभी का उपयोग करें ऐसे में हम खुद का एक workspace set करते हैं जिसमें हम हमेशा use होने वाले palettes को सामने रखते हैं और बाकी को hide कर देते हैं  ताकि हम अपना काम आसानी से और जल्दी से कर सकें|  Photoshop पहले से कुछ workspace के presets होते हैं जिसमे से हम अपने जरूरत के अनुसार workspace choose कर सकते हैं या हम चाहें तो खुद का नया workspace बनाकर save कर सकते हैं|

Menu Bar
Menu bar से आप file create कर सकते हैं, save कर सकते हैं और जितने भी tools Photoshop में हैं सभी को menu bar से access किया जा सकता है|

Photoshop -menu bar

चलिए अब menu bar के कुछ basic options के बारे में जानेंगे जिसके बारे में आपको जानना जरूरी है:
  • File > New: नया file बनाने के लिये इसका shortcut Ctrl+N है 
  • File > Open: पहले से उपलब्ध files को open करने के लिए (Ctrl+O) 
  • File > Save: File को save करने के लिए (Ctrl+S)
  • File > Save as:  फाइल को किसी दुसरे नाम से और अलग format में save करने के लिए उपयोग होता है (Ctrl+Shift+S)
  • File > Save for Web & Devices: image को.png, .jpeg, या .gif format में सेव करने के लिए use किया जाता है (Ctrl|+Alt+Shift+S)
  • Image > Image Size: image की साइज़ को बदलने के लिए use होता है (Ctrl+Alt+I)
  • Window: इस option से हम फोटोशॉप में available palettes और tool box को hide या show कर सकते हैं
Tool Bar
Tool bar या  toolbox में कई सारे set of tools होते हैं जिनका उपयोग image editing, graphics designing आदि में किया जाता है|

कुछ tools group में भी होते हैं जिसमे से सिर्फ एक दिखाई देता है और बाकी hidden होते हैं जिसे देखने के लिए उस tool के ऊपर double click करके hold करना होता है, इस group के पहचान के लिए इसके ऊपर lower right corner में एक छोटा सा triangle बना होता |
PS-Tool bar

Photoshop tools को 6 मुख्य भागों में बाँटा गया है:
  1. Selection tools
  2. Crop and slice tools
  3. Retouching tools
  4. Painting and drawing tools
  5. Type, pen and path tools
  6. Navigation tools
Selection tools
PS-selection tools-webinhindi.com
इसके अंदर 4 tools होते हैं:
  • Move tool (v): Image के किसी selected part को एक स्थान से दुसरे स्थान move करने के लिए  इसका उपयोग होता है
  • Marquee tools (m): किसी object को rectangle, square, और ellipse आकार  में select करने के लिए
  • Lasso tools (l):  Freehand selection के लिए इसका उपयोग होता है, polygonal lasso से  polygonal selection बनाया जा सकता है  इसके अलावा magnetic lasso tool है जो की मेरा पसंदीदा  टूल है यह automatically edges को detect कर selection create करता है|
  • Wand tools (w): Single click से similar color के area को select किया जा सकता है|
Crop and slice tools 
PS- Crop Slice tools-webinhindi.com

Crop tool के बारे में आपको जरूर पता होगा आपने कभी न कभी इसका use किया ही होगा, इससे large image से काम आने वाले part को select करने के लिए किया जाता है |

Slice tools का उपयोग ज्यादातर web page design करते समय किया जाता है, यह एक बेहतरीन टूल है इससे पूरे डिजाईन को अलग-अलग भाग में divide किया जा सकता है|

मान के चलिए हम कोई वेब पेज डिजाईन कर रहे हैं तो slice tool की मदद से हम header, footer, navigation, buttons और सारे parts अलग-अलग कर save कर सकते हैं|

Retouching tools
PS- retouching tools-webinhindi.com

Image retouching के लिए Photoshop में कई सारे टूल्स हैं जैसे:
  • Healing Brush Tools: अगर आपको image से scratches, या कुछ object को remove करने की जरूरत है तो आप इसका उपयोग कर सकते हैं, जैसे हमें face के दाग धब्बे हटाने हैं तो इस काम के लिए यह best tool है|
  • Patch Tool: यह भी healing brush की तरह है, इसमें एक spot को select कर दूसरी जगह चिपका दिया जाता है|
  • Red Eye Tool: कभी-कभी कैमरे से ली गयी picture में आँखें लाल दिखाई देती है, इस टूल के नाम से पता चल रहा है की यह red eye को remove करने के लिए उपयोग होता है|
  • Clone Stamp Tool: हम alt press कर एक area choose करते हैं फिर दुसरे area में paint करना शुरू करते हैं इससे जो area हमने पहले चुना था वह copy होने लगता है|
  • History Brush Tools: जब आप किसी design पर काम कर रहे होते हैं तो एक-एक steps Photoshop history में record होते जाते हैं, History Brush से हम पहले perform किये steps को कुछ अलग effects के साथ design के ऊपर paint कर सकते हैं|
Painting and drawing tools
PS- Drawing tools-webinhindi.com

यदि आप पेंटिंग या ड्राइंग करना चाहते हैं तो इसके लिए भी फोटोशॉप में कई सारे टूल्स हैं जैसे:
  • Brush 
  • Pencil
  • Eraser 
  • Paint Bucket 
  • Gradient
इन टूल्स का उपयोग करना बहुत ही आसान है| आगे के articles में हम आपको इसके बारे में विस्तार से बताएँगे|

Type, pen and path tools
Type-pen-Path Tools -webinhindi.com
 अगर आपको अपने document पर text लिखना है तो इसके लिए आप type tool का उपयोग कर सकते हैं| Pen tool और path tools से आप custom shapes, आकृतियाँ और vector image design कर सकते हैं|

Option Bar
यह menu bar के ठीक नीचे होता है| जब भी हम tool bar से किसी एक टूल को select करते हैं तो option bar में उससे related options show होते हैं जिससे हम उस टूल को और भी customize कर सकते हैं|

PS-option-bar-webinhindi
ऊपर जो screenshot दिया गया है उसमे move tool के options दिखाई दे रहे हैं क्योंकि हमने टूल बार से मूव टूल को सेलेक्ट किया हुआ है|

Palettes
कुछ छोटे-छोटे windows जिसे आप screen के right side में देख सकते हैं, Palettes कहलाते हैं| यहाँ से color swatches, layers, history, actions, paragraph आदि चीजों को आसानी से manage किया जा सकता है|

फोटोशॉप में कई सारे palettes होते हैं जिन्हें हम menu bar के window option में जा कर enable या disable कर सकते हैं|

इनमें से कुछ जरूरी palettes इस प्रकार हैं:
  • Layer - बाकी palettes की तुलना में layer palettes सबसे ज्यादा उपयोगी होता है जिसमे आप अपने document के सभी layers को देख सकते हैं, उनके order को बदल सकते हैं, visibility, opacity, blending modes आदि को manage कर सकते हैं| 
  • Color Swatches - अगर आपको अपने डॉक्यूमेंट पर कलर का उपयोग करना है तो आप color swatches से color pick कर सकते हैं|
  • Character - इस palette से आप text के लिए font, size, color, bold, italic, underline आदि को सेट कर सकते हैं|
  • History - Photoshop में अपने task को undo का पीछे जाने के लिए history palette का उपयोग किया जाता है जिससे by default 50 actions तक undo किया जा सकता है|
  • Action - अगर आप कोई task बार-बार perform करते हैं तो आप उसे record कर सकते हैं और जब भी वह काम करना हो तो उसे play कर सकते हैं जिससे वह task automatic perform हो जाएगा|

इस article में हमने Photoshop की सिर्फ बेसिक जानकारी दी है लेकिन आगे आपको जल्द ही Photoshop के और भी tutorials इसी वेबसाइट पर मिलेंगे| 

सिर्फ 20 मिनट में सीखें HTML हिंदी में आपको यह आर्टिकल Learn Basics of Photoshop in Hindi कैसा लगा कमेंट के जरिये जरूर बताएं|

Saturday, 18 November 2017

CSS से खूबसूरत Image Gallery Design कैसे करें?

CSS image gallery tutorial

जैसा की आप सभी को पता है की CSS3 के अलग-अलग properties का use कर बहुत ही amazing चीजें बनायीं जा सकती हैं, आज हम ऐसा ही कुछ बनाने जा रहे हैं जो की दिखने में जितना आकर्षक है बनाने में भी उतना ही मजेदार है|

आज हम CSS से एक खूबसूरत photo gallery design करने वाले हैं और इसको बनाने के लिए हमने किसी की Javascript या jQuery का use नही किया है इसे केवल CSS3 से बनाया गया है इसलिए इसे design करना बहुत ही आसान है|

यह काम कैसे करेगा?

हम कई सारे images को मिलाकर एक simple photo collage create करेंगे, सभी images को अलग-अलग position और directions में दिखाई देंगे इसके लिए CSS properties का उपयोग करेंगे|

फोटो एक दुसरे के ऊपर हो सकते हैं और जब हम किसी एक इमेज पर mouse hover करेंगे तब वह इमेज बाकी सभी photos से ऊपर transition effects के साथ display होगा|

HTML और CSS से Image Gallery कैसे Design करें?

एक beautiful photo gallery design करने के लिए आपको HTML और CSS की जानकारी होनी चाहिए| CSS से image gallery बनाने के लिए आप नीचे दिए गये step by step tutorial को follow करते जाएँ|

Step 1: HTML Structure बनाएं सबसे पहले हम एक div बनायेंगे और उसमे सारे images को add कर देंगे :
<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>
यह आपके browser में कुछ इस तरह दिखाई देगा:

Image gallery html structure

Step 2: Photos की Position सेट करें अब सभी images की position को set करेंगे जिसके लिए CSS की position property की value हमें absolute रखनी होगी जैसा की आप नीचे देख सकते हैं:
 .gallery img {
    position: absolute;
}

ऐसा करने से images अपने default flow से हट कर एक दुसरे के ऊपर display होने लगेंगे जो की कुछ इस प्रकार दिखाई देंगे :

set image position to absolute

इसके बाद हम pseudo-class nth-of-type का उपयोग कर images को align करना शुरू करेंगे| यहाँ पर left और top property का use कर प्रत्येक photo को browser window से अलग-अलग distance पर display करेंगे|
.gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
}
.gallery img:nth-of-type(2) {
   left: 150px;
    top: 50px;
}
 .gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
}
इस step के बाद आपका design कुछ ऐसा दिखेगा:

align images

Step 3: Images को Rotate करें इस step में हम CSS3 की transform property का उपयोग कर सभी photos को अलग-अलग angle पर rotate करेंगे इसका CSS code नीचे दिया गया है:
 .gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
    transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
    left: 150px;
    top: 50px;
    transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
    transform: rotate(10deg);
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
    transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
    transform: rotate(12deg);
}
अब आपकी फोटो गैलरी इस प्रकार दिखाई देगी:
Rotate-image


Step 4: Photos पर Border add करें Image पर border डालने से पहले हम उसमे कुछ padding डालेंगे जिसके लिए padding property का उपयोग करेंगे|
.gallery img {
    position: absolute;
    padding:10px;
    background:#fff;
    border:1px solid #000
}
images पर border और padding add करने के बाद यह कुछ ऐसे दिखाई देगा:
image-border-using-css
 Step 5: Image पर Hover Effect add करना इस image gallery tutorial का यह सबसे interesting part है इसमें हम images पर attractive hover effect apply करेंगे|   जब photo के ऊपर mouse hover किया जायेगा तब वह इमेज pop out हो कर सबसे ऊपर show होने लगेगा|

इसके लिए हम दो CSS properties का use करेंगे:
1. z-index - इससे हम उस image को सबसे top पर display करेंगे| जिस element की z-index value सबसे ज्यादा होती है वह सबसे ऊपर display होता है|
2. transform: scale(1.3) - हम चाहते हैं की जब photo पर hover किया जाये तो उसकी size थोड़ी बढ़ जाये इसके लिए scale() का उपयोग करेंगे|

इसका कोड कुछ ऐसा होगा:
.gallery img:hover {
   transform: scale(1.3);
    z-index: 10;
}

जब image पर hover किया जाएगा तब यह कुछ ऐसा दिखेगा:
Image-gallery with hover effect

Step 6: Animation Effect डालना अब हम अपने image gallery को और interesting बनाने के लिए इसे animated बनाना होगा| हम transition property का उपयोग करके  hover effect की timing को control  कर सकते हैं|
.gallery img {
    transition: all 0.5s ease-out;
}

अब आपका image gallery पूरी तरह से बन कर तैयार है|

Live Demo

Image Gallery के लिए Complete HTML and CSS Code

इस design को बनाने के लिए उपयोग किया गया HTML और CSS के codes आपको नीचे दिए जा रहें हैं| आप चाहें तो इसे copy कर के run कर सकते हैं पर ध्यान रहे images के path change कर लें इसकी जगह खुद के system पर उपलब्ध images का उपयोग कर सकते हैं|

Complete HTML Code

<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>

Complete CSS Code
.gallery img {
  position: absolute;
  padding: 10px;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.5s ease-out;
}
.gallery img:nth-of-type(1) {
  left: 20px;
  top: 50px;
  transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
  left: 150px;
  top: 50px;
  transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
  left: 250px;
  top: 50px;
  transform: rotate(10deg);
}
.gallery img:nth-of-type(4) {
  left: 350px;
  top: 150px;
  transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
  left: 450px;
  top: 50px;
  transform: rotate(12deg);
}
.gallery img:hover {
  transform: scale(1.3);
  z-index: 10;
}

हमे उम्मीद है की आपने यह article पढ़ कर CSS से एक amazing image gallery design कर ली होगी| आप अलग-अलग CSS properties का use करके इसे और ज्यादा attractive बना सकते हैं|

आपको हमारा यह article कैसा लगा जरूर बताएं|

Saturday, 21 October 2017

5 मिनट में बनायें अपने Website के लिए Simple Image Slider using Pure CSS

Pure-CSS-Slider

आज हम इस article में एक simple image slider design करेंगे जिसे आप अपनी website पर बड़ी आसानी से लगा सकते हैं|

वैसे तो ज्यादातर carousel slider javascript से बनाये जाते हैं लेकिन इस slideshow की सबसे खास बात यह है की इसे बनाने के लिए pure CSS यानि की केवल CSS का उपयोग किया गया है इसमें  किसी भी प्रकार की javascript की coding use नही की गयी है|

कई सारे users अपने browser में javascript disable करके रखते हैं ऐसे में pure CSS slider का उपयोग करना काफी फायदेमंद हो सकता है|

Pure CSS Image Slider Demo

इस image slideshow का एक live example आप नीचे देख सकते हैं|

Pure CSS से Image Slider कैसे बनायें 

अब चलिए देखते हैं कि इस slider को design कैसे किया जाये | नीचे आप step-by-step तरीके से अपने वेबसाइट के लिए एक खूबसूरत सा slideshow design करना सीखेंगे|

अगर आपको कहीं परेशानी हो तो सबसे नीचे comment box में अपना सवाल पूछ सकते हैं|

तो चलिए शुरू करते हैं इस tutorial को:

Step 1: CSS Slider के लिए HTML Code लिखें
 सबसे पहले हमें जिस पेज पर इस CSS slideshow को दिखाना है वहां एक <div> बनाना होगा जिसकी id हमें slider रखनी होगी|

नीचे दिया गया HTML code देखें:
<div id="slider">
</div>

Step 2: Slideshow में Images Add करें
अब हमें जिन images को CSS carousel slider में display करना है उन्हें नीचे दिए गये तरीके से slider वाले <div> के अंदर अलग-अलग <div> बना कर <img> tag के जरिये add करना होगा|
<div id="slider">    
<div>
<img src="image4.jpg">
</div>
<div>
<img src="image3.jpg">
</div>
<div>
<img src="image2.jpg">
</div>
<div>
<img src="image1.jpg">
</div>  
</div>

Step 3: CSS Code for Image Slider
हमने सारे images add कर दिए हैं अब हमें इन pictures को slider effect देना है जो की CSS code से किया जा सकता है|
नीचे दिया गया CSS code आप copy करके अपने HTML page के <head> tag के अंदर paste कर दें|
<style type="text/css">
div#slider {
  overflow: hidden;
  margin: auto;
  width: 50%;
  max-width: 700px;
  max-height: 400px;
}

div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}

div#slider div img {
  width: 20%;
  float: left;
}

@keyframes slider {
  0% { left: 0%;}
  20% { left: 0%;}
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%;}
  75% { left: -300%;}
  95% { left: -300%;}
}
</style>


Step 4: जरूरत के अनुसार Customize करें
हमने पहले से ही इस slider की height और width set किया हुआ है लेकिन जाहिर सी बात है हर वेबसाइट की अलग-अलग requirements होती हैं और आपके website के लिए यदि इसकी size सही न हो तो आप आवश्यकतानुसार इसकी height width में बदलाव कर सकते हैं इसके अलावा आप slideshow की speed भी कम-ज्यादा कर सकते हैं |

Set Height and Width:
इसके लिए आपको CSS में div#slider selector की कुछ properties में नीचे दिए गये अनुसार बदलाव करने होंगे:

  • width: 50%; - सबसे पहले इसके percentage में changes करें
  • max-width: 700px; - ध्यान रहे हम  यहाँ पर maximum width set करेंगे जिससे की इसकी width आवश्यकता से ज्यादा न हो नही तो image की quality भी खराब हो सकती है |
  • max-height: 400px; - उसी प्रकार maximum height भी तय करना होगा|

Set Animation Speed:
Slider की speed को भी बदला जा सकता है| इसके लिए CSS में div#slider div selector के animation property में changes करने होंगे|

नीचे आप animation property का code देख सकते हैं जहाँ इसकी value में हमने speed को 20s में specify किया है आप चाहें तो इसे बदल भी सकते हैं|

animation: 20s slider infinite;

आज आपने इस tutorial में एक simple pure CSS slider बनाना सीखा आप चाहें तो इसमें कुछ और भी add कर सकते हैं जैसे की image में link डाल सकते हैं, नीचे caption add कर सकते हैं इसके अलावा इसके animation effect को भी बदल सकते हैं|
आगे पढ़ें:


यदि आपको हमारा यह article पसंद आया हो तो आप हमें subscribe जरूर करें, subscribe करने के लिए नीचे newsletter box में अपना email enter करें और submit button press करें|



Wednesday, 11 October 2017

Website पर Full Screen Background Image कैसे लगायें?

how to add full screen background image in a website using css

Web design में full screen background image use करने का trend काफी popular है| आपने कई सारी companies और products की websites के home page में large background image का उपयोग करते हुए देखा होगा जो की पूरे browser window को cover कर लेता है और काफी attractive दिखाई देता है|

अगर आप भी अपने वेबसाइट पर इस तरह की background image use करना चाहते हैं तो आज हम आपको इस article में एक आसान तरीका बताएँगे जिससे आप CSS का उपयोग करके यह काम बड़ी आसानी से कर सकते हैं और इसकी खास बात यह responsive भी है यानि की लगभग सभी devices पर यह काम करता है|

Examples of Full Screen Background Images

चलिए सबसे पहले हम कुछ ऐसे websites का example देखते हैं जो की full screen image का उपयोग करते हैं| इन examples को देखने के बाद आपको भी कुछ inspiration मिलेगा और समझ भी आयेगा की किस तरह के images use कर सकते हैं|

Example of a full-screen background image- Frances vintage
http://francesvintage.com

Example of a full-screen background website- The gilder
http://thegilder.ca

example of a full-screen background website- zenvala
http://zenvala.com/

example of a full-screen background image website- hermestocchetti
http://www.hermestocchetti.com/en/

example of a full-screen responsive background image website- scene360
http://illusion.scene360.com/

example of a full-screen responsive background image website-justbean
justbean.co.uk

example of a full-screen responsive background image website- penandquill
http://penandquill.net/

exampleexample of a full-screen responsive background image website- cassiano
http://cassiano.tv

exampleexample of a full-screen responsive background image website- timi
https://www.timi-shop.com/

CSS Code से Full Screen Background कैसे लगायें?

जब हमें पूरे screen पर background डालना होता है तब हमें html tag या body tag पर CSS की background property apply किया जाता है|

इस example में हमने CSS code से body tag पर background image apply किया है| इसका code आप नीचे देख सकते हैं|
body {
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 }
चलिए अब इस code को समझने की कोशिश करते हैं:

background shorthand property
सबसे पहले हमने background की shorthand property का use करते हैं जिसमे नीचे दिए गये कुछ values add करने हैं:
  • url(‘image_name.jpg’) - background image का path
  • no-repeat - हमें ये ध्यान रखना है की image repeat न हो इसके लिए no-repeat लिखना होगा
  • center center - इसकी जगह हम 50% 50% भी use कर सकते हैं जिससे image horizontal और vertical दोनों तरफ से center पर आ जाये|
  • fixed - इससे image background में fixed हो जाएगी और page scroll करने पर भी अपनी जगह पर बनी रहेगी|
background-size property
यह सबसे important है इस property की value cover रहेगी जिससे की यह पूरे browser screen की width और height को cover कर लेगा|

Old browsers के लिए code
कुछ पुराने version के browsers में background-size property सही तरह से काम नही करती है तो उनके लिए कुछ browser specific codes add करने होंगे:
  • -webkit-background-size - Safari और Chrome browser के लिए
  • -moz-background-size - Firefox के लिए
  • -o-background-size - Opera के लिए
इसका एक live example आप नीचे देख सकते हैं|

Large Image Select करते समय इन बातों का रखें ध्यान

वेबसाइट के background पर full screen image लगाते समय आपको कई सारी बातों का ध्यान रखना पड़ेगा| आपको यह ध्यान रखना होगा की image की quality high हो लेकिन आपको यह भी देखना होगा की website की loading speed पर उसका गलत प्रभाव न पड़े|

Background image लगाते समय नीचे दिए गये कुछ points पर जरूर ध्यान दें:
  • Small size के image का use न करें क्योंकि यह पूरे screen को cover करने के लिए expand होगी जिससे की large screen वाले device पर इसका resolution कम हो जायेगा और quality कम हो जाएगी|
  • Image की size को 1920px के आसपास रखें|
  • Image को optimize करने के लिए उसे compress कर सकते हैं लेकिन quality का भी ध्यान रखें|
  • आप large image की जगह कोई ऐसा small size का image use कर सकते हैं जिसे आसानी से repeat करके पूरे screen को cover किया जा सके| इसका एक फायदा यह भी है की ये जल्दी load हो जाते हैं जिससे website speed प्रभावित नही होती| आप Google पर repeatable background image search कर सकते हैं|
  • सही image format का उपयोग करें| यदि graphics multiple color वाली हो तो JPG और यदि solid color वाली हो तो PNG format का use करें|
  • Color combination का जरूर ध्यान रखें, website के contents background image के ऊपर रहेंगे ऐसे में contents के color को इस प्रकार रखें की वह साफ़-साफ़ दिखाई दे|

इस tutorial को पढने के बाद अब आप आसानी से अपनी website पर responsive full screen background image लगा पाएंगे| आप इस background के ऊपर किसी भी प्रकार के content जैसे heading, paragraph, navigation, form आदि जो कुछ भी चाहें लगा सकते हैं|

आपको यह article कैसा लगा जरूर बताएं|