CSS3 உடன் வலைப்பக்கங்கள் கூறுகள் மங்காது மற்றும் அவுட் செய்ய

CSS3 மாற்றங்கள் நல்ல ஃபேட் விளைவுகள் உருவாக்க

வலை வடிவமைப்பாளர்கள் நீண்டகாலமாக காட்சிக்கு வந்தபோது அவர்கள் உருவாக்கிய பக்கங்கள் மீது அதிகமான கட்டுப்பாட்டைக் கொண்டிருந்தனர். CSS3 இல் அறிமுகப்படுத்தப்பட்ட புதிய பாங்குகள் இணைய நிபுணர்களுக்கு தங்கள் பக்கங்களுக்கு ஃபோட்டோஷாப் போன்ற விளைவுகளை சேர்க்கும் திறனை வழங்கின. இதில் துளி நிழல்கள் மற்றும் ஒளிர்வுகள் , வட்ட முனைகள் மற்றும் இன்னும் பல அம்சங்களும் அடங்கும். CSS3 ஆனது அனிமேஷன் போன்ற அம்சங்களை அறிமுகப்படுத்தியது, இது தளங்களில் நல்ல செயல்திறனை உருவாக்க பயன்படுகிறது.

நீங்கள் CSS3 பயன்படுத்தி உங்கள் வலைத்தளத்தில் கூறுகளை சேர்க்க முடியும் ஒரு மிக நல்ல காட்சி விளைவு அவர்கள் ஒளிபுகா மற்றும் மாற்றம் பண்புகள் இணைந்து பயன்படுத்தி மங்காது மற்றும் வெளியே செய்ய உள்ளது. இது ஒரு பார்வையாளர் ஏதாவது செய்யும்போது கவனம் செலுத்துகையில், அந்த உறுப்பு மீது சுற்றுகிறது போல், உங்கள் பக்கங்களை மேலும் ஊடாடும் வகையில் உருவாக்கக்கூடிய ஒரு எளிய மற்றும் நன்கு ஆதரவு வழிமுறையாகும்.

உங்கள் வலை பக்கங்களில் உள்ள பல்வேறு உறுப்புகளுடனான இந்த ஊடாடும் காட்சி விளைவைச் சேர்க்க எவ்வளவு எளிது என்பதைப் பார்ப்போம்.

ஹோவர் மீது மாற்று தன்மையை மாற்றுக

ஒரு வாடிக்கையாளர் அந்த உறுப்பு மீது ஏற்றி போது ஒரு படத்தை ஒளிபுகாநிலையை மாற்ற எப்படி பார்க்க தொடங்குவோம். இந்த எடுத்துக்காட்டுக்கு (HTML கீழே காட்டப்பட்டுள்ளது) நான் greydout வர்க்கம் பண்புடன் ஒரு படத்தை பயன்படுத்துகிறேன்.

அதை வெளியே கிரியேட்டட் செய்ய, நாங்கள் எங்கள் CSS நடைதாளுடன் பின்வரும் பாணி விதிகள் சேர்க்க:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ஒளிபுகாநிலை: 0.25;
}

இந்த ஒளிர்வு அமைப்புகள் 25% வரை மொழிபெயர்க்கப்படுகின்றன. அதன் பொருள் அதன் சாதாரண வெளிப்படைத்தன்மையின் 1/4 என காட்டப்படும். எந்த வெளிப்படைத்தன்மையுடனும் முழுமையாக ஒபாமா 100% இருக்கும் போது 0% முற்றிலும் வெளிப்படையானதாக இருக்கும்.

அடுத்து, படத்தை சுட்டி காட்டினால் தெளிவான (அல்லது முற்றிலும் துல்லியமாக, முழுமையாக ஒளிபுகா ஆக) செய்ய, நீங்கள் சேர்க்க வேண்டும்: மிதவை போலி வர்க்கம்:

