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

3 cách thanh toán tiền điện cực đơn giản trên di động

Với sự phát triển mạnh mẽ của điện thoại thông minh, việc thanh toán hóa đơn tiền điện ngay trên di động đang ngày càng trở nên phổ biến. Bạn có thể thực hiện thanh toán bất cứ lúc nào, bất cứ nơi đâu mà không cần phải

Cách hẹn giờ đi ngủ trên Youtube cực đơn giản và nhanh chóng

Youtube được xem là một trong những nền tảng xem video phổ biến nhất thế giới. Trong những bản cập nhậ gần đây, Youtube trên Android và iOS đã bổ sung thêm tính năng hẹn giờ đi ngủ.

Những mẹo cực hay cho người dùng iPhone, iPad

Không được hỗ trợ các tính năng như tải video từ Youtube về Camera Roll, hay tắt các quảng cáo đáng ghét. Nhưng bạn hoàn toàn có...

Cách sửa lỗi ứng dụng Settings trên Windows 11

Nhiều người dùng cho biết ứng dụng Settings bị lỗi, treo, kích hoạt không lên … và đây là một lỗi khá lớn. Nếu bạn gặp phải lỗi tương tự với Settings thì dưới đây là cách khắc phục cần biết.

Những sai lầm phổ biến khi sạc điện thoại

Sai lầm khi sạc pin sẽ khiến pin nhanh hỏng, việc sạc pin điện thoại đúng cách không chỉ giúp pin bền hơn mà còn giúp máy hoạt động ổn định hơn. Nếu bạn đang mắc phải những lỗi sạc pin điện thoại phổ biến này thì nên

ĐÁNH GIÁ NHANH

Đánh giá chi tiết BMW X4 M40d 2019 về thiết kế nội ngoại thất

Mẫu xe thể thao đa năng BMW X4 M40d 2019 đã được nới hơn 76 mm chiều dài, 38 mm chiều rộng và 76 mm chiều dài cơ sở. Mặc dù kích thước tăng lên đáng kể song BMW X4 mới lại sở hữu khối lượng nhẹ hơn 50 kg, trọng tâm

Những tính năng chụp ảnh đáng chú ý trên Vivo X70 Pro dành cho các fan sống ảo

Vivo X70 Pro đã chính thức có mặt tại Việt Nam và trở thành flagship ấn tượng nhờ khả năng chụp ảnh đỉnh cao. Nếu bạn là người có niềm đam mê với nhiếp ảnh, thích sống ảo trên mạng xã hội thì các tính năng chụp ảnh

Đánh giá Xiaomi Redmi 4A: Đáng mua nhất mức giá dưới 3 triệu

Xiaomi Redmi 4A là chiếc smartphone chính hãng có giá rẻ nhất của Xiaomi hiện tại. Với mức giá chỉ 3 triệu đồng, liệu chiếc smartphone này có đáng...