GBIT.Hack Css cho các trình duyệt IE, Firefox, Chrome, Safari, Opera

Nhiều trình duyệt cho người dung có nhiều lựa chọn, nhưng lại làm khó dân lập trình. Đôi khi layout bên trình duyệt này ok, mà trình duyệt khác lại lỗi. Lúc này chúng ta phải hack Css thôi, hi..

1.IE

IE9 trở về trước: "\0/":

ví dụ:

.className

{

padding:10px\0/;

}

 

Cho trình duyệt IE version 8 trở về trước “\9”:

Ví dụ:

.className{padding:10px\9;}

 



Chỉ cho IE8 "\0":

.className{padding:10px\0;}

 



IE7 và các version trước nó “*” :

.className{*padding :10px ;}

 

hoặc

* + html .class{margin-left:20px;} /* IE7 */

 



IE6 và các version trước nó “_”:

.className{_padding :10px ;}

 

hoặc

* html .logo{margin-left:10px;} /* IE6 */

 



2.Firefox

html>/**/body .className{margin-left:10px}

 

Hoặc

@-moz-document url-prefix() {
.className {{font-size: .6em;}}

html>/**/body .className, x:-moz-any-link, x:default {background:red;} /* Firefox 3 */

 



3.Chrome

body:nth-of-type(1) .className{margin:20px;}

 

Hoặc:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.className{ margin:0 26px 0 0; }
} /* hacked cho chrome và safari */

 



4.Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }

 



5.Opera

@media all and (min-width:0px) {head~body .className {margin-left:10px;}}

/* version 9 và các version trước đó /*
một cách hack khác cho IE 9

 


một cách hack khác cho IE 9 :

@media all and (min-width:0) {
#element { color:pink \0/; } /* IE9 */
}

 

Bảng mã màu cho web (web color)

Bảng mã màu sắc thông dụng và đẹp dùng cho việc thiết kế giao diện website.

F7AFB3	FFA8AC	F7C4AF	FFC0A8	FBDBAC	FFDCA8
F15F66	FF5159	F1885F	FF8151	F1B75F	FFBA51
EA151E	FF000B	EA5015	FF4700	EA9515	FF9A00
9A0E14	A80007	9A350E	A82E00	9A620E	A86500

BAEDD3	A8FFD4	BAEDED	A8FFFF	BAD3ED	A8D4FF
74DCA8	51FFA9	74DCDC	51FFFF	74A8DC	51A9FF
33CB80	00FF82	33CBCB	00FFFF	3380CB	51A9FF
228654	00A855	228686	00A8A8	225486	0055A8

F7D9AF	FFDBA8	F7E8AF	FFECA8	F7F5AF	FFFCA8
F1B55F	FFB851	F1D15F	FFD951	F1EC5F	FFFA51
EA9415	FF9800	EABC15	FFC800	EAE515	FFF900
9A610E	A86400	9A7C0E	A88400	9A970E	A8A400

F6BFB1	FFBAA8	FDC7AA	FFC6A8	FDD3AA	FFD2A8
EE8062	FF7651	FC8F54	FF8E51	FCA654	FFA551
E64419	FF3600	FB5B04	FF5900	FB7D04	FF7C00
982D10	A82300	A53B03	A83A00	A55203	A85100
C7DFDE	BFE7E5	C7D6DF	BFD9E7	C7CEDF	BFCAE7
90C0BE	80D0CD	90AFC0	80B4D0	909DC0	8095D0
5CA2A0	44BBB6	5C89A2	4491BB	5C6FA2	4464BB
2D7B78	3D5B6B	2D5F7B	3D496B	2D427B	2D427B

D3EDBA	D2FFA8	C6EDBA	BCFFA8	BAEDBB	A8FFAA
A7DC74	A6FF51	8DDC74	7AFF51	74DC77	51FF55
7ECB33	7DFF00	57CB33	3CFF00	33CB37	00FF06
538622	52A800	398622	27A800	228624	00A803
D8BAED	DCA8FF	E0BAED	EAA8FF	E9BAED	F9A8FF
B274DC	B951FF	C374DC	D651FF	D574DC	F351FF
8E33CB	9900FF	A733CB	C300FF	C133CB	EE00FF
5D2286	6400A8	6E2286	8000A8	7F2286	9D00A8

