Box Shadow જનરેટર શું છે?
Box Shadow જનરેટર એ એક ઉપયોગી સાધન છે જે તમને સ્લાઇડર્સનો ઉપયોગ કરીને ડિઝાઇન એલિમેન્ટ્સ માટે કસ્ટમ બોક્સ શેડો (પડછાયો) બનાવવાની સુવિધા આપે છે. આ ટૂલની મદદથી તમે શેડોના વિવિધ ગુણધર્મોને સરળતાથી એડજસ્ટ કરી શકો છો. વધુ જટિલ અને આકર્ષક વિઝ્યુઅલ ઇફેક્ટ્સ મેળવવા માટે તમે એક કરતાં વધુ શેડો લેયર્સને એકબીજા પર ગોઠવી (stack) શકો છો અને તમારા પ્રોજેક્ટ્સમાં સીધો ઉપયોગ કરવા માટે જનરેટ થયેલો CSS કોડ તરત જ કૉપિ કરી શકો છો.
આ ટૂલ ખાસ કરીને એવા લોકો માટે ઉપયોગી છે જેઓ:
- કોઈ વેબ એલિમેન્ટ માટે
box-shadowડિઝાઇન કરવા માંગે છે. - એકદમ હળવો અને ટાઇટ શેડો બનાવવા માંગે છે.
- સોફ્ટ અને વધુ વ્યાપક શેડો બનાવવા માંગે છે.
- કોઈ એલિમેન્ટને અંદરની તરફ દબાયેલું દર્શાવવા માંગે છે, જેમ કે અંદર બેસી ગયેલું (sunken) ઇનપુટ અથવા બટન.
- ઊંડાણ (depth) દર્શાવવા માટે મલ્ટિપલ શેડો લેયર્સને એકસાથે ગોઠવવા માંગતા ડિઝાઇનર અથવા ફ્રન્ટ-એન્ડ ડેવલપર છે.
ઇનપુટ્સ અને કંટ્રોલ્સ
આ ટૂલમાં શેડોને કસ્ટમાઇઝ કરવા માટે નીચે મુજબના ઇનપુટ્સ અને સ્લાઇડર્સ આપવામાં આવ્યા છે:
- આડું ઓફસેટ (Horizontal): આ સ્લાઇડર શેડોને ડાબી કે જમણી બાજુ ખસેડવા માટે છે, જેની રેન્જ -50px થી 50px સુધીની છે.
- ઊભું ઓફસેટ (Vertical): આ સ્લાઇડર શેડોને ઉપર કે નીચે ખસેડવા માટે છે, જેની રેન્જ -50px થી 50px સુધીની છે.
- બ્લર (Blur): આ સ્લાઇડર શેડોની કિનારીઓને સોફ્ટ (નરમ) બનાવવા માટે છે, જેની રેન્જ 0px થી 100px સુધીની છે.
- સ્પ્રેડ (Spread): આ સ્લાઇડર શેડોને બ્લર કરતા પહેલાં તેને ફેલાવવા અથવા સંકોચવા માટે છે, જેની રેન્જ -50px થી 50px સુધીની છે.
- શેડોનો રંગ: આ કલર પીકરની મદદથી તમે શેડો માટે મનપસંદ રંગ પસંદ કરી શકો છો.
- અપારદર્શકતા (Opacity): આ સ્લાઇડર શેડોની પારદર્શકતા (transparency) સેટ કરવા માટે છે.
- ઇનસેટ શેડો (Inset): આ એક ટોગલ બટન છે જે શેડોને એલિમેન્ટની અંદરની તરફ દર્શાવવા માટે ઉપયોગમાં લેવાય છે.
- લેયર ઉમેરો: આ બટન પર ક્લિક કરીને તમે એક નવું શેડો લેયર ઉમેરી શકો છો.
- લેયર દૂર કરો: આ બટન પર ક્લિક કરીને તમે પસંદ કરેલા શેડો લેયરને દૂર કરી શકો છો.
આઉટપુટ્સ
તમે સેટ કરેલા પેરામીટર્સના આધારે ટૂલ નીચે મુજબના આઉટપુટ્સ દર્શાવે છે:
- લેયર: દરેક વ્યક્તિગત શેડો લેયર માટેનું લેબલ.
- આડું ઓફસેટ (Horizontal): લેયર માટે આડા ઓફસેટની વર્તમાન કિંમત.
- ઊભું ઓફસેટ (Vertical): લેયર માટે ઊભા ઓફસેટની વર્તમાન કિંમત.
- બ્લર (Blur): લેયર માટે બ્લરની વર્તમાન કિંમત.
- સ્પ્રેડ (Spread): લેયર માટે સ્પ્રેડની વર્તમાન કિંમત.
- શેડોનો રંગ: લેયર માટે પસંદ કરેલો રંગ.
- અપારદર્શકતા (Opacity): લેયર માટે સેટ કરેલી વર્તમાન અપારદર્શકતા.
- ઇનસેટ શેડો (Inset): લેયર માટે ઇનસેટ ઓપ્શન ચાલુ છે કે બંધ (on/off) તેની વર્તમાન સ્થિતિ.
- CSS: બોક્સ શેડો માટે જનરેટ થયેલો ફાઇનલ CSS કોડ.
કાર્યપદ્ધતિ અને નિયમો
આ ટૂલ ચોક્કસ નિયમો અને મર્યાદાઓ હેઠળ કામ કરે છે જેથી તમને સચોટ પરિણામ મળી શકે:
- રીઅલ-ટાઇમ અપડેટ્સ: આડું ઓફસેટ (Horizontal), ઊભું ઓફસેટ (Vertical), બ્લર (Blur), અને સ્પ્રેડ (Spread) ના સ્લાઇડર્સમાં ફેરફાર કરતાની સાથે જ CSS આઉટપુટ રીઅલ-ટાઇમમાં અપડેટ થાય છે.
- સ્લાઇડર મર્યાદાઓ:
- આડું ઓફસેટ -50px થી 50px સુધી સેટ કરી શકાય છે.
- ઊભું ઓફસેટ -50px થી 50px સુધી સેટ કરી શકાય છે.
- બ્લર 0px થી 100px સુધી સેટ કરી શકાય છે.
- સ્પ્રેડ -50px થી 50px સુધી સેટ કરી શકાય છે.
- લેયર મેનેજમેન્ટ: જ્યારે તમે નવું લેયર ઉમેરો છો, ત્યારે તે ડિફોલ્ટ વેલ્યુઝ સાથે નવું શેડો લેયર બનાવે છે. લેયર દૂર કરવાના બટનથી પસંદ કરેલું લેયર ડિલીટ થઈ જાય છે.
- મલ્ટિપલ લેયર્સ CSS: જ્યારે એક કરતાં વધુ લેયર્સ હાજર હોય, ત્યારે CSS આઉટપુટમાં તમામ લેયર્સની વેલ્યુઝ અલ્પવિરામ (comma-separated) દ્વારા અલગ પાડીને દર્શાવવામાં આવે છે.
- પ્રી-રેન્ડર્ડ લેયર્સ: આ ટૂલ શરૂઆતમાં પાંચ લેયર્સ પ્રી-રેન્ડર કરે છે. જેમાં પ્રથમ લેયર ડિફોલ્ટ વેલ્યુઝ
0 8 24 -4અને 18% ટ્રાન્સપરન્ટ બ્લેક (કાળા રંગ) સાથે સેટ હોય છે, જ્યારે બાકીના અન્ય લેયર્સ શરૂઆતમાં છુપાયેલા (hidden) હોય છે. - સ્પ્રેડ અને ઇનસેટની ખાસિયત: સ્પ્રેડની નેગેટિવ (ઋણ) કિંમત શેડોને અંદરની તરફ ખેંચે છે. જ્યારે "ઇનસેટ શેડો (Inset)" ઓપ્શન શેડોને એલિમેન્ટની અંદરની બાજુ ફ્લિપ કરે છે.
પ્રાઇવસી અને પ્રોસેસિંગ
તમારી પ્રાઇવસી અમારા માટે મહત્વની છે. તમે આ ટૂલમાં જે પણ શેડો ડિઝાઇન કરો છો, તે દરેક શેડો સંપૂર્ણપણે તમારા પોતાના બ્રાઉઝરમાં જ રેન્ડર થાય છે. તમે અહીં જે પણ સેટિંગ્સ અથવા વેલ્યુઝ સેટ કરો છો, તેમાંથી કંઈપણ BroBroGo પર અપલોડ થતું નથી.
વારંવાર પૂછાતા પ્રશ્નો (FAQ)
ઓફસેટ, બ્લર અને સ્પ્રેડ ખરેખર શું કંટ્રોલ કરે છે?
ઓફસેટ (offset) શેડોને ડાબે/જમણે અને ઉપર/નીચે ખસેડે છે, બ્લર (blur) તેની કિનારીઓને સોફ્ટ કરે છે, અને સ્પ્રેડ (spread) તેને બ્લર કરતા પહેલાં ફેલાવે છે અથવા સંકોચે છે. નેગેટિવ સ્પ્રેડ શેડોને અંદરની તરફ ખેંચે છે, જે ટાઇટ શેડો માટે ઉપયોગી છે.
ઇનસેટ (inset) વિકલ્પ શું કામ કરે છે?
સામાન્ય શેડો (પડછાયો) એલિમેન્ટની બહાર પડે છે, જેમ કે ઊંચકેલા કાર્ડની પાછળ પડતો પ્રકાશ. ઇનસેટ (Inset) તેને અંદરની તરફ ફેરવે છે, જેથી એલિમેન્ટ અંદર દબાયેલું હોય તેવું લાગે છે — આ દબાયેલા ઇનપુટ્સ અથવા બટનો માટે ખૂબ ઉપયોગી છે.
એક કરતાં વધુ શેડો લેયર્સ શા માટે વાપરવા જોઈએ?
એક સિંગલ શેડો અમુક સાઇઝ પછી ફ્લેટ અને અકુદરતી લાગે છે. વાસ્તવિક ઊંડાણ (elevation) મેળવવા માટે સામાન્ય રીતે એક ઘાટા નજીકના શેડો સાથે એક સોફ્ટ, વ્યાપક શેડોને કમ્બાઇન કરવામાં આવે છે — આ ઇફેક્ટ મેળવવા માટે બીજું લેયર ઉમેરો અને બંનેને અલગ-અલગ ટ્યુન કરો.