Thiết kế web giao diện bootrap

Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. Vậy trước hết CSS Framework là gì? Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng css nhanh hơn. Nghĩa là là nó được trừu tượng hóa lên một mức cao hơn. Thay vì bạn phải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang web của mình, thì bạn chỉ cần biết các thành phần có trên trang web như form, navbar, tooltip, dropdown-menu, modal, button,….. và add nó vào trang html của mình một cách thích hợp. Công việc còn lại là của Bootstrap.

khóa phím f5 khi hệ thống đang xử lý dữ liệu

Một số kỹ thuật website đôi lúc bạn cần phải sử dụng thủ thuật để ngăn hành vi người dùng sử dụng sai mục đích hoặc cố tình làm hệ thống của bạn bị sai không kiểm soát được. Ví dụ trường hợp khi website của bạn đang xử lý lưu đơn hàng, gửi mail xác nhận đơn hàng thay vì chờ trong vài giây đến 1 phút thì khách hàng cứ nhấn F5 liên tục làm hệ thống của bạn bị double dữ liệu.

Kỹ thuật & hiệu ứng nâng cao css

 
Hình ảnh bong bóng giống như xem trước một bức hình thu nhỏ cho điều hướng của bạn với CSS3
 
ky thuat 1
Hiệu ứng Navigation Circle với CSS3
 
Tom Kenny đã mở rộng một bộ sưu tập lightbox CSS bằng cách thêm một vài hiệu ứng chuyển động cho grid gallery của mình và quay 3D với nội dung lightbox, tất cả với CSS.
 
ky thuat 2
Thư viện hình ảnh CSS3 với hoạt hình lightbox 3D
 
 
Bài viết này chia sẻ một phòng trưng bày thử nghiệm sử dụng transform 3D CSS. Ý tưởng tạo ra một bộ sưu tập vòng tròn với một hình ảnh ở trung tâm và hai hình ảnh ở hai bên. Bởi vì nghệ thuật phối cảnh đang được sử dụng, hai hình ảnh ở bên sẽ xuất hiện không gian ba chiều khi xoay.
 
ky thuat 3
Thư viện ảnh 3D với CSS3 và jQuery
 
 
Mary Lou trình bày một hiệu ứng chuyển động cho menu điều hướng sáng tạo. Ý tưởng là để một thành phần đơn giản của các yếu tố, icon, tiêu đề chính và tiêu đề phụ được linh hoạt trên các lần chuyển động chỉ sử dụng quá trình chuyển đổi CSS và hình ảnh động.
 
ky thuat 4
Menu điều hướng CSS3 sáng tạo
 
Vâng, một kỹ thuật được phát hiện bởi Tympanus : tip này cho thấy cách thức gia tăng tính hấp dẫn cho các menu bằng cách thêm vào một hiệu ứng chuyển động thật khéo léo với nó. Ý tưởng là trượt một hình ảnh qua bên phải khi mục menu được lướt qua.
 
ky thuat 5
Tăng tính hấp dẫn cho menu của bạn với CSS3
 
David DeSandro đã tiết lộ cách thức sử dụng CSS biến đổi để tạo ra một giao diện người dùng Zoomable tương tự như của Beercamp 2011. Trong hướng dẫn này, bạn cũng sẽ học cách sử dụng JavaScript để chiếm quyền điều khiển các di chuyển trong thao tác zoom một cách khéo léo
 
ky thuat 6
Tạo giao diện người dùng zoomable
 
Cách trình bày một trang thử nghiệm lấy cảm hứng từ giao diện Flipboard
 
ky thuat 7
Flipboard Navigation
 
Yếu tố này cho thấy hiệu ứng chuyển động khác nhau khi di chuột từ các hướng khác nhau 
 
ky thuat 8
Cách chuyển động đa hướng
  
Hiệu ứng chuyển động độc đáo và sáng tạo được phát hiện thông qua Twitter khi xuất hiện một website chia sẻ code của Nhật Bản. 
  
ky thuat 9
Hiệu ứng chuyển động thực nghiệm
  
Một kỹ thuật CSS và JavaScript tạo ra hiệu ứng chuyển động “over-the-top” hiệu quả sử dụng tính biến đổi transform-origin, transform - style như transform 3D. 
  
  
Thử nghiệm của Mary Lou với adjacent, kết hợp general sibling và kiểm tra pseudo-class. Sử dụng đầu vào và các label, cô ấy đã tạo ra một accordion thật sinh động với phạm vi nội dung trên opening và closing. 
 
ky thuat 11
Accordion với CSS3
  
Khu vực text mở rộng là một lựa chọn tốt khi bạn không biết có bao nhiêu văn bản mà người sử dụng sẽ viết và bạn muốn lưu giữ nó một cách nhỏ gọn. Trong bài viết này, Neil Jenkin đã giải thích cách làm điều này trở nên đơn giản. Ngoài ra, bạn có thể nhìn thấy Textarea Auto Resize - một kỹ thuật của Louis Lazaris sử dụng yếu tố clone ẩn. 
  
Sử dụng kết hợp gerneral sibling và checked pseudo-class, chúng ta có thể chuyển đổi trạng thái của các yếu tố bằng cách kiểm tra một box hoặc button radio. Hướng dẫn này đã khám phá những thuộc tính CSS3 bằng cách tạo ra một bộ lọc portfolio thử nghiệm có thể bật tắt chức năng của các mục trong từng loại cụ thể. 
 
ky thuat 13
Bộ lọc tính năng với CSS3 
  
Phương pháp mới để được tiếp cận nhiều hơn được phát hiện bởi Roger Johnansson. Ông ấy thiết kế chỉ dựa trên việc lựa chọn các yếu tố.
 
Các bạn xem tiếp với nhiều ý tưởng hay tại website: http://tympanus.net/codrops/category/tutorials/

Một số slideshow jquery cực đẹp miễn phí

Slideshow (trình chiếu hình ảnh) chuyển động jquery, css và một số kỹ thuật khác miễn phí dùng cho các bạn lập trình, dễ sử dụng, cực đẹp...

Link download

Tạo calendar cho chọn ngày tháng năm trên textbox

Kết hợp thư viện jquery, css,UI để tạo ra calendar tiếng việt dùng cho các text cho phép người dùng chọn ngày tháng trong các form đăng ký.

Demo: http://www.thietkeweb123.com/demo/calendar

Mã nguồn cực kỳ đơn giản (xem tiếp)

Facebook chat