F6D2B1	FFD1A8	F6D9B1	FFDBA8	F6E1B1	FFE5A8
EEA562	FFA451	EEB462	FFB851	EEC562	FFCC51
EEA562	FFA451	EEB462	FFB851	EEC562	FFCC51
985110	A85000	986010	A86400	987010	A87700
BAE2ED	A8EDFF	BACFED	A8CBFF	BABAED	A8A9FF
74C6DC	51DBFF	749EDC	5197FF	7476DC	5154FF
33ACCB	00CBFF	3371CB	0067FF	3336CB	0004FF
227186	0085A8	224A86	0043A8	222386	0002A8

.

FDC7AA	FFCDA8	EDD4BA	FFD6A8	EDDABA	FFDFA8
FC8F54	FF8E51	DCAB74	FFAE51	DCB674	FFC051
FB5B04	FF5900	CB8533	FF8900	CB9433	FFA300
A53B03	A83A00	865722	A85A00	866122	A86B00
D9C2E4	DEB6F0	E3C2E4	F0B6EC	E4C2D3	F0B6D7
B586CA	BE6DE3	C986CA	E16DE3	CA86A8	E36DAF
934DB2	A129D6	B04DB2	D329D6	B24D80	D6298A
603375	691B8D	743375	8B1B8D	753354	8D1B5B
C0EDBA	B2FFA8	BAEDBA	A8FFA8	BAEDD4	A8FFD5
81DC74	66FF51	75DC74	52FF51	74DCAA	51FFAC
46CB33	1FFF00	34CB33	01FF00	33CB82	00FF85
2E8622	14A800	228622	00A800	228655	00A857

CFC8DE	CDC0E6	D6C8DE	D8C0E6	DEC8DE	E1C4E2
A091BF	9B81CF	AF91BF	B381CF	BD91BF	C48AC6
745DA1	6C46B8	895DA1	9046B8	9F5DA1	A953AB
4D3E6A	472F79	5A3E6A	5F2F79	693E6A	6F3771
F3B4BA	FFA8B0	F3BDB4	FFB5A8	F3CEB4	FFCBA8
E86875	FF5162	E87C68	FF6C51	E89C68	FF9751
DD2234	FF0019	DD3E22	FF2700	DD6E22	FF6700
921622	A80010	922916	A81900	924816	A84300
C8DEDE	C0E6E5	C8DBDE	C0E0E6	C8D7DE	C0DAE6
91BFBE	81CFCC	91B8BF	81C3CF	91B0BF	81B5CF
5DA19F	46B8B5	5D97A1	46A7B8	5D8BA1	4693B8
3E6A69	2F7977	3E636A	2F6E79	3E5C6A	2F6179

F7E4AF	FFE8A8	F7EDAF	FFF2A8	F7F5AF	FFFCA8
F1CB5F	FFD251	F1DC5F	FFE651	F1EC5F	FFFA51
EAB315	FFBD00	EACC15	FFDB00	EAE515	FFF900
9A750E	A87C00	9A860E	A89000	9A970E	A8A400
F3B4C8	FFA8C3	F3B4B5	FFA8A9	F3BDB4	FFB4A8
E76990	FF5187	E7696B	FF5154	E77B69	FF6951
DC235C	FF004F	DC2326	FF0004	DC3C23	FF2300
91173D	A80034	911719	A80002	912817	A81700
BAD3ED	A8D4FF	BEBAED	AFA8FF	D0BAED	CDA8FF
74A8DC	51A9FF	7D74DC	5F51FF	A174DC	9B51FF
3380CB	0082FF	4033CB	1500FF	7433CB	6C00FF
225486	0055A8	2A2286	0D00A8	4D2286	4700A8

Sưu tầm

30 tutorial hướng dẫn thiết kế web responsive

