View All results for ""
Articles by "HTML & CSS"
Hiển thị các bài đăng có nhãn HTML & CSS. Hiển thị tất cả bài đăng

vào lúc 0
thu thuat tin hoc, phan mem may tinh mien phi, tin tuc cong nghe thong tin, thu thuat dien thoai, share code free, share template free
“Nguồn của tôi” – một tiêu đề rất lạ phải không bạn. Nhưng mà lại rất cần thiết cho các bạn đã đang và sẽ là webdesigner & coder. Trong quá trình thiết kế website chắc chắn bạn rất khó khăn trong việc tìm các nguồn vector, icon, brush, hình của người mẫu, thiên nhiên….Hay thậm chí là các bài giảng, chia sẽ kinh nghiệm từ các người đi trước. Trong loại bài viết “Nguồn của tôi” mình sẽ giới thiệu với các bạn về các nguồn mà mình đã và đang dùng trong thiết kế và lập trình.
DESIGN RESOURCES

Thư viện Font miễn phí – Dafont

Dafont
Dafont hiện đang có 12,486 font với nhiều thể loại khác nhau như viết tay (Grafitti, viết ẩu…), nét thường, font theo ngày lễ (hallowen, valentine) và còn nhiều thể loại khác nữa. Các font trên dafont hầu hết đều cho bạn tải miễn phí, nếu như có khả năng thì nên donate cho font của họ. Tuy nhiên bạn cũng phải xem các qui định về chia sẽ trong tập tin Readme.txt kèm theo tập tin nén khi download về.

UTM font cho người Việt – Font chữ đẹp UTM

Dinh Kiem typo
Đây là trang portfolio của anh Michael Đinh Trung Kiên, hiện đang là Graphic designer, bắt đầu thiết kế font từ năm 2003 với font VNI-Ong Do là tác phẩm đầu tay. UTM là là viết tắt của Unicode Thiên Minh, bộ font có rất nhiều thể loại (viết tay, nét đậm, trang trí, chúc mừng năm mới), và mang đậm phong cách phương Tây lẫn phương Đông. Và hai font mà mình thực sự thích trong bộ font UTM đó là UTM Neo Sans Intel và UTM Avo, vừa mang phong cách Tây, vừa gõ được tiếng Việt. Là một webdesigner thì chắc chắn rằng UTM là một bộ font mà bạn cần phải có.

Free Icon – Iconfinder

Iconfinder
Với 155,756 icon được đăng tải và 810 icon sets được tạo ra, và tất cả đều được tải miễn phí. Wow!!! Thật tuyệt vời phải không các bạn. Đây là nơi mà mình tìm kiếm và download icon miễn phí cho các thiết kế của mình. Chỉ việc gõ từ khóa mà bạn muốn kiếm như heart, arrow, icon, facebook chẵng hạn, tất cả đều có.

Free Vectors – Vecteezy

Vector
Được thành lập vào năm 2007 bởi anh chàng Shawn, nó nhanh cóng trở thành một website chia sẽ vector miễn phí lớn. Với khẩu hiệu “Stupid Name. Cool Vector Art!”, Vecteezy tập hợp nhiều mẫu vector từ các nhà thiết kế trên thế giới tạo thành một nguồn lớn cho bạn lựa chọn. Các vector đều được tải và sử dụng miễn phí cho các dự án đồ họa và thiết kế của bạn. Tuy nhiên, khi tải về bạn phải đồng ý với những quy định do nhà thiết kế đề ra khi tải về sử dụng.

Free PSD Brushes – Brusheezy

Brush
Đây cũng là một sản phẩm nữa của anh chàng Shawn, hiện nay thì có thêm 2 người nữa cùng phát triển Jonathan và Erin. Mỗi tháng có hơn 1,2 triệu lượt download, và đang có hơn một ngàn thành viên cùng hoạt động chia sẽ trên brusheezy. Ngoài các brush mẫu thì website này còn cung cấp cả các patern, action, file psd,v.v… Chắc chắn rằng đây là nguồn mà bạn không thể bỏ qua được trong quá trình thiết kế.

Hình ảnh miễn phí – SXC

