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

Cách tải ứng dụng PC Covid về điện thoại cực đơn giản cho bạn

Cách tải ứng dụng PC Covid - Ứng dụng chính thức thay thế các ứng dụng phòng chống Covid hiện nay giúp bạn có thể kiểm tra thẻ xanh Covid, khai báo y tế,...

FullSafari - Tinh chỉnh giúp đem chức năng quản lý trang mới theo tab cho Safari

Về cơ bản, chức năng chính của FullSafari là giúp người dùng dễ dàng quản lý các trang đã mở từ trình duyệt Safari theo dạng tab, giống như đa phần trình duyệt khác trên máy tính (ví dụ như Chrome, Opera, Firefox, Cent

6 cách tản nhiệt laptop đơn giản, hiệu quả không hại máy

Thời tiết mùa hè khiến laptop nhanh chóng bị nóng khi hoạt động quá nhiều. Áp dụng các cách tản nhiệt cho laptop trong quá trình sử dụng sẽ giúp tránh hiện tượng bị hỏng chip, hỏng CPU và tăng tuổi thọ cho máy.

Cách sử dụng Facebook Messenger trên Opera

Trinh duyệt Opera liên tục cập nhật các tính năng mới cho trình duyệt của mình nhằm tối ưu hóa cũng như lôi kéo người sử dụng Opera nhiều hơn.

Cách tạo hiệu ứng phép thuật trên Facebook đơn giản

Thực chất đây là tính năng mới của Facebook chứ không có bí kíp, mưu mẹo gì hết cả. Điều bạn cần làm chỉ là trong bất kỳ trạng thái hay bình luận có nhắc đến ít nhất 1 trong các đoạn chữ sau

ĐÁNH GIÁ NHANH

Đánh giá camera Samsung Galaxy A8+ 2018: chụp được những bức ảnh tốt dễ dàng

Rõ ràng nó không dành cho những tay yêu cầu chất lượng ảnh đỉnh cao, nhưng bù lại nó phục vụ cho một nhóm người lớn hơn, những người không có kinh nghiệm nhiều nhưng vẫn có thể chụp được những bức ảnh tốt.

Đánh giá Xiaomi Redmi Pro: Thiết kế cao cấp, camera tốt cấu hình mạnh mẽ

Xiaomi Redmi Pro nổi bật với thiết kế kim loại đẹp mắt, cấu hình phần cứng khủng, đặc biệt là cụm camera kép mang đến khả năng chụp ảnh tốt

Đánh giá smartphone giải trí Lenovo A7010

Đánh giá smartphone tầm trung Huawei GR5 Đánh giá smartphone selfie Lenovo VIBE S1 Đánh giá smartphone selfie ZTE Blade S7 Đánh giá smartphone Samsung Galaxy S7 Đánh giá bộ đôi máy...