ვისწავლოთ შექმნა Fancy თავდაპირველი Caps გამოყენებით CSS და სურათები
შეიტყვეთ, თუ როგორ გამოიყენოთ CSS, რათა შეიქმნას თქვენი პირველი პუნქტები. არსებობს მარტივი იმიჯის ჩანაცვლება ტექნიკის გამოყენება გრაფიკული იმიჯის თქვენი თავდაპირველი cap.
საწყისი სტილის ძირითადი სტილები
დოკუმენტებში თავდაპირველი ქუდების სამი ძირითადი სტილია:
- დააყენა - ყველაზე გავრცელებული, სადაც პირველი ასო უფრო დიდი და იგივე ხაზია, როგორც მიმდინარე ტექსტი.
- დაეცა - ასევე საკმაოდ გავრცელებული, სადაც პირველი წერილი უფრო დიდია და დაეცა ქვემოთ პირველი ხაზი ტექსტი. შემდეგი ტექსტი შემდეგ ირჩევს მის გარშემო.
- მიმდებარე - სადაც პირველი წერილი ერთ სვეტშია დანარჩენი ტექსტის გვერდით. ეს უფრო ფართოდ გავრცელებულია ვებ-დიზაინზე.
თავდაპირველი ქუდები ან წვეთი caps ძალიან ნაცნობი. ისინი დიდი გზა კაბა up სხვაგვარად ხანგრძლივი და მოსაწყენი spans ტექსტი. და CSS- ის ქონებით: პირველი წერილი, მარტივად შეგიძლიათ განსაზღვროთ, თუ როგორ გააკეთოთ თქვენი პირველი ასოები ფანიერისთვის.
შექმნა მარტივი თავდაპირველი Cap
ყველაფერი რაც უნდა გააკეთოთ იმისათვის, რომ შეიქმნას მარტივი თავდაპირველი ქუდი, გააკეთოთ პირველი ასო თქვენი პარაგრაფი უფრო დიდი ზომის პირველი ასო ფსევდო-ელემენტთან:
p: პირველი წერილი {font-size: 3em; }მაგრამ ბევრი ბრაუზერი ხედავს, რომ პირველი ასო უფრო დიდია, ვიდრე დანარჩენი ტექსტის ხაზი, ამიტომ ისინი წამყვანი თანაბარი რა იქნება აზრი, რომ პირველი წერილი, არა დანარჩენი ხაზი. საბედნიეროდ, ეს არის მარტივი დაფიქსირება პირველი ხაზი ფსევდო ელემენტს და ხაზი სიმაღლე ქონება:
p: პირველი წერილი {font-size: 3em; } p: პირველი ხაზი {line-height: 1em; }თამაში თქვენი სიის ხაზის სიმაღლესთან ერთად, სანამ ტექსტს თქვენი ზომა არ გაეცნობით.
ითამაშეთ თქვენი პირველი თავით
მას შემდეგ, რაც გესმით, თუ როგორ უნდა შექმნათ თავდაპირველი ქუდი, შეგიძლიათ კაბა up in ლამაზი ტანსაცმელი, რათა ის გამოირჩევა. თამაში ფერები, ფონის ფერები, საზღვრები, ან რასაც დარტყმები თქვენი ლამაზი. საკმაოდ მარტივი სტილი არის თქვენი შრიფტისა და ფონის ფერების შეცვლა მხოლოდ პირველი წერილისთვის:
p: პირველი წერილი {font-size: 300%; ფონის ფერი: # 000; ფერი: # ff; } p: პირველი ხაზი {line-height: 100%; }კიდევ ერთი შეასრულა არის პირველი ხაზი. ეს შეიძლება იყოს სახიფათო CSS, რადგან შუა ტექსტის ხაზი შეიძლება იყოს განსხვავებული თუ თქვენი განლაგება არის მოქნილი. მაგრამ ზოგიერთი სათამაშო გარშემო ღირებულებები, შეგიძლიათ indent თქვენი პირველი ხაზი საკმარისი იმისათვის, რომ პირველი წერილი, როგორც ჩანს, შუა. უბრალოდ ითამაშე პარაგრაფის ტექსტი-განცალკევებით პროცენტზე სანამ არ გამოიყურება:
p: პირველი წერილი {font-size: 300%; ფონის ფერი: # 000; ფერი: # ff; } p: პირველი ხაზი {line-height: 100%; } p {text-indent: 45% ; }მიმდებარე პირველადი Caps არის მძიმე ერთად CSS
მიმდებარე საწყისი caps შეიძლება იყოს რთული CSS, რადგან სხვადასხვა ბრაუზერები არიან შრიფტები განსხვავებულად. იდეა CSS- ში მიმდევრობით ჩამოყალიბებული იდეაა, გამოიყენოს ტექსტის განზომილება ქონება პირველი ხაზისთვის (მარცხნივ) უარყოფით მნიშვნელობას. თქვენ ასევე უნდა შეიცვალოს ამ პუნქტის მარცხენა ზღვარი გარკვეულ თანხაზე. თამაში ამ ნომრებთან ერთად, სანამ აბზაცი არ არის კარგი.
p {text-indent: -2.5em; ზღვარი მარცხნივ: 3; } p: პირველი წერილი {font-size: 3em; } p: პირველი ხაზი {line-height: 100%; }მიღება ნამდვილად Fancy თავდაპირველი Caps
ფანტასტიკური თავდაპირველი ქულის შესაქმნელად საუკეთესო საშუალებაა შრიფტის შეცვლა უფრო დეკორატიული შრიფტით. თუ იყენებთ შრიფტის სერიას, რომელსაც მოჰყვება ზოგადი შრიფტი , ის დაეხმარება იმის გარანტიას, რომ თქვენი თავდაპირველი ქუდი კარგად აჩვენებს იმას, რომ თქვენს მომხმარებელს შეუძლია ნახოს, ხელმისაწვდომობისა და გამოყენების შესაძლებლობის გარეშე.
p: პირველი წერილი {font-size: 3em; შრიფტიანი ოჯახი: "ედვარდული Script ITC", "Brush Script MT", კურსური; } p: პირველი ხაზი {line-height: 100%; }და, როგორც ყოველთვის, შეგიძლიათ დააყენოთ ყველა ეს წინადადება ერთად, რათა შეიქმნას პირველადი cap რომ რეკლამები სტილი თქვენს პუნქტში.
გამოყენება გრაფიკული პირველადი Cap
იმ შემთხვევაში, თუ ამის შემდეგ, თქვენ ჯერ კიდევ არ მოსწონთ, თუ როგორ იწყება თქვენი თავდაპირველი ქუდები გვერდზე, შეგიძლიათ გამოიყენოთ გრაფიკა იმისათვის, რომ მიიღოთ ზუსტი ეფექტი თქვენ ეძებთ. მაგრამ სანამ გადაწყვეტთ გადაადგილება პირდაპირ გრაფიკა, თქვენ უნდა იცოდეს ნაკლოვანებები ამ მეთოდით:
- სურათების გარეშე მომხმარებელს ვერ ხედავს თავდაპირველ კაპს და ვერ ხედავთ ფარული ტექსტის სურათს, რომელიც შეცვლის. ამის გაკეთება შესაძლებელია პარაგრაფის მიუწვდომელი, ან უფრო რთული კითხვისთვის.
- სურათები ყოველთვის დაამატეთ ჩამოტვირთვის დროს. თუ თქვენ გაქვთ ბევრი თავდაპირველი ქუდები, შეგიძლიათ მნიშვნელოვნად გაზრდის ჩამოტვირთვის დროს რაღაც ბევრი ადამიანი იგრძნობს უმნიშვნელოა.
- ზოგიერთი ბრაუზერები გამოჩნდება ორივე დამალული პირველი ასო და გამოსახულება - რომელსაც შეუძლია გააკეთოს პუნქტი ტექსტის უცნაური.
- ძალიან რთულია ამ პარამეტრის ავტომატიზირება, რადგან ზუსტად უნდა იცოდეთ, რა არის პირველი წერილი, რომ გამოიყენოთ სწორი გრაფიკი. ამრიგად, ყოველი პუნქტი რედაქტირებულია, შესაძლოა, ახალი გრაფიკული შექმნისთვის საჭიროა.
პირველი, თქვენ უნდა შექმნათ გრაფიკული პირველი წერილი. მე ვიყენებდი Photoshop- ს წერილი L- ს შრიფტით "Edwardian Script ITC". მე მივიღე ეს უზარმაზარი - 300pt ზომა. მე შემიძლია გადავწყვიტე გამოსახულება ქვემოთ მინიმუმამდე წერილით და ვნახე გამოსახულების სიგანე და სიმაღლე.
შემდეგ მე შევქმენი კლასი "capL" ჩემი პარაგრაფი. ეს არის სადაც მე განსაზღვრავს რა სურათის გამოყენება, წამყვანი (ხაზის სიმაღლე) და ასე შემდეგ.
თქვენ უნდა გამოვიყენოთ გამოსახულების სიგანე და სიმაღლე, რათა შეიქმნას პუნქტის ტექსტი- ჩემი L სურათი, მე საჭიროა 95px indent და 72px padding.
p.capL {line-height: 1em; background-image: url (capL.gif); background- განმეორებითი: არა-განმეორებითი; ტექსტის შეყვანა: 95px; padding-top: 72px; }მაგრამ ეს არ არის ყველა. თუ დატოვებთ იქ, მაშინ პირველი წერილი დუბლირებული იქნება პუნქტში - პირველი გრაფიკით, შემდეგ ტექსტში. ასე რომ, მე დავამატებ span გარშემო რომ პირველი ელემენტის კლასის "თავდაპირველი" - და უთხრა ბრაუზერი არ ცარიელია, რომ წერილი:
span.initial {display: none; }და გრაფიკული შემდეგ აჩვენებს სწორად. თქვენ შეგიძლიათ ითამაშოთ ტექსტის განზრახვა პარაგრაფის მისაღებად ტექსტის snugged უფლება მდე წერილი, თუმცა გსურთ ეს ცარიელია.