SXC
SXC đã được đưa ra vào tháng 2/2001 như một sự thay thế cho các nhà thiết kế không thể mua được các ảnh với chất lượng cao và đắt tiền ở các website khác. Ý tưởng là tạo ra một trang web nơi mà những người sáng tạo có thể trao đổi hình ảnh của họ để tìm cảm hứng làm việc. Trang web đã phát triển thành cộng đồng lớn với hơn 2.5 triệu thành viên và khoảng 400.000 hình ảnh trực tuyến từ 30.000 nhíp ảnh trên toàn thế giới được đăng tải với nhiều thể loại khác nhau (thiên nhiên, chất liệu, kiến trúc, …..) bạn chỉ vào và gõ từ khóa mình cần tìm, tiếng Anh thôi nhá.

Kuler Color

Kuler
Với chủ đề “Explore, create and share color themes” tạm dịch là “Khám phá, sáng tạo và chia sẽ màu sắc”. Kuler là một sản phẩm của ông trùm đồ họa Adobe. Với mục đích là tạo ra những bộ sưu tập màu sắc, giúp cho bạn nhanh chóng trong việc lựa chọn màu sắc cho thiết kế của mình. Với hàng ngàn bộ sưu tập được tạo ra, thì đây chắc hẵn sẽ là website mà bạn không thể bỏ qua được. Bộ công cụ này sẽ được mình giới thiệu rõ hơn trong bài 3 của series về màu sắc trong thiết kế. Đón xem nghen.

PSD Tutorials Plus

Tut plus
PSD+ thuộc hệ thống của Envato, với một đội ngũ năng động, sáng tạo, và giàu trí tưởng tượng từ khắp các nơi trên thế giới. Họ cung cấp các bài viết chia sẽ kinh nghiệm, video tutorial về photoshop từ căn bản tới nâng cao. Với cách làm việc đầy kinh ngiệm và thâm thiện chắc chắn sẽ cung cấp cho bạn những bài hướng dẫn đầy chất lượng.

Webdesign Tutorials Plus

Web plus
Webdesign+ cũng thuộc hệ thống Envato, nhưng khác với PSD+. Họ chỉ cung cấp các tư liệu về thiết kế web, cũng với một đội ngũ sáng tạo, và đầy đặng kinh nghiệm về WordPress, webdesign, html/css. Cũng với kiến thức từ căn bản tới nâng cao, các công nghệ hiện đại như HTML5 và CSS3, và còn có nhiều những tip rất hay khác đang đợi bạn khám phá.

Kết luận

Chà chà, rất nhiều đúng không các bạn. Nhưng mà đó chỉ là “Nguồn thiết kế thôi”. Trong phần sau, mình sẽ giới thiệu với các bạn “Nguồn ý tưởng”, trong bài này mình sẽ giới thiệu về những nơi mà bạn có thể học hỏi kinh nghiệm cùng chiêm ngưỡng và thả mình cùng óc sáng tạo của các webdesigner trên toàn thế giới.
Continue reading

vào lúc 0
thu thuat tin hoc, phan mem may tinh mien phi, tin tuc cong nghe thong tin, thu thuat dien thoai, share code free, share template free
Giới thiệu

Seletion là 1 tùy chỉnh của css có sẵn trong trình duyệt nhưng ít được biết được bởi tính năng của nó chẳng quan trọng gì lắm kèm theo màu mặc định của nó là xám xịt. Bạn có thể dễ dàng thấy nó khi bôi đen 1 đoạn văn bản hoặc 1 vùng trang web hoặc nhanh gọn hơn là Ctrl+A. Đây là 1 tùy chỉnh rất hay dùng để thay đổi màu khu vực select, tuy tính năng đơn giản nhưng nó dễ dàng đánh vào thị giác của người xem nếu họ lỡ tay dính bẫy.




Demo

Bôi đen hoặc Ctrl+A để thấy kết quả.
Đây là đoạn văn bản với ::selection.
Đây là đoạn văn bản với ::-moz-selection.
Đây là đoạn văn bản với ::-webkit-selection.
Cách sử dụng

Thêm các class sau vào file css của bạn, sau đó gọi lại các class này ở những yếu tố mà bạn muốn, hoặc bạn có thể dùng cho cả trang web. Tuy khá phiền phức vì phải tùy chỉnh cho các trình duyệt nhưng Selection rất nhỏ gọn và độ đẹp của nó nếu được dùng đúng cách sẽ rất tuyệt vời.
Code:
/* Cho từng phần tử bạn muốn quy định */

