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

[Thủ thuật] Quản lý Máy chủ thời gian(Time Servers)cho Windows 10

Thiết bị Windows 10 của bạn hiển thị thời gian không chính xác? Chưa hẳn là do cài đặt múi giờ đâu, hãy thử kiểm tra cài đặt Thời gian Internet xem sao nhé!

Cách tạo CV xin thực tập ấn tượng

Vì vậy, bạn đang tìm kiếm một cơ hội thực tập? Tuyệt vời! Một cách tuyệt vời để tạo sự khác biệt với đối thủ là có một CV thực tập cập nhật và bắt mắt. Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn quy trình tạo một CV

Hướng dẫn tải đăng ký tài khoản Instagram miễn phí

Với Instagram, bạn dễ dàng theo dõi những người nổi tiếng, đội bóng… mà bạn yêu thích để cập nhật những thông tin, hình ảnh nóng hổi nhất từ họ.

20 ứng dụng iOS trị giá 45 USD đang được miễn phí

Tiếp tục cập nhật danh sách 'Free App' hằng ngày dành cho iDevices, TECHRUM đã tổng hợp thêm khá nhiều ứng dụng và game trả phí đang được miễn phí trong thời gian ngắn. Nếu bạn quan tâm hãy nhanh tay tải về trước khi

Tìm hiểu chương trình Python đầu tiên

Trong bài viết này chúng ta cùng tìm hiểu một chương trình Python đơn giản để có cái nhìn rõ hơn một chút về Python, trước khi bắt đầu học về các thành phần chính của ngôn ngữ lập trình này nhé.

ĐÁNH GIÁ NHANH

Mercedes-AMG G63 2019: Xe thể thao đa dụng có khả năng việt dã đỉnh nhất hành tinh

Không chỉ nằm trong số những dòng sản phẩm cao cấp nhất Mercedes, G63 AMG còn là một trong những chiếc xe thể thao đa dụng có khả năng việt dã đỉnh nhất hành tinh ở thời điểm hiện tại. Mới đây, đã có 3 chiếc Mercedes

Trên tay LG V30: màn hình OLED đẹp, không rỗ, thiết kế hoàn thiện như Samsung

LG V30 có màn hình OLED đẹp, màu sắc rực rỡ, không rỗ và ít ám màu. So với màn hình Amoled (cũng là một dạng OLED) hiện nay trên thị trường thì khả năng hiển thị vượt trội hơn.

So sánh Xiaomi Redmi Note 10, Redmi Note 10 Pro và Redmi Note 10 Pro+

Nếu bạn đang phân vân bản thân nên mua Redmi Note 11, Redmi Note 11 Pro hay bản cao cấp nhất Redmi Note 11 Pro+ thì câu trả lời đang có ở trong bài phân tích này