nTuts

Tạo grid CSS tùy biến với SCSS

Neo — Tue, 07 Feb 2017 14:33:42 +0000

Nhiều bạn dùng Bootstrap (hay CSS framework khác) để chia layout quen nhưng không thực sự hiểu rõ cách hoạt động của chúng. Và khi cần tùy biến hoặc thay đổi giá trị của grid thì gặp nhiều khó khăn.

Hôm nay mình sẽ hướng dẫn các bạn cách tạo 1 grid tương tự như của bootstrap với cấu trúc container, row, col-xs-x => col-sm-x => col-md-x => col-lg-x (theo mobile first). Với x là giá trị column từ 1 đến số column cao nhất bạn đặt ví dụ 12.

Cách thức hoạt động của Flexbox

Neo — Sat, 04 Feb 2017 05:30:00 +0000

Bài gốc: How Flexbox works — explained with big, colorful, animated gifs, mình xem thấy tác giả minh họa khá dễ hiểu nên dịch lại.

Thêm "trọng lực" vào website của bạn với jGravity

Neo — Fri, 16 Nov 2012 11:25:48 +0000

jGravity là một plugin của jQuery giúp thêm trọng lực vào tất cả các thành phần trên website của bạn (giống như 'Google Gravity').

Cách sử dụng

Tất cả những gì bạn cần là thêm đoạn mã $('body').jGravity(); để cho hiệu ứng thực thi. Bạn có thể gọi hàm jGravity với các phần tử khác nhưng sẽ tốt nhất với thẻ body. Phiên bản này được thử nghiệm với jQuery 1.7.2.

- Thêm jQuery và jGravity:

Cuộn nội dung với Sly

Neo — Wed, 14 Nov 2012 13:20:33 +0000

Hẳn bạn đã biết đến dạng slide carousel với plugin rất nổi tiếng carouFredSel. Với Sly bạn còn có nhiều lựa chọn hơn nữa: cuộn ngang, dọc, cuộn nội dung vô tận (ví dụ như khi bạn xem feed ở facebook).

Cũng như carouFredSel, bạn có thể dùng Sly để cuộn bất kỳ phần tử nào của HTML (thẻ div, thẻ image, li...). Plugin cũng cho bạn nhiều lựa chọn khác nhau như tự động đặt vị trí cho phần tử tiếp theo hoặc luôn luôn căn giữa phần tử.

Lựa chọn "dragContent" giúp bạn dùng chuột kéo các nội dung trong slide (tuy nhiên khi thử trên thiết bị cảm ứng thì chưa được).

Cách sử dụng

Sử dụng Sly cũng giống như các plugin khác của jQuery, rất đơn giản:

- Thêm jQuery, Sly và các plugin mà Sly yêu cầu:

Tổ hợp phím tắt cho trang web với jwerty

Neo — Sun, 28 Oct 2012 04:56:31 +0000

jwerty là một thư viện javascript giúp bạn dễ dàng tạo các tổ hợp phím tắt cho website của mình. jwerty là một thư viện nhỏ (khoảng 1.5kb khi đã nén) và không yêu cầu một frameworks javascript nào khác. Tất nhiên là nếu website của bạn có gắn sẵn các javascript framework như jQuery, Zepto.js hay Ender thì jwerty vẫn hoạt động tốt.

Menu 3D với jQuery và CSS3

Neo — Thu, 25 Oct 2012 11:54:44 +0000

Makisu là một dạng menu 3D rất mới với hiệu ứng gập khá mượt mà. Makisu sử dụng các thuộc tính 3D của CSS3 và jQuery để tự động chuyển các dạng list (dd, li) thành dạng 3D gập. Việc này tương đương với bạn phải sử dụng trình duyệt mới, hỗ trợ 3D, rất may là ở những trình duyệt không hỗ trợ thì plugin sẽ hiển thị thành dạng list bình thường.

Plugin có các lựa chọn tùy biến như thời gian thực hiện hiệu ứng, mầu sắc, perspective (chưa rõ là cái gì, liên quan đến việc transform 3D).

Hướng dẫn sử dụng

Trước tiên là thêm jQuery và Makisu vào website:

<script src="jquery.1.8.0.js"> </script>
<script src="js/makisu.js"> </script>

Bạn có thể sử dụng mã HTML dạng ul li, demo của site dùng dd như sau:

Xây dựng website huy động vốn với Selfstarter

Neo — Wed, 24 Oct 2012 04:30:06 +0000

Huy động vốn từ cộng đồng đang là một cách rất tuyệt vời để giúp phát triển dự án khởi nghiệp của bạn. Bạn hẳn đã biết đến hình thức này thông qua website Kickstarter.

Tạo một feed duy nhất từ các mạng xã hội khác nhau nhờ jQuery Socialist

Neo — Tue, 23 Oct 2012 15:20:48 +0000

Nếu bạn đang hoạt động ở nhiều mạng xã hội, bạn sẽ có nhiều tài khoản, rất nhiều cập nhật cần phải kiểm tra. Vậy tại sao bạn không gắn tất cả vào một trang web của riêng mình, với cách hiển thị cũng của riêng mình? Điều này giúp bạn tiết kiệm thời gian và trở nên chuyên nghiệp hơn.

jQuery Socialist là một plugin giúp bạn tổng hợp các hoạt động từ nhiều mạng xã hội khác nhau vào một trang duy nhất.

Plugin này có thể lấy nội dung từ Facebook, Twitter, LinkedIn, YouTube, RSS và rất nhiều các trang khác; sau đó tổng hợp lại thành một nội dung hiển thị ở dạng giống như Pinterest. Tất nhiên là bạn có thể tự thiết kế riêng cho mình một kiểu hiển thị (cần biết một chút về thiết kế, CSS và JS)

Plugin cho WordPress đang được phát triển, sắp tới có thể có cả Drupal nữa!

Các phím tắt của Windows 8

Neo — Sun, 21 Oct 2012 14:09:49 +0000

Chỉ còn 5 ngày nữa (26/10/2012) là Microsoft sẽ chính thức giới thiệu hệ điều hành mới: Windows 8. Hệ điều hành mới này của Microsoft sẽ là nền tảng chung cho nhiều loại thiết bị, từ các loại máy tính truyền thống đến các loại máy tính bảng màn hình cảm ứng. Ở Windows 8, nút windows được sử dụng nhiều hơn, có thêm các thao tác di chuột vào các góc màn hình có nhiều lựa chọn (giống ở Mac OS nhưng hình như windows 8 chưa cho tùy biến lựa chọn ở các góc này). Và tất nhiên, Windows 8 có nhiều nút tắt mới giúp bạn tiết kiệm thời gian hơn khi làm việc.

Hiệu ứng tilt-shift với photoshop CS6

Neo — Sun, 21 Oct 2012 04:40:39 +0000

Một điểm mới của Photoshop CS6 là khả năng tạo hiệu ứng tilt-shift nhanh chóng. Trong bài viết này tôi sẽ thử tạo hiệu ứng tilf-shift, bạn sẽ thấy việc này gần như là không mất thời gian. (Bạn có thể xem lại bài hướng dẫn tạo hiệu ứng tilf-shift với các phiên bản photoshop trước, bạn sẽ thấy mất thời gian hơn và hiệu quả thường là không được như ý muốn)