Creative Web Typography Styles


Trong hướng dẫn này chúng tôi sẽ tạo ra những phong cách typography web khác nhau bằng cách sử dụng các plugin jQuery lettering.js và kỹ thuật CSS khác nhau. Đối với một số ví dụ, chúng tôi cũng sẽ thêm di chuột quá trình chuyển đổi để làm những điều một chút tương tác nhiều hơn.

Mẫu 1


Ý tưởng của ví dụ đầu tiên là để tách hoặc cắt một từ khi bay bổng và làm cho một từ khác xuất hiện trong khoảng cách. Cho rằng chúng tôi sẽ cần một cấu trúc đặc biệt.



<h2 class='cs-text'>
<span class='cs-text-cut'>
Smooth
</span>
 
<span class='cs-text-mid'>
Operator
</span>
 
<span class='cs-text-cut'>
Smooth
</span>
</h2>



Từ đó sẽ được hiển thị ban đầu, sẽ được nhân đôi. (Lưu ý rằng tất cả các ví dụ này dành cho các mục đích trang trí và có thể không được 'SEO friendly'.)
Chúng tôi sẽ áp dụng các plugin lettering.js cho các từ có nghĩa rằng chúng ta sẽ có một khoảng thời gian xung quanh từ đầu tiên và cuối cùng (bản sao):


$('.cs-text-cut').lettering('words');



Bây giờ, chúng ta hãy xem css. Trước hết chúng tôi sẽ thiết lập chiều rộng và chiều dài :


.cs-text {
width: 645px;
margin: 120px auto 30px;
cursor: default;}



Đặt thiết lập mặc định của thẻ span là block:



.cs-text > span
{ display: block;}
Từ khoá : Creative, Typography, Styles

TIN LIÊN QUAN

BookBlock: A Content Flip Plugin

Một plugin jQuery mà sẽ tạo ra một thành phần giống như cuốn sách nhỏ cho phép bạn điều hướng thông qua các mục của nó bằng cách đảo các trang với hiệu ứng (BookBlock: A Content Flip Plugin )

Fullscreen Video Slideshow with BigVideo.js

Chúng tôi sẽ hưỡng dẫn làm thế nào để tạo slideshow nền bằng video động hoặc một slider bằng Bigvideo.js một Plugin JQuery khá đẹp

Photo Booth Strips with Lightbox

Băng ảnh đứng đẹp mắt với Lightbox 2 di chuyển bằng cách lăn bi với phong cách lạ với 'Photo Booth Strips with Lightbox'

Old School Cassette Player with HTML5 Audio

Vintage định dạng đáp ứng công nghệ web hiện đại: máy nghe nhạc âm thanh HTML5 với các điều khiển thực tế. Hôm nay chúng tôi muốn chia sẻ một máy nghe nhạc âm thanh với giao diện trông giống như một băng nhạc trường học cũ.

THỦ THUẬT HAY

Nguyên nhân và 5 cách khắc phục tình trạng loa điện thoại bị nhỏ cực hiệu quả mà bạn nên thử ngay

Loa điện thoại bị nhỏ trong quá trình sử dụng là do nguyên nhân nào gây ra? Hãy cùng tìm hiểu cách khắc phục tình trạng này cực đơn giản trong bài viết.

Hướng dẫn sử dụng một số tính năng tiện ích trên Windows 10

Nhiều lúc khi sử dụng Windows 10, bạn ít nhiều gặp các quảng cáo gây cản trở công việc hoặc thấy vướng mắt. Hãy cùng FPTShop tìm cách tắt những quảng cáo này đi

Cách vô hiệu hóa tính năng tự động đọc văn bản PDF trên Chrome, Firefox

PDF hiện nay đã có thể được đọc một cách tự động trên các trình duyệt. Tuy nhiên, nếu không muốn sử dụng thì các bạn có thể vô hiệu hóa tính năng này.

Pin iPhone 6s dùng được bao lâu?

Nếu bạn đang băn khoăn về thời lượng pin của chiếc iPhone 6s liệu có đáp ứng nhu cầu sử dụng của bạn hay không. Hôm nay, chúng tôi sẽ phần nào giải đáp.

Cài đặt Windows Timeline Support trên trình duyệt Chrome, Firefox và Vivaldi

Về cơn bản, Windows Timeline là tính năng hỗ trợ, nó tạo ra các snapshot của ứng dụng, web hay bất cứ chương trình nào mà người dùng đã sử dụng và khôi phục trong thời gian 30 ngày.

ĐÁNH GIÁ NHANH

Đánh giá sơ bộ iPhone X: một bước tiến lớn về mặt phần cứng

Sau nhiều tháng chờ đợi, chúng ta cuối cùng đã có được iPhone X để trải nghiệm thực sự. Apple cho biết đó là một sản phẩm để kỷ niệm 10 năm sau cuộc cách mạng mà họ tạo ra trong mảng kinh doanh điện thoại trên thế giới.

Trên tay Huawei MediaPad M3 2017: 7 triệu, chưa xuất sắc nhưng đủ dùng và đáng tiền

MediaPad M3 2017 được đóng hộp đơn giản, bao da tặng kèm được đóng gói riêng. Hộp của M3 bao gồm củ sạc 5V-2A, que chọc sim, sách HDSD, cáp microUSB và không có tai nghe đi kèm. Tuy nhiên, theo thông tin, nếu đặt hàng

So sánh Honda CR-V 5+2 và Mazda CX-5: Lựa chọn nào phù hợp với bạn?

Câu hỏi trên có lẽ cần nhiều năm bán hàng để khẳng định. Và khi trong phân khúc compact SUV ngày càng phát triển thì cả hai mẫu xe gia đình tiêu biểu trên đều xứng đáng được lựa chọn.