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

Giải phóng không gian ổ đĩa cứng tự động trên Windows 10 bằng Disk Cleanup

Disk Cleanup là một trong những công cụ “bảo dưỡng” được tích hợp trên Windows trong một khoảng thời gian dài. Công cụ này cho phép người dùng giải phóng thêm không gian trên máy tính bằng cách “dọn sạch” các tập tin

Hướng dẫn sử dụng chế độ hạn chế USB mới trên iOS 12

Khi được bật, chế độ này sẽ buộc bạn phải xác thực lại bất kỳ thiết bị nào cắm vào cổng Lightning trên thiết bị iOS của bạn nếu thiết bị đã bị khóa trong hơn một giờ mà chưa từng mở khóa.

Tin tặc Trung Quốc phá website Đại học Philippines

Theo đài RFI, Philippines ngày 20/4 cho biết trang mạng của Đại học Philippines đã bị tin tặc Trung Quốc tấn công để 'trừng phạt' vụ tranh chấp chủ quyền tại Biển Đông.

H­ướng dẫn cài đặt thiết lập ban đầu cho Smart Tivi Samsung 2018

Khi bạn mới mua tivi về hoặc khi bạn mới khôi phục cài đặt gốc lại cho tivi thì tivi sẽ ở trạng thái như ban đầu với những bước thiết lập đầu tiên.

Hướng dẫn đặt mã khóa Zalo để bảo mật thông tin

Zalo là ứng dụng nhắn tin và gọi điện miễn phí, hỗ trợ mọi nền tảng di động. Sử dụng Zalo cũng cực kỳ dễ dàng. Bạn chỉ cần một chiếc điện thoại kết nối 3G hoặc Wifi để đăng ký và sử dụng Zalo ngay. Và ứng dụng này cũng

ĐÁNH GIÁ NHANH

Đánh giá Asus Zenbook Pro 14 Duo OLED: hình thức và chức năng đã hoà làm một

Asus đã làm dạng màn hình kép này được một thời gian. Giống như các mẫu trước đó của dòng Duo: một màn hình lớn 14,5 inch ở phía trên và một màn hình phụ 12,7 inch nhỏ hơn ở phía bàn phím (ScreenPad Plus). Bàn phím

5 điểm nổi bật trên iPad mini 6 có thể bạn chưa biết

Không chỉ iPhone 13, iPad mini 6 cũng có rất nhiều cải tiến và nâng cấp mới nhằm thu hút người dùng hơn so với iPad mini thế hệ cũ. Vậy những điểm nổi bật trên iPad mini 6 là gì? Liệu chúng có đủ sức kéo người dùng mặn

Thiết kế của Galaxy J8: Phần nào mang lại sự lựa chọn mới mẻ và đột phá hơn

Các smartphone dòng J ngày càng tạo được ấn tượng mạnh với người dùng bởi thiết kế được chăm chút tỉ mỉ và nhiều thay đổi phù hợp xu hướng hiện nay. Có thể nói trong những mẫu smartphone tầm trung năm nay, Galaxy J8