د CSS3 لیږدونه د غوره فیډ اغیزونه جوړ کړئ
د ویب ډیزاینرانو اوږدې اوږدې پاڼې درلودې هغه پاڼې چې غوښتل یې جوړ شوي و، کنټرول وغواړئ چې سی ایس ایس3 په دې ځای ډزې وکړې. په CSS3 کې وړاندې شوي نوي ډولونه ویب پاڼې ته د فوتوشاپ - مثبته اغیزو اضافه کولو لپاره د دوی پاڼې ته ورکړ. پدې کې ځانګړتیاوې لکه سایټونه او څراغونه ، ګردي کانټینرونه، او نور شامل دي. CSS3 هم د انډیزیز-اغیزې اغیزې پېل کړې چې په ساحو کې د ښې لاسوهنې د رامنځته کولو لپاره کارول کیدی شي.
یو ډیر ښه بصری اغیزه چې تاسو کولی شئ په ویب پاڼه کې د CSS3 په کارولو سره عناصرو ته اضافه کړئ د دوی د لیرې کولو او لیږد لپاره د ملکیتونو د ګډولو په کارولو سره دوی ته په غوټۍ کې ننوتل . دا یو آسانه او ښه ملاتړ دی چې ستاسو پاڼو پاڼې د لیرې شوي سیمو جوړولو له لارې نور انټرنیټ رامنځته کړئ کوم چې تمرکز ته راځي کله چې د سایټ لیدونکي یو څه کوي، لکه څنګه چې په دې عنصر باندې تیریږي.
راځئ چې یو څه وګورو چې ستاسو د ویب پاڼې په مختلفو عناصرو کې د دې لاسوهنه اغیزه اغیزه اضافه کول څومره اسانه ده.
په هور کې د دوامداره تغیر بدل کړئ
موږ به د لیدلو په لټه کې یو چې څنګه د انځور ناڅاپي بدلون بدل کړو کله چې یو پیرودونکی د دې عنصر په سر کې ځوروي. د دې بېلګې لپاره (لاندې HTML په لاندې ډول ښودل شوی) زه د یوټیوټ د کلاس خاصیت سره یو عکس کاروم.
د دې خوندیتوب لپاره، موږ د سی ایس ایس شیلیف پاڼې لپاره لاندې طرزالعملونه اضافه کوو:
.greydout {
د وړتیا لوړتیا: 0.25؛
-Moz-opacity: 0.25؛
دوامداره: 0.25؛
}
دا د ناپیلتیا ترتیبات 25٪ ته ژباړل کیږي. دا پدې مانا لري چې عکس به د هغې نورمال شفافیت 1/4 ښودل کیږي. په بشپړ ډول ناڅاپي به شفافیت سره 100٪ وي او 0٪ به په بشپړ ډول شفاف وي.
وروسته، د انځور جوړولو لپاره واضح کړئ (یا نور سمه ده، چې په بشپړه توګه ناپاک شي) کله چې مږک په هغې باندې تیریږي، نو تاسو به یې اضافه کړئ: هور موډرو کلاس:
.greydout: hover {
د وړتیا وړتیا: 1؛
-موز - استحکام: 1؛
ناڅاپي: 1؛
}
تاسو به په یاد ولرئ چې د دې مثالونو لپاره زه د حکومتوالي د پلورونکي نسخه کارولو څخه کار اخلم ترڅو د براؤزرونو زاړه نسخو لپاره د مخاطب مطابقت تضمین شي. پداسې حال کې چې دا یو ښه عمل دی، حقیقت دا دی چې د افشاء کولو قواع اوس د غوره کونکي لخوا ملاتړ کیږي او دا د دې پلورونکي وړاندیز شوي لینونو د پری کولو لپاره خورا خوندي دي. بیا هم، دلته هیڅ ډول دلیل شتون نلري چې دا لومړیتوبونه پکې شامل کړئ که تاسو غواړئ د زاړه براؤزر نسخو لپاره ملاتړ یقیني کړئ. بس ډاډ ترلاسه کړئ چې د اعلامیې پای ته رسولو لپاره د منلو وړ غوره عمل تعقیب د اندازې نورمال، غیر غیرقانوني بڼه سره.
که تاسو دا په یوه سایټ کې ځای پرځای کړي، نو تاسو به وګورئ چې د ناامني تنظیم کول یو ناڅاپي بدلون دی. لومړی دا سپینه ده او بیا دا د دوی دواړو ترمنځ منځمهاله دولتونو سره نده. دا د روښنايي سویچ په څیر دی. دا ممکن هغه څه وي چې تاسو یې غواړئ، مګر تاسو کولی شئ د بدلون سره تجربه وغواړئ چې ډیر تدریجي وي.
د یوې ښې ښې اغېزې د زیاتولو لپاره او دا تدریجي تدریجي بڼه جوړ کړئ، تاسو غواړئ د لیږد ملکیت د .greydout کلاس ته اضافه کړئ:
.greydout {
د وړتیا لوړتیا: 0.25؛
-Moz-opacity: 0.25؛
دوامداره: 0.25؛
د واک لیږد: ټول 3 آسانتیاوې؛
- د انتقال لیږد: ټول 3 آسانتیاوې؛
د انتقال لیږد: ټول 3 آسانتیاوې؛
د انتقال لیږد: ټول 3 آسانتیاوې؛
انتقال: ټول 3 آسانتیاوې؛
}
د دې کوډ سره، بدلون به په تدریجي توګه بدلون ومومي بلکه په ناڅاپه توګه بدلون راوستل کیږي.
یوځل بیا، موږ دلته یو شمیر پلورونکي وړاندیز شوي قوانین کاروو. د لیږد بهیر د توقیف په څیر هم ملاتړ ندی شوی، نو دا ضمیمه معنی لري.
د یادولو لپاره یو شی چې تاسو د دغو خبرو اترو پالن کولو لپاره دا دی چې د ټویچ اسیرونه د "هور" حالت نلري، نو دا اغیز اکثرا په هر چا د ټچ سکرین اسباب په څیر د ګرځنده تلیفون په کارولو سره له لاسه ورکوي. لیږد به اکثرا پیښ شي، مګر دا په چټکۍ سره کیږي چې دوی واقعا لیدل کیدی نشي. دا سمه ده که تاسو دا د بونس د ښې ښې اغېزې په توګه اضافه کړئ، مګر د هغه بدلونونو څخه ډډه وکړئ چې د منځپانګې لپاره اړتیا لیدل کیږي.
د منځه وړل ممکن دی
تاسو د جلا جلا انځور سره پیل نه کوئ، تاسو کولی شئ د بشپړ ناپاک انځور څخه لرې کولو لپاره لیږدونې او افادیت څخه کار واخلئ. د ورته انځور کارول، یوازې د یوې طبقې سره.
ټولګي = "بې پرې">
د پخوا په څیر، تاسو د افشاء کولو بدلول د کاروونکي لخوا کارول:
د {
د واک لیږد: ټول 2 د آسانتیا وړ
- د انتقال لیږد: ټول 2 سایټونه آسان دي؛
د انتقال لیږد: ټولې دوه آسانتیاوې؛
د لیږد لیږد: ټولې 2 آسانتیاوې؛
لیږد: ټول 2 سایټ په اسانۍ کې؛
}
په بل ځای کې: هور {
د وړتیا لوړتیا: 0.25؛
-Moz-opacity: 0.25؛
دوامداره: 0.25؛
}
په دې مثال کې، تصویر به په بشپړه توګه د ناڅاپي سیالیو څخه لیږدول شي - زمونږ د لومړي مثال بیرته راګرځیدل.
له انځورونو هاخوا
دا خورا ښه ده چې تاسو کولی شئ دغه انځورونه او انځورونه انځورونو ته وکاروي، مګر تاسو د دې CSS اثراتو سره یوازې د انځورونو کارولو محدود نه یاست. تاسو کولی شو په اسانۍ سره د ایس ایس - ډوله بټونو جوړونه وکړو چې کله ټیکول شوي وي او ساتل کیږي. تاسو به یوازې د فعال فعالینو په کارولو سره افراطي تنظیم کړئ او هغه ټولګی ته لیږد وکړئ چې تڼۍ مشخصوي. دا تڼۍ کلیک وکړئ او وګورئ چې څه پیښ شي.
دا ممکنه ده چې په اصولو کې کوم ډول بصری عنصر پاک کړئ کله چې پرانستل شوي یا ټک وکړئ. په دې مثال کې زه د ډېری ناڅاپي او د متن رنګ د بدلون په وخت کې کله چې مږک په هغې کې بدلون ومومي. دلته سی ایس ایس دی:
#mydiv {
چوکۍ: 280px؛
شاليد رنګ: # 557A47؛
رنګ: #dfdfdf؛
ګنډل: 10px؛
د واک لیږد: ټولې 4s آسانتیاوې 0؛
د بهرنیو چارو لیږد: ټولې 4s آسانتیاوې 0؛
د لیږد لیږد: ټولې 4s آسانتیاوې؛
د لیږد بهیر: ټولې 4s آسانتیاوې؛
لیږد: ټولې 4s آسانتیاوې 0s؛
}
#mydiv: هور {
د وړتیا لوړتیا: 0.25؛
-Moz-opacity: 0.25؛
دوامداره: 0.25؛
رنګ: # 000؛
}
د نیویګریشن میډیا د مخنیوی د رنګونو څخه ګټه پورته کولی شي
په دې ساده نیویارک کې مینو کې د پس منظر رنګ په ورو او په بهر کې د مینو مینځیو توکو په څیر مایع دی. دلته HTML دی:
- کور
- CSS3 سبقونه
- CSS3 ځانګړتیاوې
او دلته دا سی ایس ایس دی:
ul # sampleNav {لړم ډول: هیڅ نه }
ul # sampleNav li {
ښودنه: انډول
لوټ
ډډنگ: 5px 15px؛
margin: 0 5px؛
د واک لیږد: ټول دوه ثانوي لیکنه؛
د بهرنیو چارو لیږد: ټول دوه لینګونه؛
د انتقال لیږد: ټول دوه لینګونه؛
د لیږد لیږد: ټول 2 لینکرین؛
لیږد: ټول دوه لینار؛
}
ul # sampleNav li a {د متن ډیزاین: none؛ }
ul # sampleNav li: hover {
شاليد رنګ: # DAF197؛
}
د لټون ملاتړ
لکه څنګه چې ما د مخه څو ځلې تیری کړی، دا ډول ډول ډول برائوزر ملاتړ لري، نو تاسو باید د هغوی د کارولو پرته د هغوی د کارولو احساس وکړئ. یواځې د انټرنیټ اکسپورر خورا لوی نسخې دي، مګر د مائیکروسافټ وروستي پریکړه د 11 څخه لاندې د ټولو ټولو نسخو لپاره ملاتړ پای ته رسوي، دا پخوانۍ براؤزرونه لږ او د یوې مسالې څخه راټیټ دي - او په حقیقت کې، که یو پخوانی براؤزر نه وي دا لیرې لیږد وګورئ، دا باید لویه ستونزه ونه وي. تر هغه وخته چې تاسو دا ډول اغېزې په خوندیتوب سره تعقیب کړئ او د هغوی فعالیت ته د فعالیت کولو یا د کلیدي محتوا څرګندولو لپاره تکیه مه کوئ، نو هغه پخوانی براؤزر چې د تاثیراتو مالتړ نه کوي د لږ خوړو وړ تجربه به ترلاسه کړي، مګر د دوی ګازو کارونکو به حتما نه وي توپیر پیژنئ، په ځانګړي ډول که چیرې دا سایټ د عادي په توګه کاروي او هغه معلومات ترلاسه کړي چې دوی ورته اړتیا لري.
اضافي تفریح؛ دوه انځورونه بدل کړئ
دلته یوه بیلګه ده چې څنګه یو بل انځور په بله بڼه وکاروي. د HTML څخه کار واخلئ:
او سی ایس ایس کوم چې یو بشپړ شفاف دی پداسې حال کې چې بل بشپړ بشپړ ناپاک دی او بیا لیږد دوه لیږد لري:
.swapMe ایمیل {د لیږد لیږد: ټول 1 سایټونه؛ د بهرنیو چارو لیږد: ټولې 1 آسانتیاوې؛ - لیږد - ټول: 1 آسانتیاوې؛ لېږد: ټول آسانتیاوې په آسانۍ سره؛ لیږد: ټولې 1 آسانتیاوې؛ } .swap1، .swapMe: هور .swap2 {-webkit-opacity: 1؛ -موز - استحکام: 1؛ ناڅاپي: 1؛ } .swapMe: هور .swap1، .swap2 {-webkit-opacity: 0؛ -موز - استعداد: 0؛ ناڅاپي: 0؛ }