بسم الله الرحمن الرحيم
اقدم لكم اليوم كود css يحبه الكثير ويبحث عنه ايضا الكثير
هو مَيَلان وتكبير وتوضيح الصور عند مرور المؤشر عليها
فقط يعمل على الصورة التي ترتبط بوصلة
لا املك مثال مباشر
صورة متحركة
الكود
رمز Code:
a {
color: transparent;
-webkit-text-stroke: 1px rgba(0,0,0,0.2);
font-family: Droid Sans, sans-serif;
font-weight: bold;
}
a:hover {
-webkit-text-stroke: 0;
color: transparent;
-webkit-background-clip: text;
background-color: rgba(82,96,117,0.5);
text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-transition: text-shadow .1s ease-out,
background-color .2s ease-out;
}
a:focus {
outline: none;
}
* { word-wrap: break-word; }
a img {
opacity: 0.8;
-webkit-transition: all 0.2s ease-out;
}
a:hover img {
opacity: 1;
-moz-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1.05) rotate(2deg);
ملاحظة : لا يعمل مع انترنت اكسبلورر !
شرح التركيب:-
بالنسبة للفي بي
قم بوضعه في تعاريف css الاضافية
بالنسبة لديسكاز
قم بوضعه اسفل ملف common.css وحدث الكاش
:icon31:
اقدم لكم اليوم كود css يحبه الكثير ويبحث عنه ايضا الكثير
هو مَيَلان وتكبير وتوضيح الصور عند مرور المؤشر عليها
فقط يعمل على الصورة التي ترتبط بوصلة
لا املك مثال مباشر
صورة متحركة
الكود
رمز Code:
a {
color: transparent;
-webkit-text-stroke: 1px rgba(0,0,0,0.2);
font-family: Droid Sans, sans-serif;
font-weight: bold;
}
a:hover {
-webkit-text-stroke: 0;
color: transparent;
-webkit-background-clip: text;
background-color: rgba(82,96,117,0.5);
text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-transition: text-shadow .1s ease-out,
background-color .2s ease-out;
}
a:focus {
outline: none;
}
* { word-wrap: break-word; }
a img {
opacity: 0.8;
-webkit-transition: all 0.2s ease-out;
}
a:hover img {
opacity: 1;
-moz-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1.05) rotate(2deg);
ملاحظة : لا يعمل مع انترنت اكسبلورر !
شرح التركيب:-
بالنسبة للفي بي
قم بوضعه في تعاريف css الاضافية
بالنسبة لديسكاز
قم بوضعه اسفل ملف common.css وحدث الكاش
:icon31:
الصور المرفقة
