سایه دار کردن متن با سی اس اس ۳ و jQuery

نویسنده متا, بعد از ظهر 21:37:49 - 01/31/22

« خطا در بانک اطلاعاتی: Field 'topic_note' doesn't have a default value | ایجاد متن سایه دار با CSS »

0 اعضا و 1 مهمان درحال دیدن موضوع.

چاپ صفحه
پایین صفحه1
اقدامات کاربر

متا

بعد از ظهر 21:37:49 - 01/31/22
سایه دار کردن متن با سی اس اس ۳ و jQuery - CSS 3 - برای انجام کار اول محتویات  jQuery را از  اینجا دانلود کنید

شما باید jQuery و فایل JS را در بالای قسمت </body> قرار دهید.
کد [انتخاب]
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

<script src="js/longShadow/jquery.longShadow.js"></script>

پس از قرار دادن این فایل در سایت، کد jQuery را با گزینه هایی که با دستور  shadow سازگار هست را باید بنویسید. در دمو از گزینه های colorShadow، sizeShadow و directionShadow با مقادیر زیر استفاده کردیم:
کد [انتخاب]
$('#shadow-bottom').longShadow({

       colorShadow: '#FFFF84',

       sizeShadow: 40,

       directionShadow: 'bottom-left'

   });

مثال shadow:

کد [انتخاب]
  <span class= "shadow-demo" id="shadow-bottom">S</span>

                    <span class= "shadow-demo" id="shadow-bottom2">H</span>

                    <span class= "shadow-demo" id="shadow-bottom3">A</span>

                    <span class= "shadow-demo" id="shadow-bottom4">D</span>

                    <span class= "shadow-demo" id="shadow-bottom5">O</span>

                    <span class= "shadow-demo" id="shadow-bottom6">W</span>


<style> section:
کد [انتخاب]
.shadow-demo {

  color: #7D7D00;

  font-family: Verdana;

  font-size: 105px;

  margin:5px;

}

jQuery code:

کد [انتخاب]
$('#shadow-bottom').longShadow({

    colorShadow: '#FFFF84',

    sizeShadow: 40,

    directionShadow: 'bottom-left'

});

$('#shadow-bottom2').longShadow({

  colorShadow: '#E88EB7',

  sizeShadow: 30,

  directionShadow: 'bottom-right'

});

$('#shadow-bottom3').longShadow({

colorShadow: '#FFCB97',

sizeShadow: 30,

directionShadow: 'top-right'

});

$('#shadow-bottom4').longShadow({

   colorShadow: '#FFE6E6',

   sizeShadow: 45,

   directionShadow: 'top'

});

$('#shadow-bottom5').longShadow({

colorShadow: '#CAFFCA',

sizeShadow: 20,

directionShadow: 'left'

});

$('#shadow-bottom6').longShadow({

colorShadow: '#FFFF84',

sizeShadow: 90,

directionShadow: 'right'

});

متا

#1
بعد از ظهر 21:39:00 - 01/31/22
کد تکمیلی که در سایت و قسمت مورد نظر باید قرار داد.


کد [انتخاب]
<!DOCTYPE html>
<html>
<head>
<style>


.shadow-demo li { display: inline-block }

.shadow-demo {
  color: #7D7D00;
  font-family: Verdana;
  font-size: 105px;
  margin:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo of long shadow by jQuery</h3>
    <span class= "shadow-demo" id="shadow-bottom">S</span>
                    <span class= "shadow-demo" id="shadow-bottom2">H</span>
                    <span class= "shadow-demo" id="shadow-bottom3">A</span>
                    <span class= "shadow-demo" id="shadow-bottom4">D</span>
                    <span class= "shadow-demo" id="shadow-bottom5">O</span>
                    <span class= "shadow-demo" id="shadow-bottom6">W</span>


</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="js/longShadow/jquery.longShadow.js"></script>
<script>
$(function() {


$('#shadow-bottom').longShadow({
colorShadow: '#FFFF84',
sizeShadow: 40,
directionShadow: 'bottom-left'
});
            $('#shadow-bottom2').longShadow({
colorShadow: '#E88EB7',
sizeShadow: 30,
directionShadow: 'bottom-right'
});
            $('#shadow-bottom3').longShadow({
colorShadow: '#FFCB97',
sizeShadow: 30,
directionShadow: 'top-right'
});
            $('#shadow-bottom4').longShadow({
colorShadow: '#FFE6E6',
sizeShadow: 45,
directionShadow: 'top'
});
            $('#shadow-bottom5').longShadow({
colorShadow: '#CAFFCA',
sizeShadow: 20,
directionShadow: 'left'
});
            $('#shadow-bottom6').longShadow({
colorShadow: '#FFFF84',
sizeShadow: 90,
directionShadow: 'right'
});


});
</script>

</body>

</html>


نتیجه:
[attachment id=0 msg=23621]
چاپ صفحه
بالا صفحه1
اقدامات کاربر
Tags:

اشتراک پست

Share via facebook Share via linkedin Share via telegram Share via twitter Share via whatsapp

ارسال های مرتبط

https://www.meta4u.com/forum/Themes/Comet/images/post/clip.png
ایجاد متن سایه دار با CSS

نویسنده متا در زبان های برنامه نویسی

0 ارسال
398 مشاهده 		آخرین ارسال: بعد از ظهر 20:03:56 - 01/31/22
توسط متا
https://www.meta4u.com/forum/Themes/Comet/images/post/xx.png
رجیستری کردن برنامه های مدت دار ویندوز بدون استفاده از Keygen خاصی

نویسنده maxim354 در نکات آموزشی

0 ارسال
2338 مشاهده 		آخرین ارسال: قبل از ظهر 11:45:07 - 12/30/11
توسط maxim354
https://www.meta4u.com/forum/Themes/Comet/images/post/clip.png
متن زیبا در وصف مادر

نویسنده guld118 در مطالب جالب ،خواندنی و آموزنده

0 ارسال
1658 مشاهده 		آخرین ارسال: بعد از ظهر 18:06:49 - 08/25/17
توسط guld118
https://www.meta4u.com/forum/Themes/Comet/images/post/xx.png
کلیه موسیقی های متن فیلم و سریال ها در این بخش

نویسنده Amir Shahbazzadeh در سینما ، تئاتر و موسیقی

0 ارسال
1648 مشاهده 		آخرین ارسال: بعد از ظهر 15:32:01 - 06/10/11
توسط Amir Shahbazzadeh
https://www.meta4u.com/forum/Themes/Comet/images/post/xx.png
(مقاله)متن کامل طرح پیش نویس قانون جامع وكالت

نویسنده Amir Shahbazzadeh در مقالات حقوق و علوم سیاسی

2 ارسال
2742 مشاهده 		آخرین ارسال: بعد از ظهر 20:45:24 - 07/28/11
توسط Amir Shahbazzadeh
https://www.meta4u.com/forum/Themes/Comet/images/post/clip.png
مديريت پسوردها (رمزها) با دانلود برنامه متن باز و قدرتمند KeePass 1.21

نویسنده Hooman Ghayouri در نرم افزار کاربردی, Utility Softwares

0 ارسال
1682 مشاهده 		آخرین ارسال: بعد از ظهر 21:20:58 - 10/13/11
توسط Hooman Ghayouri
https://www.meta4u.com/forum/Themes/Comet/images/post/xx.png
” یک اتفاق بد “ (داستان خنده دار)

نویسنده Zohreh Gholami در مطالب طنز و کمدی

0 ارسال
1376 مشاهده 		آخرین ارسال: قبل از ظهر 07:39:34 - 06/29/11
توسط Zohreh Gholami