. கிரெடிட்: ஹோவர் {
-webkit-opacity: 1;
-moz-opacity: 1;
ஒளிர்வு: 1;
}

இந்த உலாவிகளின் பழைய பதிப்புகளுக்கு பின்தங்கிய இணக்கத்தன்மையை உறுதிப்படுத்துவதற்காக, இந்த எடுத்துக்காட்டுகளுக்கு, விதிமுறைகளின் முன்னுரிமை பதிப்புகளைப் பயன்படுத்துகிறேன் என்பதை நீங்கள் கவனிப்பீர்கள். இந்த ஒரு நல்ல நடைமுறையில் போது, ​​உண்மையில் ஒளிபுகா ஆட்சி இப்போது உலாவிகளில் ஆதரவு மற்றும் அது அந்த விற்பனையாளர் முன்னொட்டு வரிகளை கைவிட மிகவும் பாதுகாப்பானது என்று ஆகிறது. இருப்பினும், பழைய உலாவி பதிப்புகளுக்கான ஆதரவை உறுதிப்படுத்த விரும்பினால், இந்த முன்னொட்டுகளை சேர்க்கக்கூடாது. சாதாரணமான, பிரம்மாண்டமான பதிப்பில் பாணியில் முடிவெடுக்கும் சிறந்த நடைமுறையை பின்பற்றுவதை உறுதி செய்யுங்கள்.

நீங்கள் ஒரு தளத்தில் இந்த வரிசைப்படுத்தியிருந்தால், இந்த ஒத்த தன்மை சரிசெய்தல் மிகவும் திடீரென்று மாற்றமடைவதை நீங்கள் காணலாம். முதலில் அது சாம்பல் தான், பின்னர் அந்த இருவருக்கும் இடையில் இடைக்கால மாநிலங்கள் இல்லை. ஒரு ஒளி சுவிட்ச் போல - அல்லது அணை. இது உங்களுக்கு என்னவாக இருக்கலாம், ஆனால் நீங்கள் படிப்படியாக மாற்றக்கூடிய ஒரு மாற்றத்துடன் முயற்சிக்கலாம்.

ஒரு நல்ல விளைவு சேர்க்க மற்றும் படிப்படியாக இந்த மங்கல் செய்ய, நீங்கள் மாற்றம் சொத்து சேர்க்க வேண்டும்.

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ஒளிபுகாநிலை: 0.25;
-webkit- மாற்றம்: அனைத்து 3s எளிதாக;
-எம்ஒஸ்-மாற்றம்: அனைத்து 3s எளிதாக;
-ms-transition: அனைத்து 3s எளிதாக;
-ஓ-மாற்றம்: அனைத்து 3s எளிதாக;
மாற்றம்: அனைத்து 3s எளிதாக;
}

இந்த குறியீட்டுடன் மாற்றம் திடீரென்று மாறாமல் மாறாமல் மாறுகிறது.

மீண்டும் ஒரு முறை விற்பனையாளர் முன்னுரிமை விதிகளை இங்கே பயன்படுத்துகிறோம். மாற்றம் ஒத்த தன்மைக்கு துணைபுரிவதில்லை, எனவே இந்த முன்னுரிமைகள் புரியும்.

தொடுதிரை சாதனங்களுக்கு "மிதவை" இல்லை, எனவே இந்த விளைவுகள் அடிக்கடி ஒரு மொபைல் போன் போன்ற ஒரு தொடுதிரை சாதனம் பயன்படுத்தி எவரையும் இழக்கின்றன. மாற்றம் அடிக்கடி நிகழும், ஆனால் அது உண்மையில் மிக விரைவாக நிகழும். இது ஒரு நல்ல போனஸ் விளைவாக நீங்கள் சேர்க்கிறீர்கள் என்றால் நன்றாக இருக்கும், ஆனால் புரிந்து கொள்ள வேண்டிய உள்ளடக்கத்திற்கு காண வேண்டிய எந்த மாற்றத்தையும் தவிர்க்கவும்.

