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

Tổng hợp những vấn đề khi sử dụng trình duyệt web và cách khắc phục

Vì thế nên nếu có vấn đề xảy ra, gây trục trặc cho bạn khi sử dụng trình duyệt và có ảnh hưởng tiêu cực đến công việc và trải nghiệm của bạn hàng ngày.

5 ứng dụng laucher giúp thay đổi giao diện tốt nhất trong năm 2017

Đây là cái tên quen thuộc với rất nhiều người, ứng dụng này xuất hiện từ những ngày đầu tiên của hệ điều hành Android. Không ngoa khi nói rằng Nova Launcher là nguyên nhân khiến nhiều người không thể dứt bỏ Android.

Kiểm soát Windows Update của hệ điều hành

Windows Update, một tính năng của HĐH giúp cho máy tính tự động cập nhật các bản sửa lỗi, miếng vá bảo mật. Tuy nhiên, trong một số trường hợp tính năng này lại gây ảnh hưởng đến công việc và khiến người dùng khó...

7 mẹo đơn giản để trở thành chuyên gia tìm kiếm trên Google

Bạn thắc mắc tại sao có những nội dung người khác tìm kiếm rất dễ dàng, nhanh chóng trên Google còn mình thì rất khó khăn? Hãy lướt qua 7 mẹo tìm kiếm sau đây của chúng tôi để tìm hiểu thêm về công cụ tìm kiếm tuyệt

WinRAR 5.61 ra mắt bản final sau nhiều thử nghiệm

WinRAR hỗ trợ các định dạng thông dụng như: CAB, ARJ, LZH, TAR, GZ, ACE, UUE, BZ2, JAR, ISO, 7Z, Z. Mục tiêu của phần mềm này chính là nén và giải nén các file và folder lớn. Trình nén file giúp tiết kiệm không gian ổ

ĐÁNH GIÁ NHANH

Đánh giá camera Infinix Hot S: Lựa chọn camera phone tốt trong tầm giá 3 triệu đồng

Infinix Hot S sở hữu camera chính 13MP, hỗ trợ chỉnh tay thông số, camera selfie 8MP tích hợp flash led cho khả năng selfie tốt trong mọi điều kiện ánh sáng.

Đánh giá nhanh Xiaomi Redmi 4X: Hoàn thiện tốt, cấu hình mạnh mẽ!

Redmi 4X có thể khiến bạn bất ngờ vì vóc dáng nhỏ gọn hơn các smartphone có màn hình 5 inch khác, chỉ lớn hơn một chút so với một số máy kích thước màn hình 4.7 inch như Galaxy A3 2017.