ብዛዕባ ሲኤስኤስን ኤስቪጂን ኣኒሜሽንን ዝከኣለኒ ኩሉ ክመሃር ዝጠልብ ፕሮጀክት ምስ ወዳእኩ፡ ነዛ ተኸታታሊት ፊልም ብዛዕባ ስማሺንግ ኣኒሜሽንን “How Classic Cartoons Inspire Modern CSS”ን ክጽሕፍ ጀሚረ። ሎሚ ዓመት ንምዝዛም፡ ከመይ ጌርካ ዘመናዊ CSS ተጠቒምካ ነቲ Toon Titles ኣዝዩ ጽልዋ ዘለዎ ዝገብሮ ባእታ ክትፈጥር ከም እትኽእል ከርእየኩም እደሊ፡ ንሱ ድማ ታይፖግራፊኦም እዩ። ኣርእስቲ ስነ ጥበባዊ ስርሓት ዲዛይን ኣብቲ ድምጺ ኣልቦ ዘመን 1920ታትን መጀመርታ ’30ታትን፡ ታይፕግራፊ ናይ ሓደ ፊልም ኣርእስቲ ካርድ ስሚዒት ፈጢሩ፡ ነቲ መድረኽ ኣቐሚጡ፡ ንሓደ ተዓዘብቲ ድማ ብዛዕባ’ቲ ንኽርእይዎ ዝኸፈልዎ ዓይነት ፊልም ኣዘኻኺሩ።
ናይ ካርቱን ኣርእስቲ ካርድታት እውን ምልክት ምልክት (branding)፣ ስሚዒትን ትርኢት-ኣቀማምጣን እዮም ነይሮም፣ ኩሎም ኣብ ሓደ ተጠቕሊሎም። ኣብተን ቀዳሞት ዓመታት፡ ዓበይቲ ባጀት ስቱድዮታት ኣብ ዝዓበየሉ እዋን፡ እዘን ናይ ኣርእስቲ ካርድታት መብዛሕትኡ ግዜ ስእላውን ቀባእትን እየን ነይረን።
ኣብ 1950ታት ተለቪዥን ዕብየት ምስ በጽሐት ግን፡ ባጀት ወሪዱ፡ ብኸም በዓል ሎረንስ “ኣርት” ጎብል ዝኣመሰሉ ስነጥበባውያን ዝተነድፉ ካርድታት ሓድሽ ስእላዊ ቋንቋ ብምቕባል፡ ዝያዳ ስእላዊ፡ ቅዲ ዘለዎን ውሑድ ዝተሓላለኸን ኮይኑ። መተሓሳሰቢ፡ ሎረንስ “ኣርት” ጎብል ሓደ ካብቶም መብዛሕትኡ ግዜ ዕሽሽ ዝበሃሉ ጀጋኑ ኣብ መፋርቕ ክፍለ ዘመን ኣመሪካውያን ኣኒሜሽን እዩ። ብቐንዱ ኣብ ሃና-ባርቤራ ኣብተን ኣዝየን ጽልዋ ዝነበራ ዓመታት 1950ታትን 1960ታትን ሰሪሑ። ጎብል ናይ ገጸ ባህርያት ኣኒሜተር ኣይነበረን። ተራኡ ሃዋህው ምፍጣር ስለዝነበረ፡ ንዘ ፍሊንትስቶንስ፡ ሃክልቤሪ ሃውንድ፡ ኲክ ድራው ማክግራውን ዮጊ ቢርን ዝኸውን ከባቢታት ዲዛይን ገይሩ፡ ከምኡ'ውን ቃና ዝሰርዓ መኽፈቲ ኣርእስቲ ካርድታት። ኣርማ ዝተደራረበ ስእልታት ዝሓዘ ናይ ኣርእስቲ ካርድታቱ፡ ነቲ ምልክት መልክዕ ሃና-ባርቤራ ንምግላጽ ሓጊዙ። ጎብል ንከም በዓል ኲክ ድራው ማክግራውን ዮጊ ቢርን ዝኣመሰሉ ገጸ ባህርያት ዝሰርሖ ስነ-ጥበባዊ ስርሓት ኣብ ንኣሽቱ ስክሪናት ቲቪ ውጽኢታዊ’ዩ ነይሩ። ካብቲ ካርቱን ንዝተረኽበ ስቱር ኣብ ክንዲ ዝደግሞ፡ ሓደ ንጽል፡ ሓያል ሓሳብ - መብዛሕትኡ ግዜ ብሲልሆት - ሕመረቱ ዝሓዘ ምቕራብ ኣተኲሩ። ኣብ “The Buzzin’ Bear” ዮጊ ብሄሊኮፕተር ድምጹ ይሓልፍ። ፒክ-ኣ-ኒክ መሶብ ኣብ ኢዱ ሒዙ፡ ኣብ “Bear on a Picnic” ይብለል፡ ን“Prize Fight Fright” ዝብል ስርሑ ድማ፡ ዮጊ ነቲ ናይ ኣርእስቲ ጽሑፍ ኣብ ሳጹን ይሰርሖ።
ውሑድ ወይ’ውን ዋላ ሓንቲ ምንቅስቓስ ስለዘይነበረን፡ እተን ንጽል ፍሬማት ጎብለ፡ ስሚዒት ክፈጥራ፡ መድረኽ ከቐምጣን ንሓደ ዛንታ ክገልጻን ነይርወን። ነዚ ዝገበሩ ድማ ጸፍሒ ሕብሪ፡ ስእላዊ ቅርጽታትን ብተደጋጋሚ ኣብቲ ስነ-ጥበባዊ ስርሓት ዝውሃሃድ ታይፖግራፊን ተጠቒሞም እዮም።
ከም ኣብ መርበብ ሓበሬታ ዝሰርሑ ዲዛይነራት መጠን፡ ኣርእስታት ቶን ብዛዕባ’ቲ ስብእና ናይ ሓደ ምልክት ንግዲ ከመይ ጌርና ከም እተመሓላልፎ፡ ቀዳማይ ጦብላሕታ ከም እንፈጥር፡ ከምኡ’ውን ንሓደ ሰብ ፍርያት ወይ መርበብ ሓበሬታ ብምጥቃም ንተመኩሮ ሓደ ሰብ ትጽቢታት ከም እንገብር ብዙሕ ክምህሩና ይኽእሉ። ካብ ሜላታት ናይቶም ስነ-ጥበባውያን ክንመሃር ንኽእል ኢና ውጽኢታዊ ባነራት፡ ርእሲ-መዕረፊ ገጽ፡ ዋላ’ውን ጽቡቕ ol’ fashioned splash screens ንምፍጣር። ቱን ኣርእስቲ ታይፖግራፊ ካርቱን ኣርእስቲ ካርድታት ዓይነት ምስ ምስሊ ምውህሃድ ንሓደ ርእሲ ወይ ጅግና ዘድልዮ ምጉስቋል ከመይ ከም ዘቕርብ ዘርኢ እዩ። ብኣጻብዕ ዝቑጸሩ ጽሑፍ-ጽላሎት፡ ጽሑፍ-ስትሮክን ትራንስፎርሜሽንን ብልሓት፡ ዘመናዊ ሲኤስኤስ ነቲ ተመሳሳሊ ጸዓት ክትጥውቕ የኽእለካ።
እቲ ቱን ጽሑፍ ኣርእስቲ ጀነሬተር ነዚ ጽሑፍ ኣብ ምጽሓፍ ኣብ ገለ ክፋል፡ ከምቲ ኣዝየ ዝፈትዎም ኣርእስታት ካርቱን ቅዲ ዘለዎ ጽሑፍ ንምፍራይ ዝሕግዝ መሳርሒ እንተዝህልወኒ ጠቓሚ ምዃኑ ተረዲኡኒ። ስለዚ ሓንቲ ሰሪሐ። My Toon Text Title Generator ብሕብርታት፡ ስትሮክን ብዙሕ ጽላሎት ጽሑፍን ክትፍትን የኽእለካ። ስርዓት ቀለም ከተመዓራርዮ ትኽእል ኢኻ፣ ርሕቀት ፊደላት ክትትግብር ትኽእል ኢኻ፣ ጽሑፍካ ኣብ ዝተመርጸ ናሙና ቅርጺ ፊደላት ቅድመ-ምርኢት ክትገብር ትኽእል ኢኻ፣ ድሕሪኡ ነቲ ዝተፈጥረ CSS ትኽ ኢልካ ናብ ቅንጥብጣብ ሰሌዳኻ ክትቅድሖ ትኽእል ኢኻ ኣብ ፕሮጀክት ክትጥቀመሉ። ቱን ኣርእስቲ ሲኤስኤስ ብቐሊሉ ነቲ Toon Text Title Generator ዝህበካ CSS copy-paste ክትገብር ትኽእል ኢኻ። እንታይ ከም ዝገብር ግን ብደቂቕ ንርአ። ጽላሎት ጽሑፍ ኣብዛ ኣርእስቲ ካብታ “ዩክ-ዩክ ዳክ” እትብል ክፋል ኦጊ ዶጊ ዘሎ ዓይነት ርኣዩ፣ ምስቲ ፍሕሽው ብጫ ፊደላትን ካብ ድሕረ ባይታ ኣልዒሉ ናይ ዕምቆት ምትላል ዝፈጥርን ጸሊምን ተሪርን ዝተመጣጠነን ጽላሎትን።
ምናልባት ድሮ ትፈልጡ ትኾኑ ጽሑፍ-ጽላሎት ኣርባዕተ ክብርታት ከም ዝቕበል፡ (1) ልኡልን (2) ቀጥታውን ምትዕርራይ፡ (3) ምድብዛዝ፡ ከምኡ’ውን (4) ጽኑዕ ወይ ፍርቂ ግሉጽ ክኸውን ዝኽእል ሕብሪ። እቶም ናይ ምትዕርራይ ክብርታት ኣወንታዊ ወይ ኣሉታዊ ክኾኑ ይኽእሉ እዮም፣ ስለዚ ንታሕቲን ንየማንን ዝተሰሓበ ተሪር ጽላሎት ተጠቒመ “ዩክ-ዩክ ዳክ” ክደግሞ እኽእል እየ፤ ሕብሪ: #f7f76d፤ ጽሑፍ-ጽላሎት: 5px 5px 0 #1e1904;
ብኻልእ ወገን ድማ እዛ “ፒንት ጃይንት” እትብል ኣርእስቲ ምስቲ ኣሉታዊ ፍርቂ ልስሉስ ጽላሎታ ዝተፈለየ ስምዒት ኣለዋ፤ ሕብሪ፡ #c2a872፤ ጽሑፍ-ጽላሎት፤ -7px 5px 0 #b100e፣ 0 -5px 10px #546c6f፤
ተወሳኺ ዕምቆት ንምውሳኽን ዝያዳ መሳጢ ውጽኢት ንምፍጣርን፡ ብዙሓት ጽላሎት ክለብስ እኽእል እየ። ን“Let’s Duck Out” ኣርባዕተ ጽላሎት እወሃሃድ፡ እቲ ቀዳማይ ጽኑዕ ጽላሎት ምስ ኣሉታዊ ልኡል ምዝንባል ነቲ ጽሑፍ ካብ ድሕረ ባይታ ንምልዓል፡ ስዒቡ ድማ በብቑሩብ ዝለስለሱ ጽላሎት ኣብ ዙርያኡ ድብዝዝ ይፈጥር፤ ሕብሪ፡ #6F4D80፤ ጽሑፍ-ጽላሎት፤ -5px5px 0 #260e1e, /* ጽላሎት 1 */ 0 0 15px #e9ce96, /* ጽላሎት 2 */ 0 0 30px #e9ce96, /* ጽላሎት 3 */ 0 0 30px #e9ce96 ዝብል ደርፊ፤ /* ጽላሎት 4 */
እዞም ጽላሎት’ዚኣቶም፡ ጽሑፍ-ጽላሎት ምጥቃም፡ ናይ ብርሃን ጽልዋ ምፍጣር ጥራይ ከም ዘይኮነ፡ ስልማት ክኾኑን ስብእና ክውስኹን ከም ዝኽእሉ’ውን ዘርእዩ’ዮም። ጽሑፍ ስትሮክ ብዙሓት ናይ ካርቱን ኣርእስቲ ካርድታት ካብ ድሕሪት ፍሉያት ዝገብሮም ድሙቕ ኣውታር ዘለዎም ፊደላት ኣለዎም። ነዚ ጽልዋ text-stroke ተጠቒመ ዳግማይ ክፈጥሮ እኽእል እየ። ንነዊሕ እዋን፡ እዚ ንብረት’ዚ ብመንገዲ -webkit- ቅድመ-ጥብቆ ጥራይ’ዩ ዝረክብ ነይሩ፡ እዚ ማለት ግን ሕጂ ኣብ መላእ ዘመናዊ መርበብ ሓበሬታታት ይድገፍ’ዩ ማለት’ዩ።
text-stroke ንኽልተ ባህርያት ዝገልጽ ኣሕጽሮተ ቃል እዩ። እቲ ቀዳማይ፡ ጽሑፍ-ስፍሓት-ስፍሓት፡ ኣብ ዙርያ ውልቀ-ፊደላት ቅርጺ ክስሕብ እንከሎ፡ እቲ ካልኣይ፡ ጽሑፍ-ስትሮክ-ሕብሪ፡ ሕብሩ ይቆጻጸር። ን“Whatever Goes Pup” ኣብ ልዕሊ እቲ ብጫ ጽሑፍ 4px ሰማያዊ ስትሮክ ወሲኸሉ ኣለኹ፤ ሕብሪ: #eff0cd; -ዌብኪት-ጽሑፍ-ስትሮክ: 4px #7890b5; ጽሑፍ-ስትሮክ: 4px #7890b5;
ብፍላይ ምስ ጽላሎት ክውሃሃዱ ከለዉ ስትሮክ ጠቐምቲ ክኾኑ ይኽእሉ’ዮም፣ ስለዚ ን“Growing, Growing, Gone”፣ ነዚ ሰለስተ-መኣዝናዊ ጽልዋ ጽሑፍ ንምፍጣር ኣብ ልዕሊ’ቲ ዳርጋ ድብዝዝ ዝበለ 1px ጽላሎት ቀጢን 3px ስትሮክ ወሲኸሉ ኣለኹ፤ ሕብሪ፡ #fbb999፤ ጽሑፍ-ጽላሎት: 3px 5px 1px #5160b1; -ዌብኪት-ጽሑፍ-ስትሮክ: 3px #984336; ጽሑፍ-ስትሮክ: 3px #984336;
ስርዓት ቀለም text-stroke ምጥቃም ኩሉ ግዜ ትጽቢት ዝግበረሉ ውጽኢት ኣየምጽእን’ዩ፡ ብፍላይ ምስ ዝረቐቑ ፊደላትን ዝረገፉ ስትሮክን፡ ምኽንያቱ ብነባሪ እቲ መርበብ ሓበሬታ ኣብ ልዕሊ’ቲ ምምላእ ስትሮክ ይስእል። እቲ ዘሕዝን ግን ሲኤስኤስ ክሳብ ሕጂ ከምቲ መብዛሕትኡ ግዜ ኣብ ስኬች ዝገብሮ ንኣቀማምጣ ስትሮክ ከስተኻኽል ኣይፈቕደለይን እዩ። ይኹን እምበር፡ እቲ ናይ ቀለም-ትእዛዝ ንብረት፡ ነቲ ስትሮክ ኣብ ክንዲ ኣብ ቅድሚ እቲ ምምላእ ብድሕሪት ከቐምጦ ዘኽእለኒ ክብርታት ኣለዎ።
paint-order: stroke መጀመርታ ነቲ ስትሮክ ይስእሎ፣ ድሕሪኡ ነቲ ምምላእ፣ paint-order: fill ግን ብኣንጻሩ ይስእሎ፤ ሕብሪ፡ #fbb999፤ ቀለም-ትእዛዝ: ምምላእ፤ ጽሑፍ-ጽላሎት: 3px 5px 1px #5160b1; ጽሑፍ-ስትሮክ-ሕብሪ:#984336; ጽሑፍ-ስትሮክ-ስፍሓት: 3px;
ውጽኢታዊ ውቅዒት ፊደላት ዝንበቡ ይገብሮም፣ ክብደት ይውስኽ፣ ከምኡ’ውን — ምስ ጽላሎትን ስርዓት ቀለምን ክውሃሃድ ከሎ — ጸፍሒ ጽሑፍ ሓቀኛ ህላወ ይህብ። ድሕረ ባይታታት ኣብ ውሽጢ ጽሑፍ ብዙሓት ናይ ካርቱን ኣርእስቲ ካርድታት ኣብቲ ፊደላት ቅርጺ፡ ምዕባለታት ወይ ስእላዊ ዝርዝር ብምውሳኽ ኪኖ ጸፍሒ ሕብሪ ይኸዱ። ሓደ ሓደ ግዜ ንሱ’ዩ ቴክቸር፡ ካልእ ግዜ ድማ ረቂቕ ምዝንባል ቃና ዘለዎ ምዕባለ ክኸውን ይኽእል። ኣብ መርበብ ሓበሬታ፡ ነዚ ጽልዋ ብድሕሪ እቲ ጽሑፍ ድሕረ ባይታ ምስሊ ወይ ግራድየንት ብምጥቃም፡ ድሕሪኡ ናብ ቅርጺ ፊደላት ብምቑራጽ ዳግማይ ክፈጥሮ እኽእል። እዚ ኣብ ክልተ ብሓባር ዝሰርሑ ባህርያት ይምርኮስ: ድሕረ ባይታ-ክሊፕ: ጽሑፍን ጽሑፍ-ምምላእ-ሕብሪ: ግሉጽን።
መጀመርታ ብድሕሪ እቲ ጽሑፍ ድሕረ ባይታ እጥቀም። እዚ ቢትማፕ ወይ ቬክተር ምስሊ ወይ ሲኤስኤስ ግራድየንት ክኸውን ይኽእል። ነዚ ኣብነት ካብቲ ናይ ቅልጡፍ ስእሊ ማክግራው ክፋል “ባባ ባይት”፡ እቲ ኣርእስቲ ጽሑፍ ካብ ጸልማት ናብ ብርሃን ረቂቕ ካብ ላዕሊ–ታሕተዋይ ምዝንባል የጠቓልል፤ ድሕረ ባይታ: መስመራዊ-ግራድየንት (0deg, #667b6a, #1d271a);
ቀጺለ፡ ነቲ ድሕረ ባይታ ናብቲ ግሊፍስ ቆሪጸ ነቲ ጽሑፍ ግሉጽ ይገብሮ እሞ እቲ ድሕረ ባይታ ብመንገዲ፤ -webkit-background-clip: ጽሑፍ፤ -webkit-text-fill-color: ግሉጽ፤
በተን ክልተ መስመራት ጥራይ፡ እቲ ድሕረ ባይታ ድሕሪ ደጊም ብድሕሪ እቲ ጽሑፍ ኣይተቐብአን፤ የግዳስ ኣብ ውሽጡ’ዩ ዝተቐብአ። እዚ ሜላ እዚ ብፍላይ ምስ ስትሮክን ጽላሎትን ክውሃሃድ ከሎ ጽቡቕ ይሰርሕ። ዝተቖርጸ ምዕባለ ነቲ ፊደላት ሕብርን ቅርጽን ይህቦ፣ ውቅዒት ወሰናስኑ ርሱን ይገብሮ፣ ጽላሎት ድማ ካብ ድሕሪት ንላዕሊ የልዕሎ። ብሓባር ድማ ካብ ንእሽቶ ሲኤስኤስ ሓሊፎም ካልእ ዘይጥቀሙ ነቲ ብኢድ ዝተቐብኡ ናይ ኣርእስቲ ካርድታት ንጣር መልክዕ ዳግማይ ይፈጥሩ። ከም ወትሩ፡ ንዝተቖርጸ ጽሑፍ ብጥንቃቐ ፈትኖ፡ ምኽንያቱ ናይ መርበብ ሓበሬታ ቅልውላው ሓደ ሓደ ግዜ ንጽላሎትን ምቕራብን ክጸልዎ ይኽእል። ጽሑፍ ናብ ውልቃዊ ፊደላት ምምቃል ሓደ ሓደ ግዜ ንሓንቲ ምሉእ ቃል ወይ ኣርእስቲ ቅዲ ክገብረላ ኣይደልን’የ። ንውልቃዊ ፊደላት ቅዲ ክገብር እደሊ — ንሓደ ገጸ ባህሪ ኣብ ቦታኡ ንምድፋእ፡ ንሓደ ግሊፍ ተወሳኺ ክብደት ንምሃብ፡ ወይ ንውሑዳት ፊደላት ብናጻ ህያው ንምግባር። ኣብ ንጹር ኤችቲኤምኤልን ሲኤስኤስን፡ ነዚ ንምግባር ሓደ ዘተኣማምን መገዲ ጥራይ’ዩ ዘሎ፡ ነፍሲ ወከፍ ፊደል ብናይ ገዛእ ርእሱ ስፓን ባእታ ምጥቕላል። ከምኡ ብኢደይ ክገብሮ ይኽእል ነይረ፣ እዚ ግን ስብርባርን ንምሕላው ኣጸጋምን ምኾነ፣ ቅዳሕ ምስ ዝቕየር ድማ ቀልጢፉ ምተበታተነ። ኣብ ክንድኡስ፡ ንነፍሲ ወከፍ ፊደል ምቁጽጻር ኣብ ዘድልየኒ እዋን፡ ከም splt.js ዝኣመሰለ ጽሑፍ ዝመቓቐል ቤተ-መጻሕፍቲ እጥቀም (ዋላ እኳ ካልኦት መፍትሒታት እንተሃለዉ)። እዚ ናይ ጽሑፍ መስመር ወሲዱ ብኣውቶማቲክ ቃላት ወይ ፊደላት ይጠቕልል፣ ንማርካፕይ ከይተሓዋወሰ ንህይወተይን ቅዲን ተወሳኺ መንጠልጠሊ ይህበኒ። ንኤችቲኤምኤል ናተይ ተነባብን ትርጉሙን ዝሕሉ ኣገባብ’ዩ፣ ኣብ ርእሲ’ዚ ድማ ነቲ ኣብ ክላሲካል ካርቱን ኣርእስቲ ካርድታት እትርእዮ ዘይምዕሩይን ባህርያዊን ታይፕግራፊ ዳግማይ ንምፍጣር ዘድልየኒ ረቂቕ ቁጽጽር ይህበኒ። ይኹን እምበር እዚ ኣገባብ እዚ ምስ...ናይ ተበጻሕነት መጠንቀቕታታት፣ መብዛሕትኦም ኣንበብቲ ስክሪን ንናይ ጽሑፍ ኖድታት ብቕደም ተኸተል ስለ ዘንብብዎ። ስለዚ እዚ፤
ሑም ምቁር ሑም
...ከምቲ ትጽቢትካ’ዩ ዘንብብ፤ ሑም ምቁር ሑም
እዚ ግን፤
ዝብል ጽሑፍ ኣሎ። H ዝብል ጽሑፍ ኣሎ። u ዝብል ጽሑፍ ኣሎ። m ዝብል ጽሑፍ ኣሎ።
ዝብል ጽሑፍ ኣሎ።...ከከም መርበብ ሓበሬታን ስክሪን ሪደርን ዝተፈላለየ ክትርጎም ይኽእል። ገሊኦም ነቲ ፊደላት ኣተሓሒዞም ነቲ ቃላት ብትኽክል ከንብብዎ እዮም። ካልኦት ድማ ኣብ መንጎ ፊደላት ደው ክብሉ ይኽእሉ እዮም፣ እዚ ድማ ኣብ ዝኸፍአ ኩነታት ከምዚ ክመስል ይኽእል፤ “ሕ...” “ኡ...” “ም...”
እቲ ዘሕዝን ግን ገለ ናይ ምፍንጫል መፍትሒታት ኩሉ ግዜ ተበጻሒ ውጽኢት ስለዘይህቡ፡ ኣብዚ እዋን’ዚ ኣብ ቤታ ዝርከብ ናይ ገዛእ ርእሰይ ናይ ጽሑፍ መከፋፈልቲ splinter.js ጽሒፈ ኣለኹ። ውልቃዊ ደብዳቤታት ምቕያር ናተይ Toon Text Splitter ንምንቅስቓስ፡ ኣብቲ ክመቕሎ ዝደሊ ባእታ data- attribute እውስኸሉ፤
ሑም ምቁር ሑም
መጀመርታ፡ ስክሪፕተይ ንነፍሲ ወከፍ ቃል ኣብ ውልቃዊ ፊደላት ፈሊዩ ኣብ ስፓን ባእታ ይጠቕልሎ፡ ክላስን ARIAን ባህርያት ተተግቢሩ፤ ዝብል ቃል ንምርካብ ኣብዚ ንጠውቅ ዝብል ቃል ንምርካብ ኣብዚ ንጠውቅ ም
ብድሕሪኡ እቲ ስክሪፕት ነቲ ናይ መጀመርታ ትሕዝቶ ናይቲ ዝተመቕለ ባእታ ወሲዱ ከም aria ባህሪ ወሲኹ ተበጻሕነት ንምዕቃብ ይሕግዝ፤
ዝብል ቃል ንምርካብ ኣብዚ ንጠውቅ ዝብል ቃል ንምርካብ ኣብዚ ንጠውቅ ም
ዝብል ጽሑፍ ኣሎ።እቶም ናይ ክፍሊ ባህርያት ተግባራዊ ብምግባር፡ ድሕሪኡ ንውልቀ ፊደላት ከም ዝመረጽክዎም ቅዲ ክገብር እኽእል።
ንኣብነት ን“Hum Sweet Hum” ፊደላታ ካብቲ መበገሲ መስመር ከመይ ከም ዝረሓቑ ክደግሞ እደሊ። ድሕሪ ምጥቃም ናተይ Toon Text Splitter፡ ፍርቂ-ሃንደበታዊ መልክዕ ንምፍጣር፡ ሓያሎ :nth-child selectors ተጠቒመ ኣርባዕተ ዝተፈላለዩ ናይ ትርጉም ክብርታት ተግባራዊ ገይረ፤ /* 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; }
ግን translate ሓደ ንብረት ጥራይ እዩ ንጽሑፈይ toon ንምቕያር ክጥቀመሉ ዝኽእል።
ነቶም ውልቀ ገጸ ባህርያት እውን ንዝያዳ ህውከት ዝመልኦ መልክዕ ክዘውሮም ይኽእል ነይረ፤ /* 4ይ፣ 8ይ፣ 12ይ... */ .toon-line .toon-char: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; }
ግን translate ሓደ ንብረት ጥራይ እዩ ንጽሑፈይ toon ንምቕያር ክጥቀመሉ ዝኽእል። ነቶም ውልቀ ገጸ ባህርያት እውን ንዝያዳ ህውከት ዝመልኦ መልክዕ ክዘውሮም ይኽእል ነይረ፤ /* 4ይ፣ 8ይ፣ 12ይ... */ .toon-line .toon-char:nth-ህጻን(4n) { . ምዝዋር: -4deg; }
/* 1ይ፣ 5ይ፣ 9ይ... */ .toon-char:nth-ቆልዓ(4n+1) { ምዝዋር: -8deg; }
/* 2ይ፡ 6ይ፡ 10ይ... */ .toon-char:nth-ህጻን(4n+2) { ምዝዋር: 4deg; }
/* 3ይ፣ 7ይ፣ 11ይ... */ .toon-char:nth-ህጻን(4n+3) { ምዝዋር: 8deg; }
ከምኡ’ውን ብርግጽ ነቶም ገጸ ባህርያት ንምንቅስቓስን ንኣርእስታት ቅዲ ጽሑፍ ቶነይ ህያው ንምግባርን ኣኒሜሽን ክውስኽ ይኽእል ነይረ። መጀመርታ ነቶም ገጸ ባህርያት ዝዘውር keyframe animation ፈጢረ፤
@keyframes ጂግል { 0%, 100% { ትራንስፎርም: ምዝዋር (var (--መሰረት-ዝዘውር, 0deg)); } 25% { ትራንስፎርም: ምዝዋር (calc (var (--መሰረት-ዝዘውር, 0deg) + 3deg)); } 50% { ትራንስፎርም: ምዝዋር (calc (var (--መሰረት-ዝዘውር, 0deg) - 2deg)); } 75% { ትራንስፎርም: ምዝዋር (calc (var (--መሰረት-ዝዘውር, 0deg) + 1deg)); } }
ቅድሚ ኣብቶም ብ Toon Text Splitter ዝፈጠርዎም ስፓን ባእታታት ምትግባረይ፤ .ቱን-ቻር { . ኣኒሜሽን: jiggle 3s ደረት ኣልቦ ምቕሉል ምእታው-ምውጻእ፤ transform-origin: ማእከል ታሕተዋይ፤ }
ኣብ መወዳእታ ድማ፡ ነፍሲ ወከፍ ገጸ ባህሪ ምውጥዋጥ ቅድሚ ምጅማሩ፡ መጠን ምዝዋርን ምድንጓይን ምቕማጥ፤ .toon-char:nth-child(4n) { --መሰረት-ዝዘውር: -2deg; } .toon-char:nth-child(4n+1) { --መሰረት-ዝዘውር: -4deg; } .toon-char:nth-child(4n+2) { --መሰረት-ዝዘውር: 2deg; } .toon-char:nth-child(4n+3) { --መሰረት-ዝዘውር: 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 ባህርያት — ጽላሎት፡ ስትሮክ፡ ዝተቖርጸ ድሕረ ባይታ፡ ከምኡ’ውን ገለ ዝተገትአ ተንቀሳቓሲ ስእሊ — ነዚ ተመሳሳሊ ጽልዋ ዳግማይ ክንፈጥሮ ንኽእል። ጽሑፍ ቶን ዝፈትዎ ናፍቖት ስለዘለኒ ዘይኮነስ፡ ዲዛይኑ ኮነ ኢልካ ስለዝኾነ’ዩ። ኮነ ኢልካ ምርጫታት ግበር፣ ንእሽቶ ቶን ጽሑፍ ታይፖግራፊ ድማ ንዲዛይናትካ ፓንች ክውስኸሉ ፍቐደሉ።
