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

13 ứng dụng iOS trị giá 28 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, TCN đã 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 bị

Hướng dẫn cách xử lý khi máy không nhận sim

Đôi khi trong quá trình sử dụng, điện thoại hay tablet sẽ báo lỗi không nhận sim, bạn không thể gọi điện hay nhắn tin được nữa. Hãy thử các cách hướng dẫn dưới đây và tìm cho mình một hướng xử lý nhé.

Khắc phục lỗi IDM không tải file MP4 trên Chrome

Nhiều khi trong quá trình sử dụng công cụ hỗ trợ download IDM, chúng ta thường hay gặp tình trạng IDM không tự bắt link tải một số video, clip trên Youtube. Chỉ cần thay đổi một chút là tình hình sẽ

Cách kiểm tra chứng thực chữ ký số của Unikey

Là một trong những công cụ gõ tiếng Việt tốt nhất hiện nay, chính vì vậy không loại trừ có những sự giả mạo nhằm hạ thấp danh tiếng, uy tín hoặc chuộc lợi từ Unikey. Nhưng với phiên bản mới nhất Unikey 4.3, người dùng

Hướng dẫn cách cài mật khẩu tin nhắn iPhone 6s đơn giản, nhanh chóng

iPhone 6s nói riêng cũng như điện thoại nói chung đều là vật bất li thân trong cuộc sống của tất cả mọi người. Nhiều khi bạn muốn nhắn tin cho anh em đi nhậu nhưng sợ vợ biết? Muốn rủ con bạn thân đi mua sắm mà sợ

ĐÁNH GIÁ NHANH

Honda HR-V vừa ra mắt với giá từ 786 triệu đồng được trang bị những gì?

Sau sự thành công của mẫu Honda CR-V trong phân khúc crossover, Honda tiếp tục cho ra mắt mẫu xe đàn em trong phân khúc B mang tên HR-V. Với tổng chiều dài 4.334mm, Honda HR-V 5 chỗ ngồi dài tương đương với Ford

Đánh giá giao diện iOS 10: Thú vị, mới mẻ, nhiều chức năng hơn bao giờ hết

Như vậy, người dùng đã có thể cài đặt trước hệ điều hành iOS 10 chính thức trên iPhone và iPad. Vậy phiên bản này có gì mới?

Đánh giá hiệu năng Galaxy Tab A (2016) SPen: Hoạt động nhanh, chơi game tốt

Hãy cùng thực hiện đánh giá hiệu năng của sản phẩm Galaxy Tab A (2016) SPen nhé.