மறைதல் அநேகமாக சாத்தியம்

நீங்கள் ஒரு மறைந்த படத்தை தொடங்க வேண்டும், நீங்கள் ஒரு முழு ஒளிபுகா படத்தை இருந்து மங்கி மாற்றங்கள் மற்றும் ஒளிபுகா பயன்படுத்த முடியும். ஒரே படத்தைப் பயன்படுத்தி, ஒரேவொரு பக்கத்தோடு மட்டுமே:

வர்க்கம் = "withfadeout">

முன் போலவே, நீங்கள் பயன்படுத்தி தன்மை மாற்ற: மிதவை தேர்வுக்குழு:

.withfadeout {
-வெப்கிட்-மாற்றம்: அனைத்து 2s எளிதில் வெளியே;
-எம்ஓஸ்-மாற்றம்: அனைத்து 2s இன்-இன்-அவுட்;
-ms-transition: அனைத்து 2s எளிதில் வெளியே;
-ஓ-மாற்றம்: அனைத்து 2s எளிதில் வெளியே;
மாற்றம்: அனைத்து 2s எளிதில் வெளியே;
}
.withfadeout: மிதவை {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ஒளிபுகாநிலை: 0.25;
}

இந்த எடுத்துக்காட்டில், படத்தை முழுமையாக ஒளியேற்றுவதில் இருந்து ஓரளவு வெளிப்படையானது - எங்கள் முதல் எடுத்துக்காட்டின் தலைகீழ்.

படங்களை அப்பால் போகிறது

நீங்கள் படங்களை இந்த காட்சி மாற்றங்கள் மற்றும் மங்கல்கள் விண்ணப்பிக்க முடியும் என்று சிறந்த, ஆனால் நீங்கள் இந்த CSS விளைவுகள் படங்களை பயன்படுத்தி மட்டுமே அல்ல. நீங்கள் கிளிக் மற்றும் நடைபெற்ற போது மங்காது என்று CSS பாணியில் பொத்தான்கள் எளிதாக செய்ய முடியும். நீங்கள் பயன்படுத்தி ஒளிபுகாநிலையை அமைக்க வேண்டும்: செயலில் போலி வர்க்கம் மற்றும் பொத்தானை வரையறுக்கும் வர்க்கம் மாற்றம் வைத்து. என்ன நடக்கிறது என்பதைப் பார்க்க இந்தப் பொத்தானை கிளிக் செய்து வைத்திருங்கள்.

முக்கியமாக எந்தவொரு காட்சி உறுப்பு மங்கலாகவோ அல்லது சொடுக்கும் போது அது மங்கலாக இருக்கலாம். இந்த எடுத்துக்காட்டுக்கு நான் சொடுக்கும் போது உரை மற்றும் வண்ணத்தின் ஒளிபுகாநிலையை மாற்றுவேன். இங்கே CSS:

# என்டிவி {
அகலம்: 280px;
பின்னணி-நிறம்: # 557A47;
வண்ணம்: # dfdfdf;
திணிப்பு: 10px;
-webkit-transition: அனைத்து 4s எளிதாக வெளியே 0s;
-moz-transition: அனைத்து 4s எளிதாக்க 0 கள்;
-ms-transition: அனைத்து 4s எளிதாக்கு 0 கள்;
-ஓ-மாற்றம்: அனைத்து 4s எளிதாக வெளியே 0s;
மாற்றம்: அனைத்து 4s எளிதாக வெளியே 0s;
}
# mdiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
ஒளிபுகாநிலை: 0.25;
நிறம்: # 000;
}

வழிசெலுத்தல் மெனுக்கள் பின்னணி நிறங்கள் மறைதல் இருந்து நன்மை முடியும்

இந்த எளிய வழிசெலுத்தல் மெனுவில் பின்னணி வண்ணம் பட்டி உருப்படிகளில் மெதுவாக மெதுவாக வெளியே வந்துவிடும். இங்கே HTML:

• • முகப்பு
  • • CSS3 பயிற்சிகள்
    • • CSS3 பண்புகள்

இங்கே CSS:

ul # sampleNav {list-style: none; }
உல் # sampleNav li {
காட்சி: இன்லைன்;
மிதவை: இடது;
திணிப்பு: 5px 15px;
விளிம்பு: 0 5px;
-வெப்கிட்-மாற்றம்: அனைத்து 2s நேரியல்;
-எம்ஒஸ்-மாற்றம்: அனைத்து 2s நேரியல்;
-ms-transition: அனைத்து 2s நேரியல்;
-ஓ-மாற்றம்: அனைத்து 2s நேரியல்;
மாற்றம்: அனைத்து 2s நேரியல்;
}
உல் # sampleNav li a {text-decoration: none; }
உல் # sampleNav li: hover {
பின்புல வண்ணம்: # DAF197;
}

உலாவி ஆதரவு

நான் ஏற்கனவே ஒரு சில முறை தொட்டது போல், இந்த பாணியை மிகவும் நல்ல உலாவி ஆதரவு, எனவே நீங்கள் எந்த trepidation இல்லாமல் அவற்றை பயன்படுத்த தயங்க வேண்டும். இண்டர்நெட் எக்ஸ்ப்ளோரரின் மிக பழைய பதிப்புகளில் இது விதிவிலக்கு மட்டுமே. ஆனால் மைக்ரோசாப்டின் சமீபத்திய முடிவானது IE இன் அனைத்து பதிப்புகளுக்கும் 11 க்கு குறைவாக இருப்பதால், இந்த பழைய உலாவிகளில் சிக்கல் குறைவாகவும் குறைவாகவும் மாறியுள்ளது - மற்றும் பழைய உலாவி இந்த ஃபேட் மாற்றம் பார்க்க, அது ஒரு பெரிய பிரச்சனையாக இருக்கக்கூடாது. நீங்கள் அனுபவமிக்க பரஸ்பரங்களுக்கு இந்த வகையான விளைவுகளைச் சிறப்பித்துக் கொண்டிருக்கும் வரை, செயல்பாட்டை இயக்கவோ அல்லது முக்கிய உள்ளடக்கத்தை வெளிப்படுத்தவோ தங்கியிருக்காத வரை, விளைவுகளை ஆதரிக்காத பழைய உலாவிகள் குறைந்த அனுபவத்தை அனுபவிக்கும், ஆனால் அந்த உலாவிகளில் உள்ள பயனர்கள் கூட வித்தியாசத்தை தெரிந்து கொள்ளுங்கள், குறிப்பாக தளத்தை சாதாரணமாகப் பயன்படுத்தலாம் மற்றும் அவற்றிற்குத் தேவையான தகவல்களைப் பெறலாம்.

கூடுதல் வேடிக்கை; இரண்டு படங்கள் இடமாற்றம்

ஒரு படத்தை இன்னொரு படத்தில் எப்படி மாற்றுவது என்பது ஒரு உதாரணம். HTML ஐப் பயன்படுத்தவும்:

மற்றும் பிற முழுமையாக ஒளிபுகா இருக்கும் போது CSS முழுமையாக ஒரு வெளிப்படையான செய்யும் மற்றும் பின்னர் மாற்றம் இரண்டு மாற்றுகிறது:

.swapMe img {-webkit-transition: அனைத்து 1s எளிதில்-வெளியே-வெளியே; -எம்ஓஸ்-மாற்றம்: அனைத்து 1-கள் எளிதில் வெளியேற்றம்; -ms-transition: அனைத்து 1s எளிதில் வெளியே; -ஓ-மாற்றம்: அனைத்து 1s எளிதில் வெளியே; மாற்றம்: அனைத்து 1 இன் எளிதில் வெளியே; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; ஒளிர்வு: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; ஒளிர்வு: 0; }