Tìm hiểu cách tạo mũ ban đầu ưa thích bằng cách sử dụng CSS và hình ảnh
Tìm hiểu cách sử dụng CSS để tạo các mũ ban đầu ưa thích cho các đoạn văn của bạn. Thậm chí còn có một kỹ thuật thay thế hình ảnh đơn giản để sử dụng hình ảnh đồ họa cho giới hạn ban đầu của bạn.
Kiểu dáng cơ bản của mũ ban đầu
Có ba kiểu mũ ban đầu trong tài liệu:
- lớn lên - phổ biến nhất, nơi chữ cái đầu tiên lớn hơn và trên cùng một dòng với văn bản hiện tại.
- giảm - cũng khá phổ biến, nơi chữ cái đầu tiên lớn hơn và được thả xuống bên dưới dòng văn bản đầu tiên. Các văn bản sau đó nổi xung quanh nó.
- liền kề - nơi chữ cái đầu tiên nằm trong một cột bên cạnh phần còn lại của văn bản. Điều này phổ biến hơn trong in ấn so với thiết kế Web.
Mũ ban đầu hoặc mũ thả rất quen thuộc. Họ là một cách tuyệt vời để ăn mặc không gian dài và nhàm chán của văn bản. Và với thuộc tính CSS: chữ cái đầu tiên, bạn có thể dễ dàng xác định cách làm cho chữ cái đầu tiên của bạn trở nên huyền ảo hơn.
Tạo một Cap ban đầu đơn giản
Tất cả những gì bạn cần làm để tạo một mũ ban đầu đơn giản được nâng lên là làm cho chữ cái đầu tiên của đoạn văn của bạn có kích thước lớn hơn với phần tử giả chữ cái đầu tiên:
p: chữ cái đầu tiên {font-size: 3em; }Nhưng nhiều trình duyệt thấy rằng chữ cái đầu tiên lớn hơn phần còn lại của văn bản trên dòng, vì vậy chúng tạo thành hàng đầu bằng với ý nghĩa của chữ cái đầu tiên, chứ không phải phần còn lại của dòng. May mắn thay, điều này rất dễ sửa với phần tử giả đầu tiên và thuộc tính chiều cao dòng:
p: chữ cái đầu tiên {font-size: 3em; } p: dòng đầu tiên {line-height: 1em; }Chơi với chiều cao dòng trong tài liệu của bạn cho đến khi bạn tìm thấy kích thước phù hợp cho văn bản của mình.
Chơi với nắp ban đầu của bạn
Một khi bạn hiểu làm thế nào để tạo ra một nắp ban đầu, bạn có thể mặc nó trong quần áo ưa thích để làm cho nó nổi bật. Chơi với màu sắc, màu nền, đường viền hoặc bất kỳ thứ gì gây ấn tượng với bạn. Một phong cách khá đơn giản là đảo ngược màu sắc của phông chữ và màu nền của bạn chỉ cho chữ cái đầu tiên:
p: chữ cái đầu tiên {font-size: 300%; màu nền: # 000; màu: #fff; } p: dòng đầu tiên {line-height: 100%; }Một mẹo khác là căn giữa hàng đầu tiên. Điều này có thể phức tạp với CSS, vì giữa dòng văn bản có thể khác nếu bố cục của bạn linh hoạt. Nhưng với một số chơi xung quanh với các giá trị, bạn có thể thụt lề dòng đầu tiên của bạn đủ để làm cho lá thư đầu tiên xuất hiện ở giữa. Chỉ cần chơi với tỷ lệ phần trăm trên văn bản thụt lề của đoạn văn cho đến khi nó trông đúng:
p: chữ cái đầu tiên {font-size: 300%; màu nền: # 000; màu: #fff; } p: dòng đầu tiên {line-height: 100%; } p {text-indent: 45% ; }Các Caps ban đầu liền kề là Hard với CSS
Các nắp ban đầu liền kề có thể khó khăn với CSS vì các trình duyệt khác nhau hiển thị phông chữ khác nhau. Ý tưởng đằng sau việc tạo nắp liền kề trong CSS là sử dụng thuộc tính văn bản thụt lề trên dòng đầu tiên để đẩy nó ra (ở bên trái) một giá trị âm. Bạn cũng sẽ cần thay đổi lề trái của đoạn đó bằng một số tiền. Chơi với những con số này cho đến khi đoạn văn có vẻ tốt.
p {text-indent: -2.5em; lề trái: 3em; } p: chữ cái đầu tiên {font-size: 3em; } p: dòng đầu tiên {line-height: 100%; }Bắt Mũ thật sự Ưa thích Ban đầu
Cách tốt nhất để tạo nắp đầu tiên lạ mắt là thay đổi phông chữ thành họ phông chữ trang trí hơn. Nếu bạn sử dụng một loạt phông chữ theo sau là phông chữ chung , nó sẽ giúp đảm bảo rằng giới hạn ban đầu của bạn hiển thị tốt để khách hàng của bạn có thể nhìn thấy nó mà không gặp phải vấn đề về khả năng truy cập và khả năng sử dụng.
p: chữ cái đầu tiên {font-size: 3em; font-family: "Edwardian Script ITC", "Cọ Script MT", chữ thảo; } p: dòng đầu tiên {line-height: 100%; }Và, như thường lệ, bạn có thể đặt tất cả các đề xuất này lại với nhau để tạo giới hạn ban đầu cho quảng cáo theo đoạn của bạn.
Sử dụng một nắp ban đầu đồ họa
Nếu, sau khi tất cả điều đó, bạn vẫn không thích làm thế nào mũ ban đầu của bạn nhìn vào trang, bạn có thể nghỉ mát để đồ họa để có được hiệu quả chính xác mà bạn đang tìm kiếm. Nhưng trước khi quyết định chuyển thẳng sang đồ họa, bạn nên lưu ý những hạn chế của phương pháp này:
- Khách hàng không có hình ảnh sẽ không thấy giới hạn ban đầu và có thể không thấy văn bản ẩn mà hình ảnh đang thay thế. Điều này có thể làm cho đoạn văn không thể truy cập được, hoặc tốt nhất là khó đọc.
- Hình ảnh luôn thêm vào thời gian tải xuống của một trang. Nếu bạn có nhiều mũ ban đầu, bạn có thể tăng đáng kể thời gian tải xuống cho một thứ mà nhiều người sẽ cảm thấy là không đáng kể.
- Một số trình duyệt sẽ hiển thị cả chữ cái đầu tiên ẩn và hình ảnh - điều này có thể làm cho văn bản đoạn trông kỳ lạ.
- Rất khó để tự động hóa tùy chọn này, vì bạn phải biết chính xác chữ cái đầu tiên là gì để bạn sử dụng hình ảnh chính xác. Vì vậy, mỗi khi đoạn văn được chỉnh sửa, bạn có thể cần tạo một hình ảnh mới.
Đầu tiên, bạn cần tạo ra hình ảnh của chữ cái đầu tiên. Tôi đã sử dụng Photoshop để tạo chữ L với phông chữ "Edwardian Script ITC". Tôi đã làm cho nó lớn - kích thước 300pt. Sau đó tôi cắt hình ảnh xuống mức tối thiểu xung quanh chữ cái và ghi lại chiều rộng và chiều cao của hình ảnh.
Sau đó, tôi đã tạo một lớp "capL" cho đoạn của tôi. Đây là nơi tôi xác định hình ảnh cần sử dụng, hàng đầu (chiều cao dòng), v.v.
Bạn cần phải sử dụng chiều rộng và chiều cao của hình ảnh để đặt văn bản thụt đầu dòng và phần đệm. Đối với hình ảnh L của tôi, tôi cần 95px indent và 72px padding.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: không lặp lại; văn bản thụt lề: 95px; padding-top: 72px; }Nhưng đó không phải là tất cả. Nếu bạn để nó ở đó, thì chữ cái đầu tiên sẽ được nhân bản trong đoạn văn - đầu tiên với hình ảnh, sau đó trong văn bản. Vì vậy, tôi đã thêm một khoảng thời gian xung quanh yếu tố đầu tiên đó với lớp "ban đầu" - và yêu cầu trình duyệt không hiển thị chữ cái đó:
span.initial {display: none; }Và đồ họa sau đó hiển thị chính xác. Bạn có thể chơi với văn bản thụt lề trên đoạn văn để có được văn bản snugged ngay đến chữ cái, tuy nhiên bạn muốn nó hiển thị.