CSS3 Transitions შექმნა Nice Fade ეფექტები
ვებ დიზაინერებს დიდი ხნის განმავლობაში უფრო მეტი კონტროლი ჰქონდათ იმ გვერდებზე, რომლებსაც ისინი ქმნიდნენ, როდესაც სენსორული სცენა მოხვდა. ახალი სტილის შემოქმედება CSS3 მისცა ვებ პროფესიონალები უნარი დაამატოთ Photoshop მსგავსი ეფექტები მათი გვერდები. ეს მოიცავდა თვისებებს, როგორიცაა წვეთი ჩრდილები და ტალღები , მრგვალი კუთხეები და სხვა. CSS3 ასევე გააცნო ანიმაციური მსგავსი ეფექტები, რომელიც შეიძლება გამოყენებულ იქნას, რათა შეიქმნას ლამაზი interactivity საიტები.
ერთი ძალიან ლამაზი ვიზუალური ეფექტი შეგიძლიათ დაამატოთ ელემენტები თქვენს ნახვა გამოყენებით CSS3 არის, რათა მათ ქრებოდა და გარეთ გამოყენებით კომბინაცია თვისებები opacity და გარდამავალი. ეს არის მარტივი და კარგად მხარდაჭერილი გზა, რათა თქვენი გვერდები უფრო ინტერაქტიული შექმნით faded ადგილებში, რომ მოვიდეს აქცენტი, როდესაც საიტი სტუმარი აკეთებს რაღაც, ისევე როგორც hovering ამ ელემენტს.
მოდით შევხედოთ რა ადვილია, რომ დაამატოთ ეს ინტელექტუალური ვიზუალური ეფექტი თქვენს ვებ გვერდებზე სხვადასხვა ელემენტებზე.
მოდით შეცვალოს ჰოუტერის შეცვლა
ჩვენ ვიწყებთ იმით, თუ როგორ უნდა შეცვალოთ image of opacity როდესაც მომხმარებელს აქვს hovering ამ ელემენტს. ამ მაგალითისთვის (HTML ნაჩვენებია ქვემოთ) მე ვიყენებ სურათს greydout- ის კლასის ატრიბუტით.
იმისათვის, რომ ეს greyed out, ჩვენ დავამატებთ შემდეგ სტილის წესები ჩვენი CSS სტილის:
.გამძლეობა {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
ეს opacity პარამეტრების თარგმნა 25%. ეს ნიშნავს, რომ გამოსახულება ნაჩვენები იქნება მისი ნორმალური გამჭვირვალობის 1/4. სრულიად გაუმჭვირვალეა, გამჭვირვალობის გარეშე 100% იქნება, ხოლო 0% იქნება სრულიად გამჭვირვალე.
შემდეგი, იმისათვის, რომ გამოსახულება მოვიდა ნათელი (ან უფრო ზუსტად, რომ გახდეს სრულად გაუმჭვირვალე), როდესაც მაუსი არის hovered მასზე, თქვენ დაამატოთ: hover ფსევდო კლასის:
.გამძლეობა: hover {
-ვებრი-გამჭვირვალობა: 1;
-moz-opacity: 1;
opacity: 1;
}
თქვენ შეამჩნევთ, რომ ამ მაგალითებს, მე ვვაჭრობ, რომ გამოიყენოთ გამყიდველი წინა ვერსიები, რათა უზრუნველყოფილ იქნეს ბრაუზერის ძველი ვერსიის უკანასკნელი ვერსიები. მიუხედავად იმისა, რომ ეს არის კარგი პრაქტიკა, რეალობა ის არის, რომ opacity წესი ახლა კარგად არის მხარდაჭერილი ბრაუზერები და ეს საკმაოდ უსაფრთხო ვარდნა იმ გამყიდველი prefixed ხაზები. მიუხედავად ამისა, არ არსებობს მიზეზი, რომ არ შეიცავდეს ამ პრეფიქსებს, თუ გინდათ, რომ უფრო ძველი ბრაუზერის ვერსიების მხარდაჭერა. დარწმუნდით, რომ დაიცავით მიღებული საუკეთესო პრაქტიკის დეკლარაციის დასრულება სტილის ჩვეულებრივი, უპირატესი ვერსიით.
თუ ამ ადგილზე განათავსეთ, დაინახავდით, რომ ეს სისწრაფე კორექტირება ძალიან მკვეთრი ცვლილებაა. პირველი ეს ნაცრისფერია და მაშინ არ არის, არ არსებობს შუალედურ სახელმწიფოებს შორის ორი. ეს არის სინათლის შეცვლა - ან გამორთვა. ეს შეიძლება იყოს ის, რაც გინდა, მაგრამ თქვენ ასევე გვინდა ექსპერიმენტი ცვლილება, რომელიც უფრო თანდათანობით ხდება.
იმისათვის, რომ დაამატოთ მართლაც ლამაზი ეფექტი და ამ Fade თანდათანობით, გსურთ დაამატოთ გარდამავალი ქონება togreydout კლასი:
.გამძლეობა {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-ვებრი-გარდამავალი: ყველა 3-იანი მარტივია;
-moz- გარდამავალი: ყველა 3 განმუხტვა;
-mms- გარდამავალი: ყველა 3 განმუხტვა;
-ა-გარდამავალი: ყველა 3-იანი მარტივია;
გარდამავალი: ყველა 3 განმუხტვა;
}
ამ კოდექსის მიხედვით, ცვლილება თანდათანობით გარდამავალ იქნებოდა, ვიდრე მოულოდნელად გადართვა.
კიდევ ერთხელ, ჩვენ ვიყენებთ რაოდენობის გამყიდველი prefixed წესები აქ. გარდამავალი არ არის ასევე მხარდაჭერილი, როგორც გამჭრიახობა, ამიტომ ეს პრეფიქსები აზრიან.
ერთი რამ უნდა გვახსოვდეს, როგორც თქვენ გეგმავთ ამ ურთიერთქმედების არის ის, რომ სენსორული მოწყობილობები არ აქვთ "hover" სახელმწიფო, ასე რომ ეს ეფექტი ხშირად დაკარგა ვინმეს გამოყენებით სენსორული მოწყობილობა, როგორიცაა მობილური ტელეფონი. ტრანსფორმაცია ხშირად მოხდება, მაგრამ ეს ასე სწრაფად ხდება, რომ ნამდვილად არ ჩანს. ეს კარგია, თუ ეს დაამატეთ როგორც ბონუს ეფექტს, მაგრამ თავიდან იქნას აცილებული ნებისმიერი ცვლილება, რომელიც საჭიროა გაიგოს შინაარსით.
თანდათან უქრებაა შესაძლებელი
თქვენ არ იწყება გაცვეთილი გამოსახულება, შეგიძლიათ გამოიყენოთ გარდამავალი და გაუმჭვირვალე გამოსახულება სრულად გაუმჭვირვალე გამოსახულებისგან. იმავე სურათის გამოყენებით, ერთადერთი ფორმა:
class = "withfadeout">
ისევე, როგორც ადრე, შეცვლის opacity გამოყენებით: hover selector:
.withfadeout {
-ვებრი-გარდამავალი: ყველა 2-იანი მარტივია;
-მიზანი-გარდამავალი: ყველა 2-ის გამარტივება;
-ms-transition: ყველა 2s მარტივად- in-out;
-ა-გარდამავალი: ყველა 2-ის გამარტივება;
გარდამავალი: ყველა 2-იანი მარტივია;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
ამ მაგალითში გამოსახულება გარდამავალიდან გარკვეულწილად გამჭვირვალეა - ჩვენი პირველი მაგალითის საპირისპიროდ.
გადადიხართ სურათების მიღმა
ეს არის შესანიშნავი, რომ თქვენ შეგიძლიათ გამოიყენოთ ეს ვიზუალური გადასვლები და fades to images, მაგრამ თქვენ არ შემოიფარგლება მხოლოდ გამოყენებით სურათები ამ CSS ეფექტი. თქვენ შეგიძლიათ მარტივად გააკეთოთ CSS- ის სტილის ღილაკები, რომლებიც დაჭერილი და დაჭერილი ხდება. თქვენ უბრალოდ დააყენებთ opacity გამოყენებით: აქტიური ფსევდო კლასის და დააყენა გადასვლის კლასში, რომელიც განსაზღვრავს ღილაკს. დააჭირეთ და გამართავს ამ ღილაკს იმის შესახებ, თუ რა მოხდება.
შესაძლებელია არსებითად ნებისმიერი ვიზუალური ელემენტის Fade როდესაც hovered მეტი ან დაწკაპავთ. ამ მაგალითში მე შეცვლის divacity და ტექსტის ფერი, როდესაც მაუსი მასზეა. აქ არის CSS:
#myDiv {
სიგანე: 280px;
ფონის ფერი: # 557A47;
ფერი: # dfdfdf;
padding: 10px;
-webkit- გარდამავალი: ყველა 4s განმუხტვის- out 0s;
-moz-transition: ყველა 4s განმუხტვის- out 0s;
-ms-transition: ყველა 4s განმუხტვის- out 0s;
-ა-გარდამავალი: ყველა 4s განმუხტვის- out 0s;
გარდამავალი: ყველა 4s განმუხტვის- out 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
ფერი: # 000;
}
ნავიგაციის მენიუს შეუძლია გააუმჯობესოს ფონზე ფონის ფერები
ამ მარტივი ნავიგაციის მენიუში ფონის ფერი ფარავს ნელა და გარეთ, როგორც მე მაუსი მეტი მენიუ ნივთები. აქ არის HTML:
- მთავარი
- CSS3 გაკვეთილები
- CSS3 თვისებები
და აქ არის CSS:
ul # sampleNav {სიის სტილი: არა; }
ul # sampleNav li {
ჩვენება: inline;
float: მარცხენა;
padding: 5px 15px;
ზღვარი: 0 5px;
-ვებრი-გარდამავალი: ყველა 2 წუთი;
-ფოტო-გარდამავალი: ყველა 2 წრფივი;
-ms-transition: ყველა 2s ხაზოვანი;
-ა-გარდამავალი: ყველა 2 წუთი;
გარდამავალი: ყველა 2 წუთი;
}
ul # sampleNav li {ტექსტური გაფორმება: არა; }
ul # sampleNav li: hover {
ფონის ფერი: # DAF197;
}
ბრაუზერის მხარდაჭერა
რამდენჯერმე ვცდილობდი, ეს სტილის ძალიან კარგი ბრაუზერია, ასე რომ თქვენ უნდა იგრძნოთ მათი გამოყენება ნებისმიერი სიხარბის გარეშე. ამის ერთადერთი გამონაკლისი არის Internet Explorer- ის უფრო ძველი ვერსიები, მაგრამ Microsoft- ის ბოლოდროინდელი გადაწყვეტილება 11-ზე მეტ 11 ვერსიის მხარდაჭერას შეუწყობს ხელს. ამ ხანდაზმულ ბრაუზერებს უფრო ნაკლებად ხდებიან საკითხი - და რეალურად, თუ ძველი ბრაუზერი არ არის ვხედავ ამ Fade გარდამავალი, რომ არ უნდა იყოს მთავარი პრობლემა. სანამ ამგვარი ეფექტები დავუკავშიროთ სასიამოვნო ურთიერთქმედებას და არ დაეყრდნონ მათ ფუნქციურობას ან გამოხატავს საკვანძო შინაარსს, მაშინ ხანდაზმული ბრაუზერები, რომლებსაც არ დაუჭერენ ეფექტებს, მიიღებენ ნაკლებად სასიამოვნო გამოცდილებას, ვიცი განსხვავება, განსაკუთრებით მაშინ, თუ მათ შეუძლიათ გამოიყენონ საიტი როგორც ნორმალური და მიიღონ ინფორმაცია, რომ მათ სჭირდებათ.
დამატებითი გართობა; შეცვალეთ ორი სურათი
აქ არის მაგალითი იმისა, თუ როგორ უნდა დაიშალოს ერთი სურათი მეორეში. გამოიყენეთ HTML:
და CSS, რომელიც ერთი სრულად გამჭვირვალეა, ხოლო მეორე სრულად გაუმჭვირვალეა და გარდამავალი გარდასახავს ორს:
.swapMe img {-webkit- გარდამავალი: ყველა 1-ის გამარტივება; -moz- გარდამავალი: ყველა 1-ის გამარტივება; -ms- გარდამავალი: ყველა 1-ის გამარტივება; -ო-გარდამავალი: ყველა 1-ის გამარტივება; გარდამავალი: ყველა 1-ის გამარტივება; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }