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 viết thẻ mô tả chuẩn SEO như nào?

Thẻ mô tả của trang web sẽ cung cấp cho Google và các công cụ tìm kiếm khác một bản tóm tắt nội dung của trang hay bài viết. Thẻ mô tả có thể là một hoặc bai ba câu đơn giản. Google có thể sử dụng nội dung trong phần

Cách phát Wifi từ laptop Win 7/8.1/10 bằng phần mềm đơn giản

Đôi khi bạn muốn biến laptop của mình thành điểm truy cập wifi để chia sẻ với các thiết bị xung quanh. chúng tôi xin được giới thiệu đến bạn 3 phần mềm phát wifi tốt nhất hiện nay.

CV 'GQ Style' ấn tượng đã giúp anh chàng này tuyển thẳng mà không cần phỏng vấn

Nếu muốn gây được sự chú ý của nhà tuyển dụng, hãy tìm hiểu kỹ về công ty bạn muốn được nhận vào làm, đầu tư thời gian để thiết kế ra bản CV ấn tượng sao cho có thể khiến bạn trở nên nổi trội hơn so với các ứng viên

5 cách để chạy nhiều bản sao của một ứng dụng trên máy Mac

Chạy nhiều phiên bản của một ứng dụng trên máy Mac cho phép bạn làm việc với nhiều tài khoản cùng một lúc khi cần. Dưới đây là 5 giải pháp mà bạn có thể cân nhắc và lựa chọn.

Hướng dẫn cách trải nghiệm hệ điều hành Android trên macOS

iOS có lẽ là nền tảng tốt nhất mà nhiều người khuyên dùng, nhưng Android lại có một số lượng nội dung khổng lồ các ứng dụng và game mà rất đáng để khám phá. Giờ đây, bạn hoàn toàn có thể làm điều đó trên máy Mac của

ĐÁNH GIÁ NHANH

Trên tay loa DiamondBoxx size L: di động kiểu Mỹ, chất âm người lớn

Tại Việt Nam, phần lớn thị trường này có giá chỉ khoảng vài trăm nghìn cho tới 2-3 triệu đồng. Song dĩ nhiên chúng ta cũng có những ngoại lệ, đặc biệt là khi sản phẩm được đóng mác 'Handmade in USA' như Diamondboxx

Đánh giá Mitsubishi Pajero Sport 2017, đáng tiền lên đẳng cấp cao sang

Khi phân khúc SUV 7 chỗ đang có sự phân định lại, Mitsubishi đã cho thấy sự nhạy bén khi đưa Pajero Sport hoàn toàn mới nhảy vọt về chất, nâng tầm lên đẳng cấp vượt trội, sang trọng và toàn năng hơn.

So sánh iPhone 13 mini và iPhone 13: Nên mua phiên bản nào?

Tương tự iPhone 12, iPhone 13 cũng có 4 tùy chọn bao gồm: iPhone 13 mini, iPhone 13, iPhone 13 Pro và iPhone 13 Pro Max. Mỗi phiên bản đều có ưu điểm riêng, trong số đó bản iPhone 13 mini và iPhone 13 có giá bán dễ