Thiết kế web responsive và những lợi ích của nó thì giờ ai trong chúng ta cũng đã nắm được. Bài viết này chúng tôi muốn hướng đến việc hướng dẫn  trau dồi các kĩ năng để bạn có thể điều khiển các mã nguồn sao cho trang web hiển thị tốt nhất trên các thiết bị khác nhau.

Và để làm được điều này chúng tôi xin giới thiệu 30 tutorial  thiết kế web responsive. Với bộ sưu tập dưới đấy thì chưa thể coi là đầy đủ nhưng nó sẽ giúp bạn ban đầu làm quen với khái niệm responsive và khả năng tương thích trên cá kích cỡ màn hình khác nhau.

Chúng tôi sẽ bắt đầu bài hướng dẫn trong “Breaking the Ice”, nó là cái gì đó gần với khái niệm Thiết kế web responsive: 101 class bạn nên xem để có dược khái niệm đầy đủ trước khi chúng ta bắt đầu xây dựng bài thực hành.

Cuối cùng chúng ta sẽ kết thúc với với một phần mở rộng trong đó chúng tôi sẽ có hướng dẫn bạn làm với bố cục ngang,video kéo thả,drop down menu,navigation accordion,thu nhỏ và các vấn đề liên quan đến table.

Đầu tiên:

Responsive website Navigation

[View tutorial]

Dưới đây là hướng dẫn để giúp bạn thực hiện tốt nhất việc responsive trong việc điều hướng website. Một trong những vấn đề quan trọng nhất của website là việc điều hướng một cách dễ dàng qua các thành phần khác nhau của website.

Responsive Resume

[View tutorial]

Nếu bạn là một chuyên gia bên lĩnh vực website, và bạn đang có sẵn một hồ sơ cá nhận online thể hiện được đầy đủ kinh nghiệm và đóng góp của bản thân bạn. Nếu vậy bạn nên tận dụng nó để giúp trang web của bạn thích nghi dễ dàng trên mọi thiết bị. Điều này sẽ giúp đỡ tích cực cho việc tăng hiệu suất hiển thị của trang web của bạn. Khi đó, hồ sơ của bạn sẽ được đánh giá cao hơn gấp nhiều lần trước đó.

Breaking the Ice

Bắt đầu hướng dẫn thiết kế web responsive

[View tutorial]

Tutorial  này là một điểm khởi đầu tuyệt vời cho những ai mới bắt đầu, nó mô tả ý nghĩa của thiết kế web responsive, làm thế nào đó cho người ta hiểu cũng như giải thích về fluid grids và media queries cho bạn.

Giới thiệu về thiết kế web responsive: Video

[View tutorial]

Đây là một hướng dân dài 9 phut để làm rõ những gì thiết kế web responsive làm được,tác động của nó đến 1 trang web,các yếu tố làm nên 1 trang web responsive. Nếu bạn đang cần tìm kiếm thiết kế web responsive làm được những gì với những dòng code đầu tiên thì bạn nên xem video này.

Làm thế nào để biết trang web được thiết kế responsive.

[View tutorial]

Đây là 1 bài hướng dẫn  bắt đầu từ những điều cơ bản

3 Bước Responsive design

[View tutorial]
Hướng dẫn này, sẽ giải thích làm thế nào để bạn có thể tạo ra một thiết kế web responsive với các thẻ meta,cấu trúc html và các truy vấn quan trọng nhất. Bạn cần phải có 1 số kiến thức css để hiểu về nó.

Thiết kế web 1 trang web responsive

[View tutorial]
Đây là viết không có  nhiều hướng dẫn vì nó giới thiệu cách để tạo  trang web responsive.  Trong bài này tác giả muốn nhấn mạnh cho bạn biết điều nên  và không nên trong thiết kế web responsive.

Thiết kế web responsive: Hướng dẫn trực quan

[View tutorial]

Nếu văn bản hướng dẫn trên không khả thi thì bạn hãy xem video clip này. Nó vẫn còn khá đơn giản những nó sẽ làm cho bạn cảm thấy dễ dàng hơn, và lại không cần phải đọc nhiều.

Start Building

Fluid Grids

