உங்கள் வலைத்தளங்களில் படத்தை எளிதாக சுழலசெய்ய (அனிமேசன்)

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

 CSS3 நிலைமாற்றங்கள் பயன்படுத்தி இந்த விரிவாக்கங்கள் பயன்படுத்தப்பட்டன. இப்போது எளிதாக சுட்டி படத்தை சுழல்கிறது. எளிய படத்தை ஒளிபுகா விளைவை பயன்படுத்தி உங்கள் WordPress அல்லது பிளாகர் வலைப்பதிவுகளுக்கான படங்களை உயிருட்டம் உள்ளதாக மாற்ற முடியும்.





Live Demo

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


CSS3 கொண்டு பிளாகரில் படங்கள் அனிமேட் செய்யும் முறை


1. பிளாகர்> வடிவமைப்பு> திருத்து பக்கத்துக்கு செல்லவும்
2. உங்கள் டெம்ப்ளேட்டை மறுபிரதி எடுத்துக் கொள்ளவும்
3. ]]></b:skin> தேடல்
4. கிழ்கண்ட குறியீட்டை தேடல் குறியீட்டுக்கு மேலே ஒட்டவும்
/* --------- NILAVAITHEDI Image Rotation ----- */ .opacity { opacity: 0.5; margin-left: 50px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .opacity:hover { opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1.3; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; }

• சுழற்சி கோணம் அதிகரிக்க அல்லது குறைக்க bolded மதிப்புகளை திருத்தவும்.

5. உங்கள் டெம்ப்ளேட்டை சேமிக்கவும். முடிந்தது!


இது எவ்வாறு இயங்குகிறது?


இந்த விளைவை செயல்படுத்த விரும்பும் போதெல்லாம், வெறுமனே படங்களை இயக்க அல்லது சுழற்ற, உங்கள் போஸ்ட் எடிட்டர் திருத்த முறையில் பின்வரும் குறியீட்டை சேர்க்க வேண்டும்
<img src="IMAGE LINK HERE" border="0" alt="Image Description here" class="opacity" />
இந்த மாற்றங்களை செய்யவும்:


IMAGE LINK HERE இங்கு பட இணைப்பு மாற்றவும்
 Image Description here இங்கு பட விளக்கம் மாற்றவும். கட்டாயமில்லை!!