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 kiểm tra kết nối IPv6

Có rất nhiều người thắc mắc về việc làm thế nào để kiểm tra khả năng kết nối IPv6. Bài viết dưới đây sẽ hướng dẫn các bạn cách kiểm tra kết nối IPv6 nhé.

10 ứng dụng siêu hữu ích trên Android chưa chắc bạn đã biết

Hãy cùng Quản Trị Mạng tham khảo 10 ứng dụng siêu hữu ích trên Android chưa chắc bạn đã biết nhé!

Hướng dẫn cài đặt WordPress trên Vitual Server bằng Cloud9

Việc tải và chạy server WordPress nội bộ khá phức tạp. Nếu là nhà phát triển dày dặn kinh nghiệm, bạn nên thiết lập một máy chủ cục bộ bằng XAMPP hoặc WAMP. Nhưng nếu bạn là “ma mới” chỉ muốn “nghịch ngợm” cài đặt

Biến iPhone thành webcame cho máy tính hay camera theo dõi

Bạn đang tìm cách chiếu từ camera iPhone lên màn hình lớn hay máy tính, laptop hay sử dụng camera iPhone làm webcam máy tính hoặc camera theo dõi. Tham khảo cách thực hiện đơn giản sau đây của chúng tôi nhé.

Tính năng màn hình khóa ẩn Samsung Galaxy có lẽ bạn không bao giờ biết

Samsung hay được gọi cách khác là “Gã khổng lồ công nghệ Hàn Quốc” một trong những nhà sản xuất điện thoại thông minh phổ biến nhất hiện nay. Samsung sản xuất điện thoại cho tất cả các phân khúc dù bạn sở hữu chiếc

ĐÁNH GIÁ NHANH

Đánh giá chi tiết TOP 10 Smartwatch đáng mua nhất 2023: Ngon - Bổ - Rẻ

Trong thời đại hiện nay, với sự phát triển ngày càng mạnh mẽ của công nghệ số, nhu cầu sử dụng các thiết bị hiện đại của con người càng tăng cao. Đồng hồ giờ đây không chỉ đơn thuần là một công cụ đo thời gian, mà nó

Đánh giá ASRock Taichi: Bo mạch chủ nền tảng X99 giá tốt

ASRock X99 Taichi là sự kết hợp giữa thiết kế tốt, tính năng vừa phải và mức giá dễ chịu cho những người mới nhập môn dòng bo mạch X99. Đây là một lựa chọn rất đáng giá nếu ngân sách của bạn không cho phép.

Honda CR-V 2017 - một trong những chiếc xe bán chạy nhất của Honda

Honda CR-V 2017 là một chiếc xe thực sự tốt mặc dù cho nó không hoàn hảo đến mức không còn gì để nâng cấp, sửa chữa.