સામયિકોમાંથી વાનગીઓ ગોઠવવા માટેનો પ્રોજેક્ટ. તેને ગોઠવો! જાવાસ્ક્રિપ્ટમાં ચિત્રને ચમકાવતું સામયિકોમાંથી વાનગીઓ ગોઠવવા માટેનો પ્રોજેક્ટ

ફાફ, આખરે મેગેઝીનમાંથી નવી રેસિપીનું આયોજન કરવાનું પૂર્ણ કરી લીધું છે. જ્યારે તેઓ એક પરબિડીયુંમાં ધૂળ એકઠી કરી રહ્યા હતા, ત્યારે મને લાગતું ન હતું કે મેં તેમાંથી ઘણું બધું એકઠું કર્યું છે. જ્યારે હું મારા પુત્ર સાથે ગર્ભવતી હતી, ત્યારે મેં ઘણી બધી નવી વાનગીઓ તૈયાર કરી હતી કે તે કદાચ ઘણી રસોઈ પુસ્તકો માટે પૂરતી હશે. કદાચ કારણ કે હું આખો સમય ખાવા માંગતો હતો :)) અથવા કદાચ.. કોણ જાણે. બાળકના જન્મ સાથે, રસોઈ સાથે પ્રયોગ કરવા માટે વ્યવહારીક રીતે કોઈ સમય બાકી રહ્યો ન હતો, પરંતુ મારો પુત્ર મોટો થઈ રહ્યો છે, તેની માતાને મફિન્સ અને કેક પકવવામાં મદદ કરવાનું પસંદ કરે છે, અને છેવટે વાનગીઓ ગોઠવવાનું શરૂ કર્યું.

તેથી, મેં 2 ફોલ્ડર્સ લીધા, એક નવી વાનગીઓ માટે, બીજું પહેલેથી જ પરીક્ષણ કરાયેલ, પ્રિય અને ઉપયોગમાં લેવાતા લોકો માટે.



મેં નવી અને ચકાસાયેલ વાનગીઓ સાથે ફોલ્ડરને ઘણા વિભાગોમાં વિભાજિત કર્યું નથી, પ્રથમ, કારણ કે ફોલ્ડર કોઈપણ સંજોગોમાં અસ્થાયી છે, કારણ કે... વાનગીઓનું પરીક્ષણ કરવાની જરૂર છે, અને બીજું, ઘણી શ્રેણીઓમાં વર્ગીકરણ કરવામાં પણ ઘણો સમય લાગ્યો.

તેથી, મેં અસ્થાયી ફોલ્ડર માટેની નવી વાનગીઓને આમાં વિભાજિત કરી:

  • નાસ્તો;
  • નાસ્તો;
  • સલાડ;
  • સૂપ (લંચ);
  • રાત્રિભોજન;
  • સલાડ;
  • બેકડ સામાન (મુખ્યત્વે મીઠાઈઓ અને મીઠાઈઓ).
મેં આ A 4 ફોર્મેટ વિભાજકોનો ઉપયોગ કરીને ફોલ્ડરની અંદરની કેટેગરીઝને અલગ કરી છે.


મેં રંગીન પ્રિન્ટર પર વિભાજકોને છાપ્યા, અને આ તે છે:


નવી વાનગીઓ સાથેનું મારું ફોલ્ડર એકદમ જાડું છે, 80 પાના જેટલું. તેથી, ફોલ્ડરની અંદર કેટેગરીઝ ઝડપથી શોધવા માટે, હું તેને બાજુના વિભાજકો સાથે પૂરક બનાવવાની ભલામણ કરું છું જેથી કરીને તમે ઝડપથી ઇચ્છિત શ્રેણી શોધી શકો. તમે તૈયાર ઉપયોગ કરી શકો છો, ઉદાહરણ તરીકે, આના જેવા:



અથવા મારું ડાઉનલોડ કરો:



મેં સ્વ-એડહેસિવ કાગળ પર ડિવાઈડર છાપ્યા, તેમને કાપી નાખ્યા અને ફક્ત તેમને ઇચ્છિત પૃષ્ઠો પર ગુંદર કર્યા:



મેં બધી વાનગીઓને સંપૂર્ણપણે કચરાપેટીમાં ફેંકી દીધી, અંતે તેમાંથી છૂટકારો મેળવ્યો જે મારા પરિવાર ચોક્કસપણે ખાશે નહીં. હું જે રાખવા માંગતો હતો તે હું કાતર વડે કાપી નાખું છું. એક ખૂબ જ કંટાળાજનક અને મુશ્કેલ કાર્ય. તેથી, જો તમે પેપર કટરના ખુશ માલિક છો, તો તમે નસીબદાર છો.




મેં કટ આઉટ રેસિપીના સમર્થન તરીકે નિયમિત રંગીન ક્રાફ્ટ પેપરનો ઉપયોગ કર્યો. મારી પાસે IKEA તરફથી આ MOLA પેપર હતું. જો ઇચ્છિત હોય, તો રંગીન કાગળનો ઉપયોગ વાનગીઓને વર્ગોમાં વિભાજીત કરવા માટેના આધાર તરીકે પણ થઈ શકે છે, તો પછી તમે જાણશો કે, ઉદાહરણ તરીકે, લીલા પૃષ્ઠોમાં સલાડ હોય છે, અને, ઉદાહરણ તરીકે, લાલ માંસની વાનગીઓ.


મેં સરળ રીતે કટ આઉટ રેસિપીને રંગીન કાગળની પૃષ્ઠભૂમિની ટોચ પર મૂકી. જો મને વાનગી ગમતી હોય, તો હું તેને પહેલેથી જ અજમાવેલી વાનગીઓ સાથે ફોલ્ડરમાં મૂકીશ. જો નહીં, તો હું તેને ફેંકી દઈશ.



કેટલીકવાર તે ટેબલ પર યોગ્ય વસ્તુ શોધવા માટે ઘણો સમય, પ્રયત્ન અને ચેતા લે છે. તાણ ટાળવા અને આ અથવા તે વસ્તુને ઝડપથી શોધવા માટે, તમારે ડ્રોઅર્સમાં સંગ્રહને યોગ્ય રીતે ગોઠવવાની જરૂર છે. આ કેવી રીતે કરવું? અમને સૌથી શાનદાર અને ઝડપી-થી-અમલીકરણ વિચારો મળ્યા છે જે તમને સૌથી મોટી ગડબડને પણ ઉકેલવામાં મદદ કરશે.

કટલરી સંગ્રહ



જો કટલરીની વસ્તુઓ ડિવાઈડર વિના ડ્રોવરમાં સંગ્રહિત કરવામાં આવે છે, તો વહેલા કે પછી તેઓ એકબીજા સાથે ભળી જશે. આવું ન થાય તે માટે, તરત જ ખાતરી કરવી વધુ સારું છે કે કાંટો, ચમચી અને છરીઓ અલગથી સંગ્રહિત છે. આ કરવા માટે, તમે કિચનવેર સ્ટોર પર ડિવાઈડર સાથે એક ખાસ કન્ટેનર ખરીદી શકો છો અથવા પ્લાયવુડ બ્લોક્સમાંથી જાતે પાર્ટીશનો બનાવી શકો છો. આ કિસ્સામાં, બિન-વણાયેલા ટેબલક્લોથના ટુકડા સાથે તળિયે આવરી લેવું અથવા સુશોભન ફિલ્મને વળગી રહેવું વધુ સારું છે.











સૌંદર્ય પ્રસાધનોનો સંગ્રહ



ડ્રોઅરમાં સૌંદર્ય પ્રસાધનોને સંગ્રહિત કરવા માટે, તમારે વિવિધ કદના પ્લાસ્ટિક અને મેટલ કન્ટેનર મેળવવાની જરૂર છે. સગવડતા માટે, લિપસ્ટિક્સ અને ચળકાટને એક કન્ટેનરમાં મૂકવાની ભલામણ કરવામાં આવે છે, એક અલગ જારમાં સૌંદર્ય પ્રસાધનો લાગુ કરવા માટે બ્રશ અને સ્પોન્જ મૂકો, આંખના પડછાયાઓ અને બ્લશને ઠીક કરો જેથી ડ્રોઅર ખોલતી વખતે અને બંધ કરતી વખતે તે પડી ન જાય.

લિટલ હેલ્પર્સ



ડ્રોઅરને કાર્યાત્મક આયોજકમાં ફેરવવા માટે, તમારે કન્ટેનર પર પૈસા ખર્ચવા અથવા વિશિષ્ટ વિભાજકો શોધવાની જરૂર નથી. રસોડામાં તપાસ કરવી અને કોર્નફ્લેક્સ અથવા ઓટમીલમાંથી કોઈ અનિચ્છનીય કાર્ડબોર્ડ બોક્સ છે કે કેમ તે જોવા યોગ્ય છે. જૂતા, ફોન અથવા અન્ય એસેસરીઝ ખરીદવાથી બચેલા બોક્સ (અને તેમના ઢાંકણા) પણ કામમાં આવશે. સૌંદર્ય માટે, તેઓ વૉલપેપરના અવશેષો સાથે સુશોભિત કરી શકાય છે, એકસાથે ગુંદર ધરાવતા અને સમાન શૈલીમાં શણગારવામાં આવે છે.













મૂળ ઉકેલો જો તમારી પાસે બોક્સ, કન્ટેનર અને ડિવાઈડર નથી, તો પછી કોઈપણ રસોડામાં મળી શકે તેવી સૌથી સામાન્ય વસ્તુઓ બચાવમાં આવશે. ઉદાહરણ તરીકે, લગભગ કોઈપણ સુપરમાર્કેટમાં ઇંડા કાર્ડબોર્ડ બોક્સમાં વેચાય છે, જે ઘણીવાર ખરીદી પછી કચરાપેટીમાં ફેંકી દેવામાં આવે છે. હકીકતમાં, તેઓ પેપર ક્લિપ્સ, પિન, ઇરેઝર, કીઓ, થ્રેડો અને ઘણું બધું સ્ટોર કરવા માટે અનુકૂળ છે.

શુભેચ્છાઓ, તમે. તાજેતરમાં મને પૂછવામાં આવ્યું કે પેજના ચોક્કસ ભાગમાં પેજ સ્ક્રોલ કેવી રીતે સરળ રીતે કરવું. સામાન્ય રીતે, આને એન્કર લિંકને અનુસરવાનું કહેવામાં આવે છે. જ્યારે કોઈ સાઇટ વિઝિટર એવા ઘટક પર ક્લિક કરે છે કે જેમાં એન્કર લિંક ઉમેરવામાં આવી હોય, ત્યારે તે ઑટોમૅટિક રીતે પેજના તે ભાગ પર લઈ જવામાં આવે છે જ્યાં એન્કર ઉમેરવામાં આવ્યું હતું.


સામાન્ય રીતે, એન્કરનો ઉપયોગ મોટા વોલ્યુમવાળા પૃષ્ઠો પર કરવામાં આવે છે જેથી કરીને તમે સરળ નેવિગેશન માટે ઝડપથી ઇચ્છિત વિભાગ પર જઈ શકો. તમે કદાચ ઘણી વેબસાઇટ્સ પર આ જોયું હશે.

એન્કર એ વેબ પેજ પર વિશિષ્ટ સ્થાન પર સ્થિત અનન્ય નામ સાથેનું લેબલ છે, જેનો હેતુ લિંક દ્વારા અનુસરવાનો છે.
એન્કર બનાવવા માટે, તમારે પહેલા યોગ્ય જગ્યાએ બુકમાર્ક બનાવવો જોઈએ અને ટેગના નામ વિશેષતાનો ઉપયોગ કરીને તેને નામ આપવું જોઈએ. .

તે કેવી રીતે કાર્ય કરે છે તે જોવા માટે પરીક્ષણ બ્લોગ તપાસો.


