Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი

ჩრდილების ძირითადი გამოყენება

თვისება text-shadow ძალიან მარტივია გამოსაყენებლად.ისინი მხარდაჭერილია ყველა თანამედროვე ბრაუზერეით თუნდაც პრეფიქსების გამოყენების გარეშეც. IE -ს მხარდაჭერა (თუნდაც უახლეს IE9-ში) არ არსებობს. შესაძლებელია გამოვიყენოთ ინსტრუმენტი Modernizr, რომელიც დაგვეხმარება CSS3 ეფექტები ვამუშაოდ ინტერნეტ ექსპლოლერის თუნდაც ძველ ვერსიებში .


სინტქსისი
ტექსტიის ჩრდილის შესაქმნელად გამოიყენება სინტაქსისი თვისება text-shadow, რომელიც ქვევით გვაქვს მოყვანილი. დასადგენია პარამეტრის საზღვრები:პირველი ორი გვაძლევს ჩრდილის მდებარეობას, მესამე განსაზღვრავს გადარეცხვის ხარისხს, ხოლო მეოთხე ჩრდილის ფერს.



text-shadow: შერევა_ჰორიზონტალურად  შერევა_ვერტიკალურად გადარეცხვა  ფერი;



ქვევით მოყვანილია ტექსტის ჩრდილის მაგალითი,რომელიც შერეულია ორი პიქსელით ქვევით და ოთხი პიქსელით მარჯვნივ, ზომა აქვს სამი პიქსელი და შავი ფერი გაუმჭირვალევლობის პორცენტი 30%.

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);


ამ თვისების გამოყენების რეზულტატი გამოიყურება შემდეგ ნაერად:



CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი



რატომ გამოიყენება rgba?

აუცილებელი არ არის გამოიყენოთ rgba თვისების განსაზღვრისას ჩრდილისთვის ფერის მისაცემად. თუმცა, rgba ამატებს კიდევ ერთ თვისებას - გამჭირვალეობის ხარისხს.

ეს მეთოდი ბევრად ადვილია, ვიდრე ფერის განსაზღვრის სხვა მეთოდები. თქვენ ყურადღება უნდა გაამახვილოთ ფერის ჩრდილზე, რომელიც შეიძლება იყოს ფონზე ოდნავ მუქი ან მკრთალი. rgba თან ერთად თქვენ შეგიძლიათ გამოიყენოთ თეთრი ან შავი ფერი და გაზარდოთ მათი გამჭირვალეობის ხარისხიიმისთვის რომ დაამატოთ საჭირო ჩრდილი კრასკების შერევისას.

ტექსტის შეტენვა

text-shadows თვისების დახმარებით შეგვიძლია შევქმნათ ტექსტის განსხვავებული ეფექტები, არ შევიზღუდოთ თავი უბრალო დაცემული ჩრდილებით.მაგალითად აქ გავაკეთოთ მაგალითი შეტენილი ტექსტის ეფექტისთვის.

თავდაპირველად უნდა დავაყენოთ ტექსტის ფერი ცოტაოდენ მუქი,ვიდრე ფონის ფერია. შემდეგ კი უნდა გამოვიყენოთ თვისება text-shadow თეთრი ფერით გაზრდილი გამჭირვალეობით.

ფოსნი ფერი #222, ხოლო ტექსტის ფერს აქვს გამჭირვალებოის ხარისხი 60%. თეთრი ჩრდილი პოზიციონირდება ოდნავ დაბლა და მარჯვნივ გამჭირვალეობის ხარისხით 10%.

body {
    background: #222;
}

#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}





CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




გამოკვეთილი ჩრდილი

საერთოდაც არ არის აუცილებელი ჩრდილის გადარეცხვა. გამოკვეთილი ჩრდილი შესაძლოა უფრო მეტადაც მოუხდეს საიტის დიზაინს.

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);



CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი



ორმაგი ჩრდილი

text-shadow: shadow1, shadow2, shadow3;


აი ორმაგი ჩრდილის გამოყენების მაგალითი. პირველი შეიცავს იგივე ფერსა და იგივე ფონს.

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);




CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




ქვევით შერეული დიდ მანძილძე:


text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 24px 2px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);




CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




ქვევით შერეული პატარა მანძილზე გადარეცხვის მეტოდით:


text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);




CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი





3D ტექსტი Mark Dotto-სგან

text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);




CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




შეტენილი ტექსტი Gordon Hall გან


background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;





CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი






განათება:


text-shadow: 0px 0px 6px rgba(255,255,255,0.7);




CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




სუპერგმირი :

text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;





CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი



[/b]ფერის მრავალი წყაროთი:[/b]

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);





CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი




მსუბუქი შეკუმშვა

color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);






CSS ჩრდილების გამოყენებით ტექსტის 12 ეფექტი






დასკვნა

ისევე როგორც CSS ეფექტების უ,რავლესობა, ჩრდილების რეალიზებაც ძალიან მარტივია. თუმცა მცირე დეტალების შერწყმამ შეიძლება გასაოცარი ეფექტები მოგვიტანოს.

+10
ავტორი: admin ნანახია: 1746 | კომენტარი: 4 | Tutorials | 13-11-2011, 00:53
4By: QAVTOO Elite Members
 
კაი რაღაცაა 1000260 14
 
 
  13 ნოემბერი 2011 17:06    
 
3By: mecniera მოსწავლე
 
როგორ მაინტერესებდა ეს როგორ კეთდებოდა, სგ admin. 14
 
 
  13 ნოემბერი 2011 14:42    
 
2By: Mr.Black And White Elite Members
 
14 კაია პოლტერ
 
 
  13 ნოემბერი 2011 12:27    
 
1By: wilo Elite Members
 
პრინციპში ეს ყველა ტუტორი რო სეაერთო 1 კაი წიგნი გამოგივა;)
 
 
  13 ნოემბერი 2011 12:10    
 
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



topnews

© 2009-2012 Powered By Geodles.Com