CSS અને SVG એનિમેશન વિશે હું જે કરી શકું તે બધું શીખવા માટે જરૂરી પ્રોજેક્ટ પૂરો કર્યા પછી, મેં સ્મેશિંગ એનિમેશન અને "કેવી રીતે ક્લાસિક કાર્ટૂન આધુનિક CSSને પ્રેરણા આપે છે" વિશે આ શ્રેણી લખવાનું શરૂ કર્યું. આ વર્ષ પૂર્ણ કરવા માટે, હું તમને તે તત્વ બનાવવા માટે આધુનિક CSS નો ઉપયોગ કેવી રીતે કરવો તે બતાવવા માંગુ છું જે ટૂન શીર્ષકોને ખૂબ પ્રભાવશાળી બનાવે છે: તેમની ટાઇપોગ્રાફી. શીર્ષક આર્ટવર્ક ડિઝાઇન 1920 ના દાયકાના શાંત યુગમાં અને 30 ના દાયકાની શરૂઆતમાં, ફિલ્મના શીર્ષક કાર્ડની ટાઇપોગ્રાફી એક મૂડ બનાવે છે, દ્રશ્ય સેટ કરે છે અને પ્રેક્ષકોને તે જોવા માટે ચૂકવણી કરતી ફિલ્મના પ્રકારની યાદ અપાવી દે છે.
કાર્ટૂન શીર્ષક કાર્ડ્સ પણ બ્રાન્ડિંગ, મૂડ અને દ્રશ્ય-સેટિંગ હતા, બધા એકમાં ફેરવવામાં આવ્યા હતા. શરૂઆતના વર્ષોમાં, જ્યારે મોટા સ્ટુડિયોનું બજેટ મોટું હતું, ત્યારે આ ટાઇટલ કાર્ડ્સ ઘણીવાર ચિત્રાત્મક અને ચિત્રાત્મક હતા.
પરંતુ જ્યારે 1950ના દાયકામાં ટેલિવિઝનમાં તેજી આવી, ત્યારે બજેટ ઘટી ગયું અને લોરેન્સ "આર્ટ" ગોબલ જેવા કલાકારો દ્વારા ડિઝાઇન કરાયેલ કાર્ડ્સ વધુ ગ્રાફિક, શૈલીયુક્ત અને ઓછા જટિલ બનીને એક નવી વિઝ્યુઅલ ભાષા અપનાવી. નોંધ: લોરેન્સ “આર્ટ” ગોબલ એ મધ્ય-સદીના અમેરિકન એનિમેશનના વારંવાર અવગણવામાં આવતા હીરોમાંના એક છે. 1950 અને 1960 ના દાયકાના તેના સૌથી પ્રભાવશાળી વર્ષો દરમિયાન તેણે મુખ્યત્વે હેન્ના-બાર્બેરા માટે કામ કર્યું હતું. ગોબલ કેરેક્ટર એનિમેટર નહોતા. તેમની ભૂમિકા વાતાવરણ બનાવવાની હતી, તેથી તેમણે ધ ફ્લિન્સ્ટોન્સ, હકલબેરી હાઉન્ડ, ક્વિક ડ્રો મેકગ્રો અને યોગી રીંછ, તેમજ શરૂઆતના શીર્ષક કાર્ડ્સ કે જે ટોન સેટ કરે છે તે માટે વાતાવરણ ડિઝાઇન કર્યું. તેમના શીર્ષક કાર્ડ્સ, જેમાં એક લોગો ઓવરલેડ સાથે ચિત્રો દર્શાવવામાં આવ્યા હતા, હેના-બાર્બેરાના આઇકોનિક દેખાવને વ્યાખ્યાયિત કરવામાં મદદ કરી. ક્વિક ડ્રો મેકગ્રા અને યોગી બેર જેવા પાત્રો માટે ગોબલની આર્ટવર્ક નાની ટીવી સ્ક્રીન પર અસરકારક હતી. કાર્ટૂનમાંથી સ્ટીલનું પુનઃઉત્પાદન કરવાને બદલે, તેણે એક જ, મજબૂત વિચાર રજૂ કરવા પર ધ્યાન કેન્દ્રિત કર્યું - ઘણીવાર સિલુએટમાં - જે તેના સારને પકડે છે. "ધ બઝિન' રીંછ" માં યોગી હેલિકોપ્ટરમાં બેસીને અવાજ કરે છે. તે બાઉન્સ કરે છે, હાથમાં pic-a-nic બાસ્કેટ, “Bear on a Picnic” માં અને તેના “પ્રાઈઝ ફાઈટ ફ્રાઈટ” માટે યોગી શીર્ષક લખાણ બોક્સ કરે છે.
પર આધાર રાખવા માટે ઓછી અથવા કોઈ ગતિ સાથે, ગોબલની સિંગલ ફ્રેમ્સે મૂડ બનાવવો, દ્રશ્ય સેટ કરવું અને વાર્તાનું વર્ણન કરવું પડ્યું. તેઓએ સપાટ રંગો, ગ્રાફિક આકારો અને ટાઇપોગ્રાફીનો ઉપયોગ કરીને આ કર્યું જે આર્ટવર્કમાં વારંવાર સંકલિત કરવામાં આવ્યું હતું.
વેબ પર કામ કરતા ડિઝાઇનર્સ તરીકે, ટૂન ટાઇટલ આપણને બ્રાન્ડના વ્યક્તિત્વને કેવી રીતે અભિવ્યક્ત કરવું, પ્રથમ છાપ કેવી રીતે બનાવવી અને ઉત્પાદન અથવા વેબસાઇટનો ઉપયોગ કરીને કોઈના અનુભવ માટે અપેક્ષાઓ કેવી રીતે સેટ કરવી તે વિશે ઘણું શીખવી શકે છે. અમે કલાકારોની અસરકારક બેનરો, લેન્ડિંગ-પેજ હેડર અને સારી ફેશનવાળી સ્પ્લેશ સ્ક્રીન બનાવવાની તકનીકોમાંથી શીખી શકીએ છીએ. ટૂન શીર્ષક ટાઇપોગ્રાફી કાર્ટૂન શીર્ષક કાર્ડ્સ દર્શાવે છે કે કેવી રીતે છબી સાથે મર્જિંગ પ્રકાર હેડર અથવા હીરોની જરૂર હોય તે પંચ પહોંચાડે છે. મુઠ્ઠીભર ટેક્સ્ટ-શેડો, ટેક્સ્ટ-સ્ટ્રોક અને ટ્રાન્સફોર્મ યુક્તિઓ સાથે, આધુનિક CSS તમને તે જ ઊર્જામાં ટેપ કરવા દે છે.
ટૂન ટેક્સ્ટ શીર્ષક જનરેટર આ લેખ લખવા દરમિયાન, મને સમજાયું કે મને ખૂબ જ ગમતા કાર્ટૂન શીર્ષકોની જેમ ટેક્સ્ટ જનરેટ કરવા માટે એક સાધન ઉપયોગી થશે. તેથી મેં એક બનાવ્યું. માય ટૂન ટેક્સ્ટ શીર્ષક જનરેટર તમને રંગો, સ્ટ્રોક અને બહુવિધ ટેક્સ્ટ શેડોઝ સાથે પ્રયોગ કરવા દે છે. તમે પેઇન્ટ ઓર્ડરને સમાયોજિત કરી શકો છો, અક્ષરોમાં અંતર લાગુ કરી શકો છો, નમૂના ફોન્ટ્સની પસંદગીમાં તમારા ટેક્સ્ટનું પૂર્વાવલોકન કરી શકો છો અને પછી પ્રોજેક્ટમાં ઉપયોગ કરવા માટે જનરેટ કરેલ CSSને સીધા તમારા ક્લિપબોર્ડ પર કૉપિ કરી શકો છો. ટૂન શીર્ષક CSS ટૂન ટેક્સ્ટ શીર્ષક જનરેટર તમને પ્રદાન કરે છે તે CSSને તમે ફક્ત કૉપિ-પેસ્ટ કરી શકો છો. પરંતુ ચાલો તે શું કરે છે તેના પર નજીકથી નજર કરીએ. ટેક્સ્ટ શેડો ઓગી ડોગીના એપિસોડ "યુક-યુક ડક" ના આ શીર્ષકના પ્રકારને જુઓ, તેના આછા પીળા અક્ષરો અને ઘેરા, સખત, ઓફસેટ પડછાયા સાથે જે તેને પૃષ્ઠભૂમિથી દૂર કરે છે અને ઊંડાણનો ભ્રમ બનાવે છે.
તમે કદાચ પહેલેથી જ જાણો છો કે ટેક્સ્ટ-શેડો ચાર મૂલ્યો સ્વીકારે છે: (1) આડી અને (2) ઊભી ઑફસેટ્સ, (3) અસ્પષ્ટતા અને (4) એક રંગ જે ઘન અથવા અર્ધ-પારદર્શક હોઈ શકે છે. તે ઑફસેટ મૂલ્યો સકારાત્મક અથવા નકારાત્મક હોઈ શકે છે, તેથી હું નીચે અને જમણી તરફ ખેંચાયેલા સખત પડછાયાનો ઉપયોગ કરીને "યુક-યુક ડક" ની નકલ કરી શકું છું: રંગ: #f7f76d; ટેક્સ્ટ-શેડો: 5px 5px 0 #1e1904;
બીજી બાજુ, આ "પિન્ટ જાયન્ટ" શીર્ષક તેના નકારાત્મક અર્ધ-સોફ્ટ શેડો સાથે અલગ લાગણી ધરાવે છે: રંગ: #c2a872; ટેક્સ્ટ-શેડો: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
વધારાની ઊંડાઈ ઉમેરવા અને વધુ રસપ્રદ અસરો બનાવવા માટે, હું બહુવિધ પડછાયાઓને સ્તર આપી શકું છું. "લેટ્સ ડક આઉટ" માટે, હું ચાર પડછાયાઓને જોડું છું: પૃષ્ઠભૂમિમાંથી ટેક્સ્ટને ઉપાડવા માટે નકારાત્મક આડી ઑફસેટ સાથેનો પહેલો નક્કર પડછાયો, ત્યારબાદ તેની આસપાસ અસ્પષ્ટતા બનાવવા માટે ધીમે ધીમે નરમ પડછાયાઓ: રંગ: #6F4D80; ટેક્સ્ટ-શેડો: -5px5px 0 #260e1e, /* શેડો 1 */ 0 0 15px #e9ce96, /* શેડો 2 */ 0 0 30px #e9ce96, /* શેડો 3 */ 0 0 30px #e9ce96; /* શેડો 4 */
આ પડછાયાઓ દર્શાવે છે કે ટેક્સ્ટ-શેડોનો ઉપયોગ ફક્ત લાઇટિંગ ઇફેક્ટ્સ બનાવવા માટે જ નથી, કારણ કે તે સુશોભન પણ હોઈ શકે છે અને વ્યક્તિત્વ ઉમેરી શકે છે. ટેક્સ્ટ સ્ટ્રોક ઘણા કાર્ટૂન શીર્ષક કાર્ડમાં બોલ્ડ રૂપરેખાવાળા અક્ષરો દર્શાવવામાં આવે છે જે તેમને પૃષ્ઠભૂમિથી અલગ બનાવે છે. હું ટેક્સ્ટ-સ્ટ્રોકનો ઉપયોગ કરીને આ અસરને ફરીથી બનાવી શકું છું. લાંબા સમય સુધી, આ પ્રોપર્ટી માત્ર -વેબકીટ- ઉપસર્ગ દ્વારા જ ઉપલબ્ધ હતી, પરંતુ તેનો અર્થ એ પણ છે કે તે હવે આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે.
ટેક્સ્ટ-સ્ટ્રોક એ બે ગુણધર્મો માટે લઘુલિપિ છે. પ્રથમ, ટેક્સ્ટ-સ્ટ્રોક-પહોળાઈ, વ્યક્તિગત અક્ષરોની આસપાસ સમોચ્ચ દોરે છે, જ્યારે બીજો, ટેક્સ્ટ-સ્ટ્રોક-રંગ, તેના રંગને નિયંત્રિત કરે છે. “Whatever Goes Pup” માટે મેં પીળા ટેક્સ્ટમાં 4px વાદળી સ્ટ્રોક ઉમેર્યો છે: રંગ: #eff0cd; -વેબકિટ-ટેક્સ્ટ-સ્ટ્રોક: 4px #7890b5; ટેક્સ્ટ-સ્ટ્રોક: 4px #7890b5;
સ્ટ્રોક ખાસ કરીને ઉપયોગી થઈ શકે છે જ્યારે તેઓ પડછાયાઓ સાથે જોડાયેલા હોય, તેથી "વધતા, વધતા, ગયા" માટે મેં આ ત્રિ-પરિમાણીય ટેક્સ્ટ અસર બનાવવા માટે ભાગ્યે જ અસ્પષ્ટ 1px પડછાયામાં પાતળા 3px સ્ટ્રોક ઉમેર્યા છે: રંગ: #fbb999; ટેક્સ્ટ-શેડો: 3px 5px 1px #5160b1; -વેબકિટ-ટેક્સ્ટ-સ્ટ્રોક: 3px #984336; ટેક્સ્ટ-સ્ટ્રોક: 3px #984336;
પેઇન્ટ ઓર્ડર ટેક્સ્ટ-સ્ટ્રોકનો ઉપયોગ હંમેશા અપેક્ષિત પરિણામ આપતું નથી, ખાસ કરીને પાતળા અક્ષરો અને જાડા સ્ટ્રોક સાથે, કારણ કે ડિફૉલ્ટ રૂપે બ્રાઉઝર ભરણ પર સ્ટ્રોક દોરે છે. દુર્ભાગ્યે, CSS હજી પણ મને સ્ટ્રોક પ્લેસમેન્ટને સમાયોજિત કરવાની પરવાનગી આપતું નથી જેમ કે હું ઘણીવાર સ્કેચમાં કરું છું. જો કે, પેઇન્ટ-ઓર્ડર પ્રોપર્ટીમાં એવા મૂલ્યો છે જે મને સ્ટ્રોકને ફિલની સામે રાખવાને બદલે પાછળ મૂકવાની મંજૂરી આપે છે.
પેઇન્ટ-ઓર્ડર: સ્ટ્રોક પહેલા સ્ટ્રોકને પેઇન્ટ કરે છે, પછી ભરણ, જ્યારે પેઇન્ટ-ઓર્ડર: ભરણ તેનાથી વિરુદ્ધ કરે છે: રંગ: #fbb999; પેઇન્ટ-ઓર્ડર: ભરો; ટેક્સ્ટ-શેડો: 3px 5px 1px #5160b1; ટેક્સ્ટ-સ્ટ્રોક-રંગ:#984336; ટેક્સ્ટ-સ્ટ્રોક-પહોળાઈ: 3px;
અસરકારક સ્ટ્રોક અક્ષરોને વાંચવા યોગ્ય રાખે છે, વજન ઉમેરે છે, અને - જ્યારે પડછાયાઓ અને પેઇન્ટ ઓર્ડર સાથે જોડાય છે - સપાટ ટેક્સ્ટને વાસ્તવિક હાજરી આપે છે. ટેક્સ્ટની અંદરની પૃષ્ઠભૂમિ ઘણા કાર્ટૂન શીર્ષક કાર્ડ લેટરિંગમાં ટેક્સચર, ગ્રેડિએન્ટ્સ અથવા સચિત્ર વિગતો ઉમેરીને સપાટ રંગથી આગળ વધે છે. કેટલીકવાર તે ટેક્સચર હોય છે, અન્ય સમયે તે સૂક્ષ્મ ટોનલ શિફ્ટ સાથેનો ઢાળ હોઈ શકે છે. વેબ પર, હું ટેક્સ્ટની પાછળ પૃષ્ઠભૂમિ છબી અથવા ઢાળનો ઉપયોગ કરીને અને પછી તેને અક્ષરોના આકારમાં ક્લિપ કરીને આ અસરને ફરીથી બનાવી શકું છું. આ એકસાથે કામ કરતી બે ગુણધર્મો પર આધાર રાખે છે: પૃષ્ઠભૂમિ-ક્લિપ: ટેક્સ્ટ અને ટેક્સ્ટ-ફિલ-રંગ: પારદર્શક.
પ્રથમ, હું ટેક્સ્ટની પાછળ પૃષ્ઠભૂમિ લાગુ કરું છું. આ બીટમેપ અથવા વેક્ટર ઇમેજ અથવા CSS ગ્રેડિયન્ટ હોઈ શકે છે. ક્વિક ડ્રો મેકગ્રા એપિસોડ "બાબા બેટ" ના આ ઉદાહરણ માટે, શીર્ષક ટેક્સ્ટમાં અંધારાથી પ્રકાશ સુધી સૂક્ષ્મ ટોપ-બોટમ ગ્રેડિયન્ટનો સમાવેશ થાય છે: પૃષ્ઠભૂમિ: રેખીય-ગ્રેડિયન્ટ(0deg, #667b6a, #1d271a);
આગળ, હું તે પૃષ્ઠભૂમિને ગ્લિફ પર ક્લિપ કરું છું અને ટેક્સ્ટને પારદર્શક બનાવું છું જેથી પૃષ્ઠભૂમિ આના દ્વારા બતાવે: -વેબકિટ-બેકગ્રાઉન્ડ-ક્લિપ: ટેક્સ્ટ; -વેબકિટ-ટેક્સ્ટ-ફિલ-રંગ: પારદર્શક;
ફક્ત તે બે લીટીઓ સાથે, પૃષ્ઠભૂમિ હવે ટેક્સ્ટની પાછળ દોરવામાં આવતી નથી; તેના બદલે, તે તેની અંદર દોરવામાં આવે છે. આ ટેકનિક ખાસ કરીને સારી રીતે કામ કરે છે જ્યારે સ્ટ્રોક અને પડછાયાઓ સાથે જોડવામાં આવે છે. ક્લિપ કરેલ ઢાળ રંગ અને રચના સાથે અક્ષરો પ્રદાન કરે છે, સ્ટ્રોક તેની ધારને તીક્ષ્ણ રાખે છે, અને પડછાયો તેને પૃષ્ઠભૂમિમાંથી ઉંચો કરે છે. સાથે મળીને, તેઓ હાથથી દોરવામાં આવેલા શીર્ષક કાર્ડના સ્તરીય દેખાવને થોડું CSS સિવાય બીજું કંઈ વાપરીને ફરીથી બનાવે છે. હંમેશની જેમ, ક્લિપ કરેલા ટેક્સ્ટનું કાળજીપૂર્વક પરીક્ષણ કરો, કારણ કે બ્રાઉઝરની વિચિત્રતા ક્યારેક પડછાયાઓ અને રેન્ડરિંગને અસર કરી શકે છે. લખાણને વ્યક્તિગત અક્ષરોમાં વિભાજીત કરવું કેટલીકવાર હું આખા શબ્દ અથવા મથાળાને સ્ટાઇલ કરવા માંગતો નથી. હું વ્યક્તિગત અક્ષરોને સ્ટાઈલ કરવા ઈચ્છું છું - એક અક્ષરને સ્થાને નજવા માટે, એક ગ્લિફને વધારાનું વજન આપો અથવા થોડા અક્ષરોને સ્વતંત્ર રીતે એનિમેટ કરવા માંગો છો. સાદા HTML અને CSSમાં, તે કરવા માટે માત્ર એક જ વિશ્વસનીય રીત છે: દરેક અક્ષરને તેના પોતાના ગાળાના તત્વમાં લપેટી લો. હું તે જાતે કરી શકું છું, પરંતુ તે નાજુક હશે, જાળવવું મુશ્કેલ હશે, અને જ્યારે નકલ બદલાય છે ત્યારે તે ઝડપથી અલગ પડી જશે. તેના બદલે, જ્યારે મને પ્રતિ-અક્ષર નિયંત્રણની જરૂર હોય, ત્યારે હું splt.js જેવી ટેક્સ્ટ-સ્પ્લિટિંગ લાઇબ્રેરીનો ઉપયોગ કરું છું (જોકે અન્ય ઉકેલો ઉપલબ્ધ છે). આ એક ટેક્સ્ટ નોડ લે છે અને મારા માર્કઅપમાં ગડબડ કર્યા વિના મને એનિમેટ અને સ્ટાઇલ માટે વધારાના હૂક આપીને, શબ્દો અથવા અક્ષરોને આપમેળે લપેટી લે છે. તે એક એવો અભિગમ છે જે મારા HTMLને વાંચવા યોગ્ય અને અર્થપૂર્ણ રાખે છે, જ્યારે મને ઉત્તમ નિયંત્રણ આપતી વખતે, તમે ક્લાસિક કાર્ટૂન શીર્ષક કાર્ડ્સમાં જુઓ છો તે અસમાન, લાક્ષણિક ટાઇપોગ્રાફીને ફરીથી બનાવવાની જરૂર છે. જો કે, આ અભિગમ સાથે આવે છેઍક્સેસિબિલિટી ચેતવણીઓ, કારણ કે મોટાભાગના સ્ક્રીન રીડર્સ ટેક્સ્ટ નોડ્સને ક્રમમાં વાંચે છે. તેથી આ:
હમ સ્વીટ હમ
…તમારી અપેક્ષા મુજબ વાંચે છે: હમ સ્વીટ હમ
પરંતુ આ:
H u m
…બ્રાઉઝર અને સ્ક્રીન રીડરના આધારે અલગ રીતે અર્થઘટન કરી શકાય છે. કેટલાક અક્ષરોને જોડશે અને શબ્દોને યોગ્ય રીતે વાંચશે. અન્યો અક્ષરો વચ્ચે વિરામ લઈ શકે છે, જે સૌથી ખરાબ પરિસ્થિતિમાં આના જેવું લાગે છે: “એચ…” “યુ…” “એમ…”
દુર્ભાગ્યે, કેટલાક વિભાજન ઉકેલો હંમેશા સુલભ પરિણામ આપતા નથી, તેથી મેં મારું પોતાનું ટેક્સ્ટ સ્પ્લિટર, splinter.js લખ્યું છે, જે હાલમાં બીટામાં છે. વ્યક્તિગત પત્રોનું પરિવર્તન મારા ટૂન ટેક્સ્ટ સ્પ્લિટરને સક્રિય કરવા માટે, હું જે તત્વને વિભાજિત કરવા માંગું છું તેમાં ડેટા- વિશેષતા ઉમેરું છું:
હમ સ્વીટ હમ
પ્રથમ, મારી સ્ક્રિપ્ટ દરેક શબ્દને વ્યક્તિગત અક્ષરોમાં વિભાજિત કરે છે અને વર્ગ અને ARIA વિશેષતાઓ સાથે સ્પેન એલિમેન્ટમાં લપેટી લે છે:
સ્ક્રિપ્ટ પછી સ્પ્લિટ એલિમેન્ટની પ્રારંભિક સામગ્રી લે છે અને ઍક્સેસિબિલિટી જાળવવામાં મદદ કરવા માટે તેને એરિયા એટ્રિબ્યુટ તરીકે ઉમેરે છે:
તે વર્ગ વિશેષતાઓ લાગુ કરવા સાથે, હું પછી વ્યક્તિગત અક્ષરોને મારી પસંદગી પ્રમાણે સ્ટાઈલ કરી શકું છું.
ઉદાહરણ તરીકે, "હમ સ્વીટ હમ" માટે, હું તેની નકલ કરવા માંગુ છું કે તેના અક્ષરો આધારરેખાથી કેવી રીતે દૂર થાય છે. મારા ટૂન ટેક્સ્ટ સ્પ્લિટરનો ઉપયોગ કર્યા પછી, મેં અર્ધ-રેન્ડમ દેખાવ બનાવવા માટે ઘણા :nth-child સિલેક્ટર્સનો ઉપયોગ કરીને ચાર અલગ અલગ અનુવાદ મૂલ્યો લાગુ કર્યા છે: /* 4થી, 8મી, 12મી... */ .toon-char:nth-child(4n) { અનુવાદ: 0 -8px; } /* 1લી, 5મી, 9મી... */ .toon-char:nth-child(4n+1) { અનુવાદ: 0 -4px; } /* 2જી, 6ઠ્ઠી, 10મી... */ .toon-char:nth-child(4n+2) { અનુવાદ: 0 4px; } /* 3જી, 7મી, 11મી... */ .toon-char:nth-child(4n+3) { અનુવાદ: 0 8px; }
પરંતુ અનુવાદ એ માત્ર એક ગુણધર્મ છે જેનો ઉપયોગ હું મારા ટૂન ટેક્સ્ટને બદલવા માટે કરી શકું છું.
હું તે વ્યક્તિગત અક્ષરોને વધુ અસ્તવ્યસ્ત દેખાવ માટે પણ ફેરવી શકું છું: /* 4થી, 8મી, 12મી... */ .ટૂન-લાઇન .ટૂન-ચાર:nth-child(4n) { ફેરવો: -4deg; } /* 1લી, 5મી, 9મી... */ .toon-char:nth-child(4n+1) { ફેરવો: -8deg; } /* 2જી, 6ઠ્ઠી, 10મી... */ .toon-char:nth-child(4n+2) { ફેરવો: 4deg; } /* 3જી, 7મી, 11મી... */ .toon-char:nth-child(4n+3) { ફેરવો: 8deg; }
પરંતુ અનુવાદ એ માત્ર એક ગુણધર્મ છે જેનો ઉપયોગ હું મારા ટૂન ટેક્સ્ટને બદલવા માટે કરી શકું છું. હું તે વ્યક્તિગત અક્ષરોને વધુ અસ્તવ્યસ્ત દેખાવ માટે પણ ફેરવી શકું છું: /* 4થી, 8મી, 12મી... */ .ટૂન-લાઇન .ટૂન-ચાર:nth-child(4n) { ફેરવો: -4 ડિગ્રી; }
/* 1લી, 5મી, 9મી... */ .toon-char:nth-child(4n+1) { ફેરવો: -8 ડિગ્રી; }
/* 2જી, 6ઠ્ઠી, 10મી... */ .toon-char:nth-child(4n+2) { ફેરવો: 4deg; }
/* 3જી, 7મી, 11મી... */ .toon-char:nth-child(4n+3) { ફેરવો: 8deg; }
અને, અલબત્ત, હું તે પાત્રોને જીગલ કરવા માટે એનિમેશન ઉમેરી શકું છું અને મારા ટૂન ટેક્સ્ટ શૈલીના શીર્ષકોને જીવંત બનાવી શકું છું. પ્રથમ, મેં કીફ્રેમ એનિમેશન બનાવ્યું જે અક્ષરોને ફેરવે છે:
@keyframes જીગલ { 0%, 100% { રૂપાંતર: rotate(var(--base-rotate, 0deg)); } 25% { રૂપાંતર: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { રૂપાંતર: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { રૂપાંતર: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
મારા ટૂન ટેક્સ્ટ સ્પ્લિટર દ્વારા બનાવેલ સ્પાન તત્વો પર તેને લાગુ કરતાં પહેલાં: .ટૂન-ચાર { એનિમેશન: જીગલ 3s અનંત ઇઝ-ઇન-આઉટ; ટ્રાન્સફોર્મ-ઓરિજિન: મધ્ય તળિયે; }
અને અંતે, દરેક પાત્ર જિગલ કરવાનું શરૂ કરે તે પહેલાં પરિભ્રમણની રકમ અને વિલંબ સેટ કરો: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { એનિમેશન-વિલંબ: 0.1s; } .toon-char:nth-child(4n+1) { એનિમેશન-વિલંબ: 0.3s; } .toon-char:nth-child(4n+2) { એનિમેશન-વિલંબ: 0.5s; } .toon-char:nth-child(4n+3) { એનિમેશન-વિલંબ: 0.7s; }
એક છાપ બનાવવા માટે એક ફ્રેમ કાર્ટૂન શીર્ષક કલાકારો પાસે છાપ બનાવવા માટે એક ફ્રેમ હતી, અને તેમની ટાઇપોગ્રાફી તેમણે દોરેલી આર્ટવર્ક જેટલી જ મહત્વપૂર્ણ હતી. વેબ પર પણ આવું જ છે. સારી રીતે ડિઝાઇન કરેલ હેડર અથવા હીરોવિસ્તારને સ્પષ્ટતા, ચરિત્ર અને આત્મવિશ્વાસની જરૂર છે - માત્ર એક ઝાંખી પૂર્ણ-પહોળાઈની પૃષ્ઠભૂમિ છબી નહીં. થોડીક કાળજીપૂર્વક પસંદ કરેલી CSS પ્રોપર્ટીઝ સાથે — પડછાયાઓ, સ્ટ્રોક, ક્લિપ્ડ બેકગ્રાઉન્ડ અને કેટલાક સંયમિત એનિમેશન — અમે તે જ અસરને ફરીથી બનાવી શકીએ છીએ. મને ટૂન ટેક્સ્ટ ગમે છે કારણ કે હું નોસ્ટાલ્જિક છું, પરંતુ કારણ કે તેની ડિઝાઇન ઇરાદાપૂર્વકની છે. ઇરાદાપૂર્વકની પસંદગીઓ કરો, અને થોડી ટૂન ટેક્સ્ટ ટાઇપોગ્રાફીને તમારી ડિઝાઇનમાં પંચ ઉમેરવા દો.
