04 નો 01
CSS3 સાથે ક્રોસ-બ્રાઉઝર લિનીયર ગ્રેડિડેન્ટ્સ બનાવી રહ્યું છે
લીનિયર ગ્રેડિએન્ટ્સ
ઢાળનાં સૌથી સામાન્ય પ્રકાર જે તમે જોશો તે બે રંગોની રેખીય ઢાળ છે. આનો અર્થ એ કે ઢાળ ધીમે ધીમે ધીમે ધીમે બદલાઇને પ્રથમ રંગથી બીજી બાજુએ ખસેડશે. આ પૃષ્ઠ પરની છબી # 999 (ડાર્ક ગ્રે) થી #fff (સફેદ) નો સરળ ડાબેથી જમણે ઢાળ દર્શાવે છે.
રેખીય ઘટકો એ વ્યાખ્યાયિત કરવા માટે સૌથી સરળ છે, અને બ્રાઉઝર્સમાં સૌથી વધુ ટેકો છે. CSS3 રેખીય ઘટકોને એન્ડ્રોઇડ 2.3+, ક્રોમ 1+, ફાયરફોક્સ 3.6+, ઓપેરા 11.1+ અને સફારી 4+ માં સપોર્ટેડ છે. ઈન્ટરનેટ એક્સપ્લોરર ફિલ્ડનો ઉપયોગ કરીને ઘટકો ઉમેરી શકે છે અને તેમને IE 5.5 પર પાછું સમર્થન આપે છે. આ CSS3 નથી, પરંતુ તે ક્રોસ બ્રાઉઝર સુસંગતતા માટે એક વિકલ્પ છે.
જ્યારે તમે ઢાળ વ્યાખ્યાયિત કરો છો ત્યારે તમારે ઘણી અલગ વસ્તુઓ વ્યાખ્યાયિત કરવાની જરૂર છે:
- તે પ્રકારનું ઢાળ છે- રેખીય અથવા રેડિયલ
- જ્યાં ઢાળ શરૂ થવો જોઈએ
- જ્યાં ઢાળ બંધ થવો જોઈએ
- ઢાળમાં કઇ રંગો છે અને તેઓ ક્યાંથી શરૂ કરે છે અને બંધ કરે છે
CSS3 નો ઉપયોગ કરીને રેખીય ઘટકોને વ્યાખ્યાયિત કરવા માટે, તમે લખો:
રેખીય-ઢાળ ( ખૂણો અથવા બાજુ અથવા ખૂણા , રંગ સ્ટોપ , રંગ સ્ટોપ )
- પ્રથમ તમે નામ રેખીય- ગ્રેડિયડ સાથે ઢાળનાં પ્રકારને વ્યાખ્યાયિત કરો છો.
- પછી, તમે બેમાંથી એક રીતે ઢાળનાં પ્રારંભ અને સ્ટોપ પોઈન્ટને વ્યાખ્યાયિત કરો: ડિગ્રીમાં 0 થી 359 સુધીની રેખાના ખૂણો, 0 અંકો સીધી દિશા નિર્દેશ કરે છે. અથવા "બાજુ અથવા ખૂણા" કાર્ય સાથે, જેમ કે ડાબી, જમણી, નીચે અને ટોચ આને આગળના પૃષ્ઠ પર વધુ વિગતવાર સમજાવીશું. જો તમે આ છોડો છો, તો ઢાળ એ તત્વના તળિયેથી તત્વની નીચે આવે છે.
- પછી તમે રંગ બંધ વ્યાખ્યાયિત કરે છે. તમે રંગ કોડ અને વૈકલ્પિક ટકાવારી સાથે રંગ અટકે છે તે વ્યાખ્યાયિત કરો. ટકાવારી એવી બ્રાઉઝરને કહે છે કે રેખા પર કે રંગ સાથે પ્રારંભ અથવા અંત થાય છે. મૂળભૂત લીટી સાથે સમાનરૂપે રંગને મુકવા માટે છે. તમે પૃષ્ઠ 3 પર રંગ સ્ટોપ્સ વિશે વધુ શીખીશું
તેથી, ઉપરના ઢાળને CSS3 સાથે વ્યાખ્યાયિત કરવા માટે, તમે લખો:
રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%);
અને તેને તમે લખો છો તે DIV ની પૃષ્ઠભૂમિ તરીકે સેટ કરો:
div {
બેકગ્રાઉન્ડ છબી: રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%;
}
CSS3 લીનિયર ગ્રેડિએન્ટ્સ માટે બ્રાઉઝર એક્સ્ટેન્શન્સ
ક્રોસ-બ્રાઉઝરનો ઉપયોગ કરવા માટે તમારા ઢાળને મેળવવા માટે, તમારે મોટાભાગનાં બ્રાઉઝર્સ માટે બ્રાઉઝર એક્સ્ટેંશન અને Internet Explorer 9 અને નીચલા (વાસ્તવમાં 2 ફિલ્ટર્સ) માટે ફિલ્ટરનો ઉપયોગ કરવાની જરૂર છે. આ બધા તમારા ઢાળને વ્યાખ્યાયિત કરવા માટે સમાન તત્વો લે છે (સિવાય કે તમે ફક્ત IE માં 2-રંગ ઘટકોને વ્યાખ્યાયિત કરી શકો છો).
માઈક્રોસોફ્ટ ગાળકો અને એક્સ્ટેંશન -ઇન્ટરનેટ એક્સપ્લોરર સમર્થન માટે સૌથી પડકારરૂપ છે, કારણ કે તમને વિવિધ બ્રાઉઝર સંસ્કરણોને ટેકો આપવા માટે ત્રણ અલગ અલગ લાઇનની જરૂર છે. ઉપરના ગ્રેને સફેદ ગ્રેડીઅંટ મેળવવા માટે તમે લખશો:
/ * IE 5.5-7 * /
ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', એન્ડ કોલોરસ્ટ્ર = '# એફએફએફએફ', ગ્રેડિઅન્ટ ટાઈપ = 1);
/ * IE 8-9 * /
-એમએસ-ફિલ્ટર: "પ્રોગિડ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', એન્ડ કોલોરસ્ટ્ર = '# એફએફએફએફ', ગ્રેડિઅન્ટ ટાઈપ = 1)";
/ * IE 10 * /
-એમએસ-રેખીય-ઢાળ (બાકી, # 999999 0%, #ffffff 100%);
મોઝિલા એક્સ્ટેંશન- The -moz- વિસ્તરણ એ CSS3 પ્રોપર્ટી જેવી કામ કરે છે, ફક્ત -મોઝ એક્સ્ટેંશન સાથે. ફાયરફોક્સ માટે ઉપરની ઢાળ મેળવવા માટે, લખો:
-મોઝ-રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%);
ઓપેરા એક્સ્ટેંશન - -ઓ-એક્સ્ટેંશન ઑપેરા 11.1+ માટે ઉમેરે છે ઉપરના ઢાળને મેળવવા માટે, લખો:
-ઓ-રેખીય-ઢાળ (બાકી, # 999999 0%, #ffffff 100%);
વેબકિટ એક્સટેંશન -આ વેબકિટ-એક્સ્ટેંશન એ CSS3 પ્રોપર્ટી જેવું ઘણું કામ કરે છે. Safari 5.1+ અથવા Chrome 10+ માટે ઉપરના ઢાળને વ્યાખ્યાયિત કરવા માટે તમે લખો:
-વેબકીટ-રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%);
વેબકિટ એક્સ્ટેંશનનું એક જૂનું સંસ્કરણ છે જે Chrome 2+ અને Safari 4+ સાથે કામ કરે છે. આમાં તમે મિલકતના નામની જગ્યાએ, ઢાળનાં પ્રકારને મૂલ્ય તરીકે વ્યાખ્યાયિત કરો છો. આ એક્સ્ટેંશન સાથે સફેદ ગ્રેડેન્ટને ગ્રે મેળવવા માટે, લખો:
વેબકિટ-ગ્રેડિએન્ટ (રેખીય, ડાબો ટોપ, જમણો ટોચ, રંગ-સ્ટોપ (0%, # 999999), રંગ-સ્ટોપ (100%, # એફફેફએફ));
સંપૂર્ણ CSS3 રેખીય ગ્રેડિએન્ટ CSS કોડ
ગ્રેસ્ડને ગ્રેટેથી ઉપર ગ્રેજ મેળવવા માટે સંપૂર્ણ ક્રોસ-બ્રાઉઝર સપોર્ટ માટે તમારે બ્રાઉઝર્સ માટે ફોલબેક સોલિડ રંગનો સમાવેશ કરવો જોઈએ કે જે ગ્રેડિએન્ટ્સને સપોર્ટ કરતા નથી, અને છેલ્લી આઇટમ CSS3 નાં સુસંગત શૈલી માટે હોવી જોઈએ. તેથી, તમે લખો:
પૃષ્ઠભૂમિ: # 999999;
પૃષ્ઠભૂમિ: -મોઝ-રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%);
બેકગ્રાઉન્ડ: વેબકિટ-ગ્રેડિએન્ટ (રેખીય, ડાબો ટોપ, જમણો ટોચ, રંગ-સ્ટોપ (0%, # 999999), રંગ-સ્ટોપ (100%, # એફએફએફએફ));
પૃષ્ઠભૂમિ: -વેબકીટ-રેખીય-ઢાળ (બાકી, # 999999 0%, #ffffff 100%);
બેકગ્રાઉન્ડ: -ઓ-રેખીય-ઢાળ (બાકી, # 999999 0%, #ffffff 100%);
બેકગ્રાઉન્ડ: -એમએસ-રેખીય-ઢાળ (બાકી, # 999999 0%, #ffffff 100%);
ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', એન્ડ કોલોરસ્ટ્ર = '# એફએફએફએફ', ગ્રેડિઅન્ટ ટાઈપ = 1);
-એમએસ-ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ગ્રેડિઅન્ટ ટાઈપ = 1);
પૃષ્ઠભૂમિ: રેખીય-ઢાળ (ડાબી, # 999999 0%, #ffffff 100%);
આ ટ્યુટોરીયલના આગળનાં પૃષ્ઠો વધુ વિગતમાં ઢાળનાં ભાગોને સમજાવે છે, અને છેલ્લું પૃષ્ઠ તમને એવા ટૂકડા પર નિર્દેશ કરે છે જે આપમેળે CSS3 ગ્રેડીઆન્ડ્સ બનાવવા માટેની શ્રેષ્ઠ રીત છે.
ફક્ત સીએસએસ દ્વારા ક્રિયામાં આ રેખીય ઢાળ જુઓ.
04 નો 02
વિકર્ણ ગ્રેડિઅન્ટ્સ બનાવી રહ્યા છે-ગ્રેડિયેન્ટના એન્ગલ
શરૂઆત અને સ્ટોપ પોઈન્ટ, ઢાળના ખૂણો નક્કી કરે છે. સૌથી વધુ રેખીય ગ્રેડિએન્ટ્સ ટોચથી નીચેથી અથવા ડાબેથી જમણે છે પરંતુ કર્ણની રેખા પર ચાલતી ઢાળના નિર્માણનું શક્ય છે. આ પૃષ્ઠ પરની છબી સરળ ઢાળ દર્શાવે છે જે છબીમાં 45 ડિગ્રી ખૂણોને જમણે-થી-ડાબે ખસેડે છે.
ગ્રેડિયેન્ટ લાઇન વ્યાખ્યાયિત કરવા માટેના ખૂણાઓ
એંગલ એલિમેન્ટના કેન્દ્રમાં કાલ્પનિક વર્તુળ પર એક રેખા છે. 0deg ઉપર નિર્દેશ કરે છે, જમણે 90 ડિગ્રી બિંદુઓ, 180 ડિગ્રી પોઇન્ટ્સ નીચે, અને 270 અંકો પોઇન્ટ ડાબી બાજુએ. તમે કોઈ પણ ખૂણાને 0 થી 359 ડિગ્રી સુધી વ્યાખ્યાયિત કરી શકો છો.
તમારે નોંધવું જોઈએ કે ચોરસમાં, 45 ડિગ્રી કોણ ટોચથી ડાબા ખૂણાથી નીચે જમણે ચાલે છે, પરંતુ એક લંબચોરસમાં શરૂઆત અને અંતિમ પોઇન્ટ થોડીક આકારની બહાર છે, કારણ કે તમે છબીમાં જોઈ શકો છો.
વિકર્ણ ઢાળને વ્યાખ્યાયિત કરવાની વધુ સામાન્ય રીત ખૂણાને વ્યાખ્યાયિત કરવાનું છે, જેમ કે ઉપર જમણા અને ઢાળ કે ખૂણેથી વિપરીત ખૂણે જશે. તમે નીચેના કીવર્ડ્સ સાથે પ્રારંભિક ક્રમ વ્યાખ્યાયિત કરી શકો છો:
- ટોચ
- અધિકાર
- નીચે
- બાકી
- કેન્દ્ર
અને તેઓ વધુ વિશિષ્ટ હોઈ શકે છે, જેમ કે:
- ટોચ જમણે
- ટોચ ડાબી
- ટોચના કેન્દ્ર
- નીચે જમણું
- નીચે ડાબે
- નીચે કેન્દ્ર
- જમણી કેન્દ્ર
- ડાબી કેન્દ્ર
અહીં એક ચિત્ર છે જે એક ચિત્રમાં સમાન છે, તે જમણા ડાબા ખૂણેથી નીચે ડાબે ડાબેથી ખસેડતી સફેદ લાલ છે:
પૃષ્ઠભૂમિ: ## 901 એ 1C;
બેકગ્રાઉન્ડ ઇમેજ: -મોઝ-રેખીય-ઢાળ (જમણે ટોચ, # 901 એ 1 સી 0%, # એફએફએફએફએફએફ 100%);
બેકગ્રાઉન્ડ ઇમેજ: -વેબકીટ-ગ્રેડિએન્ટ (રેખીય, જમણું ટોચે, ડાબા તળિયું, રંગ-સ્ટોપ (0, # 901 એ 1 સી), રંગ-સ્ટોપ (1, # એફએફએફએફએફએફ));
પૃષ્ઠભૂમિ: -વેબકીટ-રેખીય-ઢાળ (જમણે ટોચ, # 901 એ 1 સી 0%, #ffffff 100%);
બેકગ્રાઉન્ડ: -ઓ-રેખીય-ઢાળ (જમણે ટોચ, # 901 એ 1 સી 0%, #ffffff 100%);
બેકગ્રાઉન્ડ: -એમએસ-રેખીય-ઢાળ (જમણે ટોચ, # 901 એ 1 સી 0%, # ફેફ્ફ્ફ 100%);
બેકગ્રાઉન્ડ: રેખીય-ઢાળ (જમણે ટોચ, # 901 એ 1 સી 0%, #ffffff 100%);
તમે નોંધ્યું હશે કે આ ઉદાહરણમાં કોઈ IE ફિલ્ટર્સ નથી. તે એટલા માટે છે કે IE ફક્ત બે પ્રકારની ફિલ્ટર્સને મંજૂરી આપે છે: ટોચથી નીચે (ડિફૉલ્ટ) અને ડાબેથી જમણે (ગ્રેડિએન્ટટાઇપ = 1 સ્વીચ સાથે).
ફક્ત સીએસએસ દ્વારા આ કર્ણ રેખીય ઢાળને ક્રિયામાં જુઓ.
04 નો 03
રંગ સ્ટોપ્સ
CSS3 રેખીય ગ્રેડિયેન્ટ્સ સાથે, તમે તમારા ઢાળમાં બહુવિધ રંગો ઉમેરી શકો છો જેથી ફેન્સી પર્ફોર્મન્સ પણ બનાવી શકાય. આ રંગો ઉમેરવા માટે, તમે અલ્પવિરામથી અલગ કરીને, તમારી સંપત્તિનાં અંતમાં વધારાના રંગો ઉમેરો છો. તમે જ્યાં લીટી પર રંગો શરૂ અથવા સમાપ્ત તેમજ કરીશું સમાવેશ કરવો જોઇએ.
ઈન્ટરનેટ એક્સ્પ્લોરર ફિલ્ટર ફક્ત બે રંગ સ્ટોપ્સને સપોર્ટ કરે છે, તેથી જ્યારે તમે આ ગ્રેડેન્ટને બનાવશો, ત્યારે તમારે ફક્ત પ્રથમ અને બીજા રંગોનો સમાવેશ કરવો જોઈએ જે તમે પ્રદર્શિત કરવા માંગતા હોવ.
અહીં ઉપર 3-રંગના ઢાળ માટેનું સીએસએસ છે:
પૃષ્ઠભૂમિ: #ffffff;
પૃષ્ઠભૂમિ: -મોઝ-રેખીય-ઢાળ (ડાબે, #ffffff 0%, # 901 એ 1 સી 51%, #ffffff 100%);
બેકગ્રાઉન્ડ: વેબકિટ-ગ્રેડિએન્ટ (રેખીય, ડાબો ટોપ, જમણો ટોચ, રંગ-સ્ટોપ (0%, # એફએફએફએફ), રંગ-સ્ટોપ (51%, # 901 એ 1 સી), રંગ-સ્ટોપ (100%, # એફએફએફએફ));
પૃષ્ઠભૂમિ: -વેબકીટ-રેખીય-ઢાળ (ડાબી, #ffffff 0%, # 901 એ 1 સી 51%, # ફેફફ્ફ 100%);
બેકગ્રાઉન્ડ: -ઓ-રેખીય-ઢાળ (ડાબે, #ffffff 0%, # 901 એ 1 સી 51%, # ફેફફ્ફ 100%);
બેકગ્રાઉન્ડ: -એમએસ-રેખીય-ઢાળ (ડાબી, #ffffff 0%, # 901 એ 1 સી 51%, # ફેફફ્ફ 100%);
ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', ગ્રેડિયેન્ટ ટાઈપ = 1);
પૃષ્ઠભૂમિ: રેખીય-ઢાળ (ડાબી, #ffffff 0%, # 901 એ 1 સી 51%, # ફેફફ્ફ 100%);
ફક્ત સીસીએસ દ્વારા ક્રિયામાં ત્રણ રંગ સ્ટોપ્સ સાથે આ રેખીય ઢાળ જુઓ.
04 થી 04
બિલ્ડીંગ ગ્રેડિએન્ટ્સ સરળ બનાવો
ત્યાં બે સાઇટ્સ છે જે તમને ગ્રેડિએન્ટ્સ બનાવવા માટે મદદ કરવા માટે ભલામણ કરે છે, તેમને દરેકને ફાયદા અને ખામીઓ હોય છે, મને એક ઢાળ બિલ્ડર મળતો નથી જે હજી સુધી બધું કરે છે.
અલ્ટીમેટ સીએસએસ ગ્રેડિએન્ટ જનરેટર
આ ઢાળ જનરેટર ખૂબ જ લોકપ્રિય છે કારણ કે તે ફોટોશોપ જેવા પ્રોગ્રામમાં ઢાળ બિલ્ડર્સને સમાન રીતે કરે છે. મને પણ તે ગમશે કારણ કે તે તમને વેબકિટ અને મોઝિલા ન માત્ર, બધા CSS એક્સ્ટેન્શન્સ આપે છે. આ જનરેટરની સમસ્યા એ છે કે તે માત્ર આડા અને ઊભા ઘટકોમાં જ આધાર આપે છે. જો તમે વિકર્ણ ઘટકો કરવા માંગો છો, તો તમારે અન્ય જનરેટર પર જવાનું છે જે હું ભલામણ કરું છું.
CSS3 ગ્રેડિએન્ટ જનરેટર
આ જનરેટર મને પ્રથમ એક કરતાં થોડો વધારે સમય સમજવા લાગ્યા, પરંતુ તે દિશાને કર્ણ પર બદલવામાં સપોર્ટ કરે છે.
જો તમે અન્ય CSS ગ્રેડિએન્ટ જનરેટર વિશે જાણો છો કે તમે આ કરતાં વધુ સારી રીતે ઇચ્છો છો, તો કૃપા કરીને અમને જણાવો