ચાલો જાણીએ કે બ્લોગરમાં પેજની અંદર એન્કર લિંક્સને કેવી રીતે ફોલો કરવી. બધું એકદમ સરળ છે.

ચાલો એક સરળ મેનુ બનાવીએ, જ્યાં લિંક પેરામીટર તરીકે આપણે બ્લોક્સનું આઈડી સેટ કરીએ છીએ જેમાં સ્ક્રોલિંગ થશે. આવું કંઈક

  • પ્રથમ એન્કર
  • બીજો એન્કર
  • ત્રીજો એન્કર
  • ચોથો એન્કર
  • તમને ફરીથી મૂર્ખ બનાવવા માટે, હું તમને તરત જ સંપૂર્ણ કોડ આપીશ. તમે તેને કોપી કરી શકો છો અને પોસ્ટ એડિટરમાં HTML મોડ પર સ્વિચ કરીને ટેસ્ટ બ્લોગમાં તેને તમારા પૃષ્ઠ પર અજમાવી શકો છો. અને ચાલો જાણીએ કે અહીં શું કરવામાં આવ્યું છે


    ક્યાંથી શરૂઆત કરવી


    કેવી રીતે કરવું

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! ડ્યુસીમસ ડિસ્ટિંક્ટીયો એસેસ ક્વોડ ઇયસ રિપ્યુડિયાન્ડે એટ મેગ્ની રિપેલેટ, એક્સપેડિટા મોલેસ્ટિયા, ડેલેક્ટસ, એલિક્વમ લેબરમ અને ઇવેનિટ રિપ્રેહેન્ડરિટ સનટ વોલ્યુપ્ટેટ સિમિલિક!


    તે ક્યાંથી મેળવવું

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! ડ્યુસીમસ ડિસ્ટિંક્ટીયો એસેસ ક્વોડ ઇયસ રિપ્યુડિયાન્ડે એટ મેગ્ની રિપેલેટ, એક્સપેડિટા મોલેસ્ટિયા, ડેલેક્ટસ, એલિક્વમ લેબરમ અને ઇવેનિટ રિપ્રેહેન્ડરિટ સનટ વોલ્યુપ્ટેટ સિમિલિક!


    કેવી રીતે અમલ કરવો

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! ડ્યુસીમસ ડિસ્ટિંક્ટીયો એસેસ ક્વોડ ઇયસ રિપ્યુડિયાન્ડે એટ મેગ્ની રિપેલેટ, એક્સપેડિટા મોલેસ્ટિયા, ડેલેક્ટસ, એલિક્વમ લેબરમ અને ઇવેનિટ રિપ્રેહેન્ડરિટ સનટ વોલ્યુપ્ટેટ સિમિલિક!

  • કેવી રીતે અમલ કરવો
  • અને HTML કોડ, તે મુજબ ટેક્સ્ટના આવા વિભાગો ઉમેરી રહ્યા છે


    કેવી રીતે અમલ કરવો
    તમારા બધા લખાણ અહીં હશે


    અને અહીં મારે ફક્ત તમારું ધ્યાન નીચેના તરફ દોરવું જોઈએ

    જો તમે સંદેશને સંપાદિત કરતી વખતે એન્કરનો ઉલ્લેખ કર્યો હોય, તો "બનાવો" ટૅબ પર સ્વિચ કરશો નહીં, કામ કરો અને સંદેશને HTML મોડમાં લખો. પછી એન્કર તેમના મૂળ સ્વરૂપમાં રહેશે. નહિંતર, સ્વતઃ સુધારણા ફક્ત થશે (આ બ્લોગરની અસ્પષ્ટતા છે).

    અહીં અમુક નામ છે

    તેઓ આના જેવા દેખાશે


    એટલે કે, સંક્રમણ અવિદ્યમાન પૃષ્ઠ પર કરવામાં આવશે (જેમ કે અપ્રકાશિત).

    જો HTML મોડમાં કામ કરવું હજુ પણ મુશ્કેલ છે અને આ કિસ્સામાં બધું યોગ્ય રીતે કાર્ય કરે છે, તો તમારે ફક્ત લિંકને થોડી બદલવાની જરૂર છે જેથી એન્કર ટેગ આના જેવો દેખાય.


    અહીં અમુક નામ છે

    જ્યાં https://n-t-b-b.blogspot.com/2019/08/blog-post.html એ પેજની લિંક છે જે અહીં સેટિંગ્સમાં પોસ્ટ એડિટરની જમણી બાજુએ જોઈ શકાય છે

    તે બધા તેના જેવા એકદમ સરળ છે. વર્ડપ્રેસ પરના બ્લોગ્સમાં આવા હેતુઓ માટે વિશેષ પ્લગઇન છે. બ્લોગર પર આ નીચેના કોડનો ઉપયોગ કરીને સરળતાથી અમલમાં મુકાય છે. સૌને શુભકામનાઓ.


    નમસ્કાર મિત્રો. અને આજે તમારા માટે બીજો સાઈટ મેપ. તે લાંબા સમયથી મારા "ડબ્બા" માં પડેલું છે, અને પછી હું આકસ્મિક રીતે ભૂલી ગયેલા જૂનાને મળ્યો. કદાચ કોઈને આ ગમશે. આ એકોર્ડિયન શૈલીમાં ડિઝાઇન કરવામાં આવ્યું છે.

    આવા નકશામાં આપણી પાસે શું હશે -

    બધા લેબલ્સ (મથાળાઓ, વિભાગો) ડાબી બાજુએ પ્રદર્શિત થાય છે.
    જ્યારે તમે જમણી બાજુના તીર પર ક્લિક કરો છો, ત્યારે આ શોર્ટકટની બધી પોસ્ટ ખુલે છે.
    લેબલ સેટ - નવો સંદેશ.
    તમારી શૈલીને અનુરૂપ સરળ ડિઝાઇન કસ્ટમાઇઝેશન.
    પૃષ્ઠ પર સરળ સ્થાપન.


    કાર્યકારી સંસ્કરણ જોવા માટે, પરીક્ષણ બ્લોગ પર જાઓ.


    .સામગ્રીનું ટેબલ ;બોર્ડર-રેડિયસ:4px;બોક્સ-શેડો:0 0 10px rgba(0,0,0,.2))
    .Table-of-content .toc-header(color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow :hidden;cursor:pointer;border-bottom:1px solid #ccc;સંક્રમણ:પ્રારંભિક)
    .સામગ્રીનું ટેબલ
    .ટેબલ-ઓફ-કન્ટેન્ટ .toc-હેડર: પહેલાં(સામગ્રી:"";પહોળાઈ:0;ઊંચાઈ:0;સ્થિતિ:એબ્સોલ્યુટ;ટોપ:22px;જમણે:15px;બોર્ડર:5px ઘન પારદર્શક;બોર્ડર-રંગ:#aaa પારદર્શક પારદર્શક;સંક્રમણ:બધા .3s સરળતા)
    .ટેબલ-ઓફ-કન્ટેન્ટ .toc-header.active(રંગ:#fc4f3f)
    .table-of-content .toc-header.active:before(border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg))
    .સામગ્રીનું કોષ્ટક .લોડ થઈ રહ્યું છે
    .સામગ્રીનું કોષ્ટક ol(માર્જિન:0;પેડિંગ:0;સૂચિ-શૈલી:કોઈ નહીં;સંક્રમણ:પ્રારંભિક)
    .ટેબલ-ઓફ-સામગ્રી li(રેખા-ઊંચાઈ:સામાન્ય!મહત્વપૂર્ણ;માર્જિન:0!મહત્વપૂર્ણ;પેડિંગ:8px 8px 8px 15px!મહત્વપૂર્ણ;વ્હાઈટ-સ્પેસ:નૉરૅપ;ટેક્સ્ટ-એલાઈન:લેફ્ટ;ઓવરફ્લો:છુપાયેલ;બેકગ્રાઉન્ડ:# 808080 !મહત્વપૂર્ણ;સંક્રમણ:પ્રારંભિક)
    .સામગ્રીનું કોષ્ટક a(રંગ:#d9d9d9!મહત્વપૂર્ણ;ટેક્સ્ટ-સજાવટ:કોઈ નહીં;ફોન્ટ-સાઇઝ:86%;સંક્રમણ:પ્રારંભિક)
    .સામગ્રીનું કોષ્ટક એ: મુલાકાત લીધેલ(રંગ:#a2a2a9; સંક્રમણ:પ્રારંભિક)
    .ટેબલ-ઓફ-કન્ટેન્ટ a:હોવર,.સામગ્રીનું ટેબલ a:મુલાકાત લીધેલ:હોવર(રંગ:#ffc937!મહત્વપૂર્ણ;ટેક્સ્ટ-ડેકોરેશન:કોઈ નથી;સંક્રમણ:પ્રારંભિક)
    .પોસ્ટ ઓલ લિ:ફોર(ડિસ્પ્લે:કોઈ નહીં)



    var toc_config = (
    url: "https://"+window.location.hostname,
    કન્ટેનર આઈડી: "સામગ્રીનું કોષ્ટક",
    નવું બતાવો: 15,
    નવું લખાણ: "નવું",
    મૂળાક્ષરો પ્રમાણે: (
    પેનલ: સાચું,
    સૂચિ: સાચું
    },
    મહત્તમ પરિણામો: 9999,
    સક્રિય પેનલ: 1,
    સ્લાઇડ સ્પીડ: (
    નીચે: 400,
    ઉપર: 400
    },
    slideEasing: (
    નીચે: શૂન્ય,
    ઉપર: નલ
    },
    slideCallback: (
    નીચે: કાર્ય() (),
    ઉપર: કાર્ય() ()
    },
    ક્લિકકૉલબેક: ફંક્શન()(),
    jsonCallback: "_toc",

    !function(e,o)(var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head"),n=;e=function(e)(for(var o,c,i=) e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);માટે (var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&++g)(l+=""+n[g]+"" ,l+="";માટે(var _=0,p=i.length;p>_;++_)(o=i[_].title.$t;for(var w=0,u=i [_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel)(c=i[_].link[w].href; બ્રેક)માટે(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+="

  • "+o.replace(/ \%new\%$/,"")+""+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"
  • "))l+="")t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config .containerId+" .toc-હેડર").ક્લિક(function())($(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc - હેડર").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").આગળ ( ).slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down)))).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config. slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down));var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"" ) +"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function() )( c.appendChild(i)):e.setTimeout(function())(c.appendChild(i)),toc_config.delayLoading))(window,document);



    તમે તરત જ સમગ્ર કોડની નકલ કરી શકો છો. પર જાઓ બ્લોગ એડમિન પેનલ - પૃષ્ઠ ટેબ - પૃષ્ઠ બનાવો. પૃષ્ઠ સંપાદકમાં તરત જ HTML મોડ પર સ્વિચ કરો, કૉપિ કરેલ કોડ પેસ્ટ કરો અને પ્રકાશિત કરો.

    બસ, તમારે બીજું કંઈ કરવાની જરૂર નથી. આ તમારા બ્લોગ ફીડ દ્વારા જનરેટ થાય છે. કોડમાં મેં સામાન્ય પૃષ્ઠભૂમિ રંગને ગ્રે તરીકે પ્રકાશિત કર્યો છે, પરંતુ તમે તેને સરળતાથી ઇચ્છિત રંગમાં બદલી શકો છો. જો કે, અન્ય ઘણી શૈલીઓની જેમ અહીં રંગો છે - ફોન્ટ, બોર્ડર્સ, પડછાયાઓ, વગેરે.

    ઝડપી, સરળ, અનુકૂળ, સુંદર.

    હું તમને બધાને શુભેચ્છા પાઠવું છું અને તમને જલ્દી મળીશ.

    નવી ચીટ શીટ્સ પર સબ્સ્ક્રાઇબ કરો


    ફોટોશોપ, જિમ્પ અને અન્ય જેવા ગ્રાફિક્સ પ્રોગ્રામ્સનો ઉપયોગ કરીને, તમે GIF ફોર્મેટમાં એનિમેટેડ છબીઓ બનાવી શકો છો. આ લેખમાં હું તમને બતાવવા માંગુ છું કે CSS3 અને Javascript નો ઉપયોગ કરીને ટેક્સ્ટ અને છબીઓમાંથી ઝબકતા તત્વો કેવી રીતે બનાવવું.

    જાવાસ્ક્રિપ્ટ કરતાં CSS3 પસંદ કરવું વધુ સારું છે, કારણ કે તે બ્રાઉઝર પૃષ્ઠ ખોલવાની પ્રક્રિયાને નોંધપાત્ર રીતે ધીમું કરતું નથી. ચોક્કસ ફકરાને પ્રકાશિત કરવા માટે અથવા અમુક તત્વ પર ક્લિક કરવાનું ઉત્તેજન આપવા માટે આ સેટિંગ રસપ્રદ હોઈ શકે છે.

    સ્પષ્ટતા માટે, હું પોસ્ટને 4 વિભાગોમાં વહેંચીશ:


    CSS નો ઉપયોગ કરીને ઇમેજને ફ્લેશ કરવી
    Javascript નો ઉપયોગ કરીને ફ્લેશિંગ ટેક્સ્ટ
    Javascript નો ઉપયોગ કરીને ફ્લેશિંગ ઈમેજ

    વ્યક્તિગત જરૂરિયાતો માટે, તમે લિંક્સ પણ ઉમેરી શકો છો.

    ફેસબુક પેજમાં જોડાઓ બ્લોગર ચીટ શીટ્સ

    .blink_text(
    એનિમેશન:1s બ્લિન્કર રેખીય અનંત;
    રંગ: #00f;
    ફોન્ટ-સાઇઝ:18px;
    ફોન્ટ-વજન:બોલ્ડ;
    }
    .blink_text a (રંગ:#f00;)
    @keyframes બ્લિંકર (
    0% (અપારદર્શકતા: 1.0; )
    50% (અપારદર્શકતા: 0.0;)
    100% (અપારદર્શકતા: 1.0; )
    }

    તે મુજબ https://www.facebook.com/ViktoriyBarad/ પૃષ્ઠનું ટેક્સ્ટ અને સરનામું બદલો.

    આ લખાણ શૈલીઓ છે

    રંગ: #00f;
    ફોન્ટ-સાઇઝ:18px;
    ફોન્ટ-વજન:બોલ્ડ;

    એનિમેશન સમય 1 સેકન્ડ પર સેટ છે (કસ્ટમાઇઝ કરવા યોગ્ય)

    2. પર ફ્લેશિંગ ચિત્રનું ઉદાહરણ CSS

    હું ટ્વિટર પર છું


    કોડ

    http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png " />

    .blink_text(
    એનિમેશન:1s બ્લિન્કર રેખીય અનંત;
    }
    @keyframes બ્લિંકર (
    0% (અપારદર્શકતા: 1.0; )
    50% (અપારદર્શકતા: 0.0;)
    100% (અપારદર્શકતા: 1.0; )
    }

    સેટિંગ્સ સમાન છે - તમારું સરનામું અને png ફોર્મેટમાં એક ચિત્ર.

    હવે ચાલો જોઈએ કે javascript નો ઉપયોગ કરીને સમાન અસરો કેવી રીતે અમલમાં મૂકવી.

    1. જાવાસ્ક્રિપ્ટમાં ફ્લેશિંગ ટેક્સ્ટ


    બ્લોગરની ચીટ શીટ્સ પર સબ્સ્ક્રાઇબ કરોફંક્શન blink_one() ( document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700; ) ફંક્શન blink_two() ( document.getElementById("blink").સ્ટાઈલ. visibility="hidden"; setTimeout("blink_one()",700 ) blink_one();

    તેને તમારા ફીડ એડ્રેસ પર બદલો અને તમારું ટેક્સ્ટ લખો.

    સંબંધિત પ્રકાશનો