[View tutorial]
Nói đến Grid bạn sẽ nghĩ rằng nó là “ cấu trúc cứng nhắc”,và nói đến Fluid bạn sẽ thì bạn sẽ nghĩ nó có thể chạy từ 1 bên màn từ phía dưới hoặc trên khi bạn dùng trình duyệt nào đó. Nhưng đặt hai yếu tố này lại với nhau thì bạn cần phải nhìn vào hướng dẫn này để có đánh giá đầy đủ  Fluid Grids có tác dụng thế nào trong thiết kế web responsive.

 
Fluid Images

[View tutorial]

Vào cuối bài viêt này, Ethan Marcotte là người bạn nên biết. Đây là 1 gợi  ý: Ông là người đã đưa ra khái niệm và thuật ngữ các thiết kế web responsive. Tên của ông của ông khá nổi lên trong một hướng dẫn khác nói về vấn đề này.

Khả năng mở rộng Mô hình Navigation trong thiết kế web responsive

[View tutorial]

Hướng dẫn này nói về những bài học rút ra tư việc làm một dự án thiết kế web responsive quy mô lớn. Đọc qua hướng dẫn làm thế nào để tạo ra các mẫu được dễ dàng. Đó là một cái nhìn tuyệt vời đằng  sau của vấn đề làm thế nào để thiết kế giao diện tốt nhất cho máy tính bàn,máy tính bản và các thiết bị đi động khác.

Thiết kế web responsive với các phương thức truy vấn css3.

[View tutorial]
Đây là hướng dẫn  tuyệt vời để bnaj hiểu thế nào là quá trình thiết kế web responvie với Html5 và Css3.

Hiệu ứng css: Không gian hình ảnh để bố trí chiều cao text.

[View tutorial]

Hướng dẫn này hỗ trợ bạn các thủ thuật cố định chiều rộng của hình ảnh, thay đổi kích cỡ, và khoảng cách của chúng sao cho hình ảnh thẳng hàng với các văn bản kèm theo, cho dù cửa sổ trình duyệt có thay đổi kích thước như thế nào

Layout tương thích với các phương tiện truy vấn.

[View tutorial]

Tìm hiểu cách sử dụng bố trí tương thích,linh hoạt với truy vấn css. Chỉ cần làm  theo bài tập này bạn sẽ học được cách tương thích các thiết kế của bạn xem 2 cột,một cột cũng như để chuẩn bị thiết kế chi iphone và ipad.

Responsive Image

[View tutorial]
Dưới đây là hưỡng dẫn sử dụng phương pháp build-from-mobile-first đầu tiên. Kỹ thuật này chỉ định kích thước hình ảnh lớn hơn sử dụng trên màn hình có độ phân giải lớn hơn.

 

Mở Rộng Thêm.

Co giãn video

[View tutorial]
Hướng dẫn này để cập đế thay đổi tỉ lê của video trên các cửa sổ trình duyệt khác nhau.

Ẩn và đưa ra 1 số phần hình ảnh

[View tutorial]

Responsive Content Navigator with CSS3

[View tutorial]

Bạn chắc hẳn muốn tìm ra một phương thức tuyệt vời hơn nữa giúp người dùng khi điều hướng trên site của bạn đều cảm thấy hài lòng và thích thú? Hãy đọc qua hướng dẫn này để biết cách lập trình, tạo ra những hiệu ứng sáng tạo, đẹp mắt.  Những hiệu ứng chuyển đổi về cơ bản chính là các layer nội dung được trình diễn hoặc ẩn đi với dòng mã cụ thể.

Tạo ra mẫu thiết kế web responsive

[View tutorial]
Đây là hướng dẫn ngắn để đưa ra cách làm mẫu web responsive hoạt động được cả trên desktop và trên cả iphone.

Responsive Horizontal Layout

[View tutorial]
Hướng dẫn này chỉ cho bạn cách tạo ra một layout ngang với nhiều bảng điều khiển nội dung thanh trượt ngang. Bạn có thể tham khảo cuốn ‘The Origin of Species”, mỗi chương trong cuốn sách này được chia trong các cột đặt cạnh các chương khác trong một chế độ trình duyệt rộng nhưng khi thu nhỏ tới một mức độ vừa đủ, bạn có thể thay đổi layout để cuốn sách được trình diễn theo chiều thẳng đứng.