p.normal::selection {

background:#cc0000;

color:#fff

}

p.moz::-moz-selection {

background:#cc0000;

color:#fff

}

p.webkit::-webkit-selection {

background:#cc0000;

color:#fff

/* Dùng cho toàn trang web */

::selection {

background: #9f9

}
::-webkit-selection {

background: #9f9

}
::-moz-selection {

background: #9f9

}

Hi vọng với tay nghề gõ phím thần sầu và bộ não nhăn nheo của các designer có thể tạo ra nhiều điều hay ho với Selection
Continue reading

vào lúc 0
thu thuat tin hoc, phan mem may tinh mien phi, tin tuc cong nghe thong tin, thu thuat dien thoai, share code free, share template free
Nếu bạn đang tìm mã javascript để làm hiệu ứng "zoom ảnh" thì imageLens là plugin bạn cần. Plugin cho phép bạn tùy biến kích thước của lens, màu sắc viền lens, chọn một ảnh khác để zoom (không cần load ảnh gốc ngay từ đầu).



Cách sử dụng

Thêm jQuery và jquery.imageLens.js vào website
<script src="jquery.js" type="text/javascript"></script><script src="jquery.imageLens.js" type="text/javascript"></script>
Để gọi imageLens làm việc, bạn chỉ cần sử dụng:
$("#img_01").imageLens();

Với cách gọi này, imageLens sẽ tự động tính toán kích thước lens dựa trên kích thước của ảnh trên website và ảnh gốc. Bạn có thể xem thêm các tùy biên khác tại trang chủ plugin
Với trình duyệt IE8 về trước, bạn sẽ thấy lens có hình vuông thay vì hình tròn. Bạn có thể làm theo link: Round lens support in IE8 or below để chuyển đổi lens về hình tròn.
Continue reading

vào lúc 0
thu thuat tin hoc, phan mem may tinh mien phi, tin tuc cong nghe thong tin, thu thuat dien thoai, share code free, share template free
Chỉ dẫn, giới thiệu các tính năng quan trọng giúp người dùng hiểu chức năng, cách sử dụng website/application của bạn là việc cần thiết và nên làm. Nhưng trước khi có Guiders.js thì đây là một việc khó khăn.
Guiders.js được phát triển bởi dịch vụ A/B testing Optimizely, Guiders.js mới được chuyển qua mã nguồn mở vào ngày 22/06/2011.



Guiders.js rất mềm dẻo, giúp bạn tạo được các hộp thông báo và đặt chúng ở bất kỳ đâu trên website. Bạn cũng có thể tùy biến các sự kiện ẩn/hiện guiders. Điều này giúp cho người dùng tương tác với website/application của bạn theo đúng trình tự các bước mà bạn đưa ra.
Guiders.js phụ thuộc vào thư viện jQuery, sau khi thêm jQuery và Guiders.js vào website thì các bước để tạo chỉ dẫn rất đơn giản.
Thêm jQuery và Guiders

Đưa đoạn mã sau vào trong thẻ <head> của website của bạn:
<script type="text/javascript" src="jquery-1.5.1.min.js"></script><script type="text/javascript" src="guider.js"></script><link rel="stylesheet" href="guider.css" type="text/css" />

Tạo chỉ dẫn

Bạn có thể tạo chỉ dẫn với phương thức guider.createGuider({settings})
guider.createGuider({buttons: [{name: "Next"}],description: "Mô tả cho chỉ dẫn",id: "first",next: "second",overlay: true,title: "Chào mừng bạn đến với Ntuts.com!"}).show();/* .show() có ý nghĩa chỉ dẫn sẽ xuất hiện ngay sau khi được tạo ra. */

Các bạn có thể tìm hiểu thêm cách sử dụng ở trong ví dụ tải về của Guiders.js
Guiders.js cũng có một dịch vụ (có phí) giúp bạn tạo các chỉ dẫn, thay đổi cho website (rất tiện khi làm việc với khách hàng). Bạn có thể xem tại địa chỉhttps://optimizely.appspot.com/edit#...s.com/bai-viet, thay url bằng địa chỉ website của bạn
Continue reading
Đăng ký: Bài đăng (Atom)
Back To Top