Chuyển đổi menu thả xuống cho màn hình nhỏ

[View tutorial]

Hướng dẫn này sẽ giúp bạn làm thế nào  để chuyển đổi 1 menu thả xuống khi bạn đang ở trên màn hình hẹp hoặc đang trình duyệt trên 1 thiết bị động.

Flexible Slide-to-Top Accordion

[View tutorial]
Tìm hiểu cách tạo ra các layout đơn giản và linh động, với các hiệu ứng fade-in và kích thước chiều được điều chỉnh dựa vào size màn hình và độ phân giải.

How to Use CSS3 Orientation Media Queries

[View tutorial]

Dựa vào quy luật đơn giản để nhận định chân dung và chế độ (Chiều cao lớn hơn chiều rộng hay ngược lại). Bạn có thể viết một media query  nhằm mục tiêu cụ thể vào các style dựa trên chế độ bạn đang xem nó. Hướng dẫn này sẽ chỉ cho chúng ta cách để làm được điều đó.

Responsive Data Tables

[View tutorial]

Các dạng table là một vấn đề khiến nhiều người đau đầu,nhất là khi sử  dụng màn hình kích thước nhỏ nhưng điều đó không có nghĩa là chúng ta hoàn toàn phải tránh các dạng table này.
Tìm hiểu cách sử dụng các truy vấn media để thay đổi định dạng table của bạn khi trình duyệt web trên các thiết bị di động.

 

Fluid CSS3 Slideshow with Parallax Effect

[View tutorial]

Tạo ra một slideshow CSS3 sử dụng 2 hình ảnh background và khi thay đổi vị trí của background, sẽ xuất hiện một hiệu ứng parallax . Bên cạnh đó, slideshow linh động trong khả năng tự resize phù hợp với cửa sổ trình duyệt.

Làm thế nào để xây dựng một Responsive Thumbnail Gallery

[View tutorial]

Đây là một hướng dẫn tuyệt vời cho các trang web có tính năng thu nhỏ trong một thư viện. Khi cửa sổ trình duyệt được resize, layout được thay đổi giữ ở giữa 2 cột (kích thước màn hình nhỏ hơn) và 5 cột (tối đa).

Tối ưu hóa email của bạn trên các thiết bị di động


[View tutorial]

Đến cả Email cũng có thể được tối ưu hóa khi được xem trên các màn hình cỡ nhỏ. Hầu hết thời gian, văn bản trong một email HTML được resize tới một điểm mà không khiến người đọc cảm thấy khó chịu. Hãy học cách quản lý tối ưu email từ hướng dẫn này.

Sử dụng Framwork

Xây dựng một trang web di động thân thiện với Responsive Skeleton

[View tutorial]

Skeleton là một framework tuyệt vời dùng trong xây dựng các website responsive. Hướng dẫn này chỉ bạn từng bước từng bước một trong việc làm thế nào sử dụng framework Skeleton để tạo ra những thiết kế thích nghi tuyệt vời. Thật dễ dàng để bắt đầu với Skeleton!

 

Thiết kế web responsive với HTML5 và Frameword 3

[View tutorial]

Bạn chưa từng nghĩ đến và biết không nhiều về Less. Chần chừ gì nữa mà không bắt đầu với Les qua hướng dẫn Less CSS của chúng tôi, chắc chắn bạn sẽ thích đấy. Hướng dẫn này tiết lộ cho bạn sử dụng Less framework để nhìn thấy rõ ràng ảnh hưởng của các quy vấn media.

 

Hi vọng với những Tutorials trên nó sẽ giúp bạn tiếp cận,làm quen với các khái niệm về thiết kế web responsive. Hãy cho chúng tôi các ý kiến phản hồi mang tính đóng góp để chúng tôi tiếp tục xây dựng các bài viết hay hơn đáp ứng như cầu thực của bạn.

Chúc các bạn thành công và hẹn gặp lại.