CSS3 10

Bài 10: Học CSS3 - 2D Transforms
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 27-10-2015 - Chuyên mục: CSS - View: 240
CSS3 2D Transforms là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D (không gian hai chiều), ví dụ bạn có thể dụng CSS3 để quay một thẻ HTML một góc 180 độ, hay kéo nhỏ kéo to khi hover chuột vào đối tượng HTML, .. Thì tất cả những hiệu ứng như vậy trong không gian hai chiều ta gọi là 2D Transforms.
Cú pháp để tạo transform như sau:

1	transform: value;

Trong đó value là một trong các giá trị sau:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

Mỗi giá trị sẽ có những công dụng khác nhau và chúng ta sẽ tìm hiểu chi tiết hơn ở các phần dưới đây.

1. Transform translate() trong CSS3

Translate() có tác dụng di chuyển đối tượng HTML từ vị trí hiện tại của nó.
Có hai tham số truyền vào như sau: translate(xpx, ypx).
Trong đó:

• xpx là  di chuyển theo hướng trái (nếu số dương) và phải (nếu số âm).
• ypx là  di chuyển theo hướng xuống (nếu số dương) và lên (nếu số âm).

Code Hack CSS:

1 2 3 4

/* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);

Ví dụ: XEM DEMO

1 2 3 4 5

h2:hover{     transform: translate(10px, 10px);     -ms-transform: translate(10px, 10px);     -webkit-transform: translate(10px, 10px); }

Kết quả: Khi bạn hover chuột vào nó sẽ di chuyển xuống phía dưới.

2. Transform rotate() trong CSS3

Rotate() dùng để xoay đối tượng HTML theo một góc độ nào đó.
Cú pháp: nó có một tham số truyền vào và đó chính là số độ mà ta muốn xoay. Nếu giá trị âm thì nó xoay ngược chiều kim đồng hồ và ngược lại nó xoay cùng chiều kim đồng hồ.

1 2 3

-ms-transform: rotate(xdeg); /* IE 9 */ -webkit-transform: rotate(xdeg); /* Safari */ transform: rotate(xdeg);

Ví dụ: XEM DEMO

1 2 3 4 5

h2:hover{     -ms-transform: rotate(20deg); /* IE 9 */     -webkit-transform: rotate(20deg); /* Safari */     transform: rotate(20deg); }

Kết quả: Đối tượng HTML xoay một góc 20 độ.

3. Transform Scale() trong CSS3

Scale() dùng để kéo giãn đối tượng HTML.
Cú pháp: 

1 2 3

-ms-transform: scale(x, y); /* IE 9 */ -webkit-transform: scale(x, y); /* Safari */ transform: scale(x, y);<br><br>

Trong đó:

• x là số lần tăng theo chiều rộng.
• y là số lần tăng theo chiều cao. 

Nghĩa là giá trị bạn nhập vào chính là tỉ lệ so với độ dài hiện tại. Nếu bạn nhập 0.5 thì nó sẽ co độ dài bằng 1/2 hiện tại, nếu bạn nhập 2 thì nó sẽ có độ dài gấp đôi.
Ví dụ: XEM DEMO

1 2 3 4 5

h2:hover{     -ms-transform: scale(1.2, 1.3); /* IE 9 */     -webkit-transform: scale(1.2, 1.3); /* Safari */     transform: scale(1.2, 1.3); }

Kết quả:

4. Transform skew() - skewX() - skewY() trong CSS3

Skew() dùng để bẻ góc độ của chiều rộng và chiều cao của đối tượng HTML.

Cú pháp:

1 2 3

-ms-transform: skew(xdeg, ydeg); /* IE 9 */ -webkit-transform: skew(xdeg, ydeg); /* Safari */ transform: skew(xdeg, ydeg);

Trong đó:

• xdeg là góc độ của hai cạnh hai bên.
• ydeg là góc độ của hai cạnh trên dưới.

Nếu bạn chỉ muốn bẻ gãy hai cạnh hai bên thì dùng cú pháp sau:

1 2 3

-ms-transform: skewX(xdeg); /* IE 9 */ -webkit-transform: skewX(xdeg); /* Safari */ transform: skewX(xdeg);

Nếu ban chỉ muốn bẻ gãy hai cạnh trên dưới thì dùng cú pháp sau:

1 2 3

-ms-transform: skewY(xdeg); /* IE 9 */ -webkit-transform: skewY(xdeg); /* Safari */ transform: skewY(xdeg);

Ví dụ: XEM DEMO

1 2 3 4 5

h2:hover{     -ms-transform: skew(20deg, 10deg); /* IE 9 */     -webkit-transform: skew(20deg, 10deg); /* Safari */     transform: skew(20deg, 10deg); }

5. Transform matrix() trong CSS3

Matrix() là hàm tổng hợp tất cả các thuộc tính ở trên, nó có 6 tham số cho phép bạn xoay, di chuyển, kéo giãn đối tượng HTML.
Đây là một thuộc tính khá phức tạp và bạn hãy quên việc ngồi vắt óc suy nghĩ để tính cho từng giá trị.
Nên để không mất thời gian thì mình sẽ không đề cập đến thuộc tính này, bạn có thể tham khảo tại đây. Hẹn một ngày không xa chúng ta sẽ có một bài về vấn đề này.

6. Lời kết

Vậy là mình đã giới thiệu xong một số thuộc tính xử lý hiệu ứng 2D cho đối tượng HTML trong CSS3, bày này chỉ mang tính chất giới thiệu để bạn hiểu ý nghĩa của từng thuộc tính nên mình không cho nhiều ví dụ.
RIêng với matrix() thì thực sự rất khó nên mình bỏ qua thuộc tính đó.
Bài viết có lấy một số hình ảnh tử W3C.

Read More

CSS3 9

Bài 09: Học CSS3 - Sử dụng @fonf-face

  0  

 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 26-10-2015 - Chuyên mục: CSS - View: 176
Trước đây nếu bạn muốn website chạy những font chữ độc và lạ mà trên máy tính của Client không cài đặt thì đó là điều không thể, trừ khi client download về và cài đặt trên máy tính của họ.
Điều phiền toái này đã được CSS3 khắc phục bằng cách bổ sung vào một rule với tên gọi là @font-face, rule này sẽ tạo ra một font định danh và nó sẽ trỏ tới một file font nào đó lưu trữ trên Internet. Điều này đã giúp các Designer thỏa sức bung ý tưởng của mình mà không còn lo ngại vấn đề font format nữa.
Trước tiên chúng ta cùng tìm hiểu một số định dạng của file fonts đã nhé.

1. Một số định dạng file font

Mình xin trích một số định nghĩa lấy từ trang W3C.
TrueType Fonts (TTF): TrueType là một định dạng được phát triển vào cuối những năm 1980 bởi Apple và Microsoft, đây là định dạng font phổ biến cho các hệ điều hành Mac OS và Windows.
OpenType Fonts (OTF): OpenType là một định dạng được phát triển dựa trên nền tảng của TrueType và nó đã được đăng ký thương hiệu bởi Microsoft. Font chữ OpenType được sử dụng phổ biến hiện nay trên các nền tảng máy tính lớn.
The Web Open Font Format (WOFF): WOFF là một định dạng sử dụng trong các trang web, nó được phát triển vào năm 2009. WOFF bản chất là một OpenType hoặc TrueType được bổ sung một số siêu dữ liệu giúp việc truyền tải qua mạng nhẹ nhàng hơn. W3C khuyến khích sử dụng định dạng này.
The Web Open Font Format (WOFF 2.0): TrueType/OpenType là một bản nén tuyệt vời hơn WOFF 1.0.
SVG Fonts/Shapes: SVG Fonts giúp hiển thị văn bản giống như một hình ảnh Graphic.
Embedded OpenType Fonts (EOT): EOT là một hình thức nén của OpenType, được phát triển bởi Microsoft và dùng để nhúng vào website.
Với danh sách các kiểu font như trên thì liệu tất cả các trình duyệt có hỗ trợ hết không? Để trả lời câu hỏi này bạn tham khảo bảng danh sách sau:

Font format	IE	Chrome	Firefox	Safary	Opera
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	Not supported	36.0	35.0*	Not supported	26.0
SVG	Not supported	4.0	Not supported	3.2	9.0
EOT	6.0	Not supported	Not supported	Not supported	Not supported

2. Sử dụng @font-face

@font-face giống như một function gom nhiều thuộc tính CSS lại kết hợp với định dạng font giúp tạo ra những loại font theo ý muốn của lập rình viên.
Ví dụ:

@font-face{

    font-family: MyFont;

    src: url(sansation_light.woff);

    font-weight: 100;

}

h2{

    font-family: MyFont;

}

Đường dẫn trỏ tới file font bạn có thể sử dụng CDN của Google hoặc trực tiếp trên host của bạn.
Thuộc tính này cũng không có gì đặc biệt, bạn có thẻ tham khảo thêm tại đây.

3. Lời kết

Đa số các layout hiện nay đều sử dụng những font mới và lạ nên việc sử dụng @font-face đóng vai trò rất quan trọng. 
Bài này kết thúc tại đây, bài tiếp theo chúng ta tìm hiểu 2D Transform trong CSS3.

Read More

CSS3 8

Bài 08: Học CSS3 - Xử lý Text
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 26-10-2015 - Chuyên mục: CSS - View: 228
CS3 hỗ trợ một số thuộc tính giúp việc xử lý text hiệu quả hơn.
Nếu trước đây chúng ta gặp khó khăn trong việc xử lý một từ quá dài và bị tràn ra ngoài thẻ HTML thì bây giờ sử dụng CSS3 sẽ giải quyết được.
Chúng ta sẽ học ba thuộc tính sau:

• text-overflow
• word-wrap
• word-break

1. Text Overflow trong CSS3

Thuộc tính text-overflow dùng để xử lý một đoạn text khi bị tràn ra ngoài thẻ HTML.
Cú pháp: text-overflow: clip|ellipsis|string|initial|inherit;
Trong đó:

• clip: là giá trị mặc định, nó sẽ kẹp các văn bản.
• ellipsis : thêm ba dấu chấm (...) nếu text bị tràn ra ngoài
• string : tự định nghĩa đoạn text nào đó thêm vào khi bị tràn ra ngoài.
• initial : thiết lập giá trị mặc định
• inherit : kế thừa giá trị từ thẻ HTML cha.

Có một số giá trị sẽ không chạy trên trình duyệt Chrome, Opera, ... nên bạn phải cân nhắc khi sử dụng. Tuy nhiên thuộc tính ellipsis thì hoạt động hầu hết các trình duyệt mới hiện nay.
Có một lưu ý nữa là  bạn phải bổ sung thêm thuộc tính overflow:hidden thì nó mới có tác dụng nhé.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8

p{     white-space: nowrap;     border: solid 1px;     width: 100px;     height: 18px;     text-overflow: ellipsis;     overflow: hidden; }

Kết quả:

2. Word Wrap trong CSS3

Thuộc tính word-wrap cho phép đoạn text xuống hàng cho dù chữ đó dài cỡ nào đi nữa.
Cú pháp: word-wrap: normal|break-word|initial|inherit;
Trong đó:

• normal: trạng thái mặc định, tức là hiển thị theo mặc định của trình duyệt
• break-word : sẽ nhảy xuống hàng nếu chữ quá dài
• initial : trở về trang thái mặc định
• inherit : kế thừa giá trị từ thẻ HTML cha

Ví dụ: XEM DEMO

1 2 3

.breakword{     word-wrap: break-word; }

Kết quả:

3. Word Break trong CSS3

Thuộc tính word-break trong CSS3 có tác dụng xử lý xuống hàng, tức là bạn có thể cho một chuỗi hiển thị và xuống hàng tại bất kì vị trí nào miễn là nó đã hiển thị full width.
Cú pháp: word-break: normal|break-all|keep-all|initial|inherit;
Trong đó:

• normal: trạng thái mặc định, tức là sẽ dừng xuống hàng theo mặc định
• break-all : có thể xuống hàng bất kì lúc nào khi nó đã hiển thị full width
• keep-all : xuống hàng nếu chữ hiển thị sẽ bị tràn (overflow)
• initial : trở về trang thái mặc định
• inherit : kế thừa giá trị từ thẻ HTML cha

Ví dụ: XEM DEMO

1 2 3 4 5 6

.break-all{     word-break: break-all; } .keep-all{     word-break: keep-all; }

Kết quả:

Bạn thấy đó chữ "bạn" đã bị bẽ gãy xuống hàng một cách không tự nhiên :3.

4. Lời kết

Còn khá nhiều thuộc tính hay nữa nhưng mình không thể liệt kê đầy đủ ở đây được, bạn co thể lên trang W3C để tham khảo nhé.
Bài tiếp theo chúng ta sẽ tìm hiểu thuộc tính font-face trong CSS3.

Read More

CSS3 7

Bài 07: Học CSS3 - Text Shadow - Box Shadow

 0 

 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 25-10-2015 - Chuyên mục: CSS - View: 202
Thêm một sự bất ngờ nữa dành cho những bạn yêu mến lập trình CSS3 đó là tạo hiệu ứng shadow mà chỉ có CSS3 mới làm được.
Với CSS3 bạn có thể thêm shadow vào một đoạn text, border của thẻ HTML bằng cách sử dụng hai thuộc tính:

• text-shadow dành cho đoạn text
• box-shadow dành cho thẻ HTML

Hình minh họa:

1. Text-shadow trong CSS3

Thuộc tính CSS3 text-shadow bổ sung hiệu ứng shadow vào một đoạn text giúp nó hiển thị giống chữ 3D chuyên nghiệp.
Ví dụ: XEM DEMO

1 2 3

h2{     text-shadow: 2px 2px; }

Kết quả:

Bây giờ chúng ta cùng tìm hiểu cú pháp của nó nhé:

1	text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Trong đó:

• h-shadow : vị trí bóng ngang so với chữ, số âm sẽ đẩy lên trên và số dương sẽ đẩy xuống dưới
• v-shadow : vị trí bóng dọc so với chứ, số âm sẽ đẩy lui phía sau và số dương sẽ đẩy tới phía trước
• blur-radius : độ nhòe của chữ bóng, tính bằng pixel
• color : màu sắc của bóng, chấp nhận các định dạng màu sắc trong CSS3.

Ví dụ: XEM DEMO

Sử dụng nhiều Color shadow:

Nếu bạn muốn shadow có nhiều màu sắc thì hãy bổ sụng thêm shadow cho nó và chúng cách nhau bởi dấu phẩy.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8

h2{     text-align: center;     text-shadow:         0px 0px 10px red,         0px 0px 20px blue,         0px 0px 30px yellow,         0px 0px 40px pink; }

Kết quả:

2. Box-shadow trong CSS3

Hiệu ứng tương tự như text-shadow nhưng nó có tác dụng đối với đường viền (lề) chứ không phải tác dụng với đoạn text.
Ví dụ: XEM DEMO

1 2 3 4 5

h2{     height: 100px;     width: 200px;     box-shadow: 0px 0px 10px red; }

Kết quả:

Cú pháp của box-shadow như sau:

1	box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;

Trong đó:

• h-shadow : vị trí bóng ngang so với chữ, số âm sẽ đẩy lên trên và số dương sẽ đẩy xuống dưới
• v-shadow : vị trí bóng dọc so với chứ, số âm sẽ đẩy lui phía sau và số dương sẽ đẩy tới phía trước
• blur-radius : độ nhòe của chữ bóng, tính bằng pixel
• spread: kích thước của bóng tối.
• color : màu sắc của bóng, chấp nhận các định dạng màu sắc trong CSS3.
• inset: thay đổi bóng từ bên ngoài vào trong thay vì từ trong ra ngoài
• initial: thiết lập giá trị mặc định
• inherit: kế thừa giá trị từ thẻ HTML cha

Code Hack CSS:

1 2	-moz-box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit; -webkit-box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;

Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#box1{     box-shadow: 0px 0px 12px 10px red;     -moz-box-shadow: 0px 0px 12px 10px red;     -webkit-box-shadow: 0px 0px 12px 10px red; } #box2{     box-shadow: 0px 0px 12px 10px red inset;     -moz-box-shadow: 0px 0px 12px 10px red inset;     -webkit-box-shadow: 0px 0px 12px 10px red inset; } #box3{     box-shadow: 5px 5px 12px 0px red;     -moz-box-shadow: 5px 5px 12px 0px red;     -webkit-box-shadow: 5px 5px 12px 0px red; } #box4{     box-shadow: 5px 5px 0px 0px red;     -moz-box-shadow: 5px 5px 0px 0px red;     -webkit-box-shadow: 5px 5px 0px 0px red; } #box5{     box-shadow: -5px -5px 5px 0px red;     -moz-box-shadow: -5px -5px 5px 0px red;     -webkit-box-shadow: -5px -5px 5px 0px red; }

Kết quả:

Sử dụng nhiều shadow:

Tương tự như text-shadow ta chỉ cần bổ sung các shadow và chúng cách nhau bởi dấu phẩy.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

h2{     height: 100px;     width: 200px;     text-align: center;     margin: 20px;     border: solid 1px red;     box-shadow:         0px 0px 5px 5px red,         0px 0px 5px 10px blue,         0px 0px 5px 15px pink;     -moz-box-shadow:         0px 0px 5px 5px red,         0px 0px 5px 10px blue,         0px 0px 5px 15px pink;     -webkit-box-shadow:         0px 0px 5px 5px red,         0px 0px 5px 10px blue,         0px 0px 5px 15px pink; }

Kết quả:

3. Lời kết

Vậy là ta đã tìm hiểu xong hai thuộc tính trong CSS3 dùng để tạo hiệu ứng shadow đó là text-shadow và box-shadow, hai hiệu ứng này sử dụng khá nhiều trong các giao diện web hiện nay.
Để hiểu rõ thì ban nên làm theo các ví dụ và tự thay đổi các giá trị để xem kết quả nhé.

Read More

CSS3 6

Bài 06: Học CSS3 - Gradient Background
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 25-10-2015 - Chuyên mục: CSS - View: 246
Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây.

Thì bạn hoàn toàn có thể làm điều này trong CSS3  bằng cách sử dụng thuộc tính background kêt hợp với giá trị Gradient.
Trong CSS3 hỗ trợ hai loại Gradient:

• Linear Gradients (Kéo theo các vị trí lên, xuống, trái, phải, đường chéo)
• Radial Gradients (Kéo tại vị trí do lập trình viên chọn và lan tỏa ra tứ phía theo một hình nào đó (ví dụ ellipse))

1. Linear Gradients trong CSS3

Cú pháp:

1	background : linear-gradient(direction, color1, color2, color3, color4, ...)

Trong đó direction gồm các giá trị: 

• Giá trị đơn to top hoặc to left hoặc to right hoặc to bottom thì nó sẽ kéo theo cạnh đối diện
• Giá trị đôi (to top left) hoặc (to left right) nếu bạn muốn chỉ rõ kéo từ cạnh nào sang cạnh nào (tức là đường chéo)

Nếu ta không truyền direction thì theo mặc định nó sẽ có giá trị top (tức là top - bottom)
Tương tự chúng ta có code Hack CSS như sau:

1 2 3

background: -webkit-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Firefox 3.6 to 15 */

Có một lưu ý là đối với code Hack CSS thì direction không có chữ to.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

div{     float : left;     width: 200px;     height: 100px;     margin: 10px; } #div1{     background : linear-gradient(red, yellow); } #div2{     background : linear-gradient(to left, red, yellow);     background : -moz-linear-gradient(left, red, yellow);     background : -webkit-linear-gradient(left, red, yellow);     background : -o-linear-gradient(left, red, yellow); } #div3{     background : linear-gradient(to right, red, yellow);     background : -moz-linear-gradient(right, red, yellow);     background : -webkit-linear-gradient(right, red, yellow);     background : -o-linear-gradient(right, red, yellow); } #div4{     background : linear-gradient(to bottom left, red, yellow);     background : -moz-linear-gradient(bottom left, red, yellow);     background : -webkit-linear-gradient(bottom left, red, yellow);     background : -o-linear-gradient(bottom left, red, yellow); }

Kết quả:

Sử dụng Angles:

Bạn có thêm sự lựa chọn đó là sử dụng góc thay vì xác định hướng (to left, to right ...) bằng cách sử dụng cú pháp sau:

1	background: linear-gradient(angle, color-stop1, color-stop2);

Trong đó Angle là góc xá định giữa đường ngang và đường Gradient đi ngược chiều của kim đồng hồ. Hay nói cách khác 0deg sẽ tạo bottom to top Gradient, 90deg sẽ tạo left to right Gradient.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

div{     float : left;     width: 200px;     height: 100px;     margin: 10px; } #div1{     background : linear-gradient(0deg, red, yellow);     background : -moz-linear-gradient(0deg, red, yellow);     background : -webkit-linear-gradient(0deg, red, yellow);     background : -o-linear-gradient(0deg, red, yellow); } #div2{     background : linear-gradient(90deg, red, yellow);     background : -moz-linear-gradient(90deg, red, yellow);     background : -webkit-linear-gradient(90deg, red, yellow);     background : -o-linear-gradient(90deg, red, yellow); } #div3{     background : linear-gradient(180deg, red, yellow);     background : -moz-linear-gradient(180deg, red, yellow);     background : -webkit-linear-gradient(180deg, red, yellow);     background : -o-linear-gradient(180deg, red, yellow); } #div4{     background : linear-gradient(360deg, red, yellow);     background : -moz-linear-gradient(360deg, red, yellow);     background : -webkit-linear-gradient(360deg, red, yellow);     background : -o-linear-gradient(360deg, red, yellow); }

Kết quả:

Sử dụng nhiều màu:

Nếu bạn muốn trộn nhiều màu với nhau thì chỉ việc bổ sung màu vào thuộc tính Gradient, nhưng bạn phải lưu ý rằng thứ tự màu phải được sắp xếp cho đúng nhé.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : linear-gradient(to bottom, red, yellow, pink, blue, green);     background : -moz-linear-gradient(bottom, red, yellow, pink, blue, green);     background : -webkit-linear-gradient(bottom, red, yellow, pink, blue, green);     background : -o-linear-gradient(bottom, red, yellow, pink, blue, green); }

Kết quả:

Sử dụng Transparency:

Ở bài tìm hiểu Color trong CSS3 chúng ta đã học cách sử dụng HSLA Color hoặc RGBA Color để tạo độ trong suốt, vậy thì chúng ta cũng có thể kết hợp nó trong Gradient để tạo độ trong suốt.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : linear-gradient(to bottom, rgba(255,0,0,0.5), blue);     background : -moz-linear-gradient(bottom, rgba(255,0,0,0.5), blue);     background : -webkit-linear-gradient(bottom, rgba(255,0,0,0.5), blue);     background : -o-linear-gradient(bottom, rgba(255,0,0,0.5), blue); }

Kết quả:

Lặp - repeating-linear-gradient:

Bạn thấy dù chiều cao và chiều rộng của đối tượng HTML bao nhiêu đi nữa thì nó vẫn phủ đầy, nhưng giả sử giờ mình muốn nó chỉ chiếm một khoảng nào đó và lặp tiếp tục lặp lại thì ta dùng thuộc tính repeating-linear-gradient.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : repeating-linear-gradient(to bottom, red 10%, blue 20%);     background : -moz-repeating-linear-gradient(bottom, red 10%, blue 20%);     background : -webkit-repeating-linear-gradient(bottom, red 10%, blue 20%);     background : -o-repeating-linear-gradient(bottom, red 10%, blue 20%); }

Kết quả:

2. Radial Gradients trong CSS3

Radial Gradient dùng để tạo hiệu ứng tại vị trí nào đó (do lập trình viên chọn)  và lan tỏa ra tứ phía, và để có được hiệu ứng thì chắc chắn ban phải sử dụng ít nhất hai màu sắc khác nhau.
Cú pháp: 

1	background: radial-gradient(shape size at position, start-color, ..., last-color);

Trong đó Shape mặc định là hình Ellipse, size là farthest-corner và position là center.
Code Hack CSS:

1 2 3

background: -moz-radial-gradient(shape, position, size, start-color, ..., last-color); background: -webkit-radial-gradient(shape, position, size, start-color, ..., last-color); background: -o-radial-gradient(shape, position, size, start-color, ..., last-color);

Lưu ý: Phải sử dụng đúng cấu trúc cú pháp trên

Phân chia khoảng màu đồng đều:

Theo mặc định thì các màu sẽ được chia một khoảng không gian bằng nhau.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : radial-gradient(red, blue, pink);     background : -moz-radial-gradient(red, blue, pink);     background : -webkit-radial-gradient(red, blue, pink);     background : -o-radial-gradient(red, blue, pink); }

Kết quả:

Tùy chọn khoảng màu:

Nếu bạn muốn thiết lập mỗi màu sắc chiếm một khoảng bao nhiêu đó thì thêm số phần trăm (%) đằng sau màu đó (khoảng cách tính từ vị trí trung tâm, nghĩa là màu sau phải lớn hơn màu trước).
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : radial-gradient(red 10%, blue 60%, pink 90%);     background : -moz-radial-gradient(red 10%, blue 60%, pink 90%);     background : -webkit-radial-gradient(red 10%, blue 60%, pink 90%);     background : -o-radial-gradient(red 10%, blue 60%, pink 90%); }

Kết quả:

Tùy chọn Shape:

Mặc đình là ellipse nhưng bạn có thể thay thế bằng circle.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : radial-gradient(circle, red 10%, blue 90%);     background : -moz-radial-gradient(circle, red 10%, blue 90%);     background : -webkit-radial-gradient(circle, red 10%, blue 90%);     background : -o-radial-gradient(circle, red 10%, blue 90%); }

Kết quả:

Tùy chọn Size:

Chúng ta có bốn giá trị sau:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Mặc định nếu không chọn size thì nó sẽ lấy farthest-side.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

div{     float : left;     width: 200px;     height: 200px;     margin: 10px;     color: #fff; } #div1{     background : radial-gradient(circle closest-side, red, blue);     background : -moz-radial-gradient(circle, closest-side, red, blue);     background : -webkit-radial-gradient(circle, closest-side, red, blue);     background : -o-radial-gradient(circle, closest-side, red, blue); } #div2{     background : radial-gradient(circle farthest-side, red, blue);     background : -moz-radial-gradient(circle, farthest-side, red, blue);     background : -webkit-radial-gradient(circle, farthest-side, red, blue);     background : -o-radial-gradient(circle, farthest-side, red, blue); } #div3{     background : radial-gradient(circle closest-corner, red, blue);     background : -moz-radial-gradient(circle, closest-corner, red, blue);     background : -webkit-radial-gradient(circle, closest-corner, red, blue);     background : -o-radial-gradient(circle, closest-corner, red, blue); } #div4{     background : radial-gradient(circle farthest-corner, red, blue);     background : -moz-radial-gradient(circle, farthest-corner, red, blue);     background : -webkit-radial-gradient(circle, farthest-corner, red, blue);     background : -o-radial-gradient(circle, farthest-corner, red, blue); }

Kết quả:

Tùy chọn Position:

Nếu bạn muốn vị trí trung tâm không nằm ở giữa nữa thì có thể chọn một vị trí bất kì bằng cách nhập khoảng cách so với lề trái và lề trên, đơn vị của nó có thể là % hoặc px.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     float : left;     width: 300px;     height: 200px;     margin: 10px;     background : -moz-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);     background : -webkit-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);     background : -o-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);     background : radial-gradient(circle farthest-side at 100px 200px, red 10%, blue 90%); }

Kết quả:

Lặp - repeating-radial-gradient:

Tương tự như Linear Gradient bạn có thể repeat Radial Gradient bằng cách sử dụng thuộc tính repeating-radial-gradient.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11

div{     float : left;     width: 200px;     height: 200px;     margin: 10px;     color: #fff;     background : repeating-radial-gradient(circle closest-side, red 10%, blue 20%);     background : -moz-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%);     background : -webkit-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%);     background : -o-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%); }

Kết quả:

3. Lời kết

Gradient trong CSS3 quả nhiên lợi hại phải không các bạn, ban đầu mình cũng không thể tưởng tượng được CSS lại có thể làm được những tấm hình như vậy nhưng khi nghiên cứu mới thực sự tin.
Bài này rất đơn giản nên bạn phải vận dụng thêm các thuộc tính khác nữa mới có thể tạo những hiệu ứng độc và đẹp mắt

Read More

CSS3 5

Bài 05: Học CSS3 - Định dạng màu sắc
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 24-10-2015 - Chuyên mục: CSS - View: 189
CSS3 hỗ trợ nhận diện color bằng tên màu, mã hexadecimal và mã RGB. 
Trong bài này chúng ta sẽ tìm hiểu một số định dạng mã màu thường sử dụng như RGBA colors, HSL colors, HSLA colors,Name colors và đặc biệt hơn là tìm hiểu thuộc tính opacity.
Các thuộc tính và mã màu đều được hỗ trợ ở hầu hết các trình duyệt hiện đại hiện nay.

1. RGBA Colors

RGBA color là một phần mở rộng của RGB color với thành phần bổ sung là chỉ số opacity. Cú pháp của loại màu này là rgba(reg, green, blue, alpha) trong đó alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.
Ví dụ: Màu đỏ có độ alpha tăng dần
rgba(255, 0, 0, 0.1);
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.3);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.5);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.7);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0, 0.9);
rgba(255, 0, 0, 1.0);
Vi dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#red{     background-color: rgba(255,0,0,1); } #green{     background-color: rgba(0,255,0,1); } #blue{     background-color: rgba(0,0,255,1); } #gray{     background-color: rgba(192,192,192,1); } #yellow{     background-color: rgba(255,255,0,1); }

2. HSL Colors

HSL là chữ viết tắt của Hue, Saturation và Lightness, ký hiệu của nó là hsl(hue, saturation, lightness).
Trong đó:

• Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
• Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
• Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Ví dụ: Mã màu đỏ giảm dần,
hsl(0, 100%, 10%);
hsl(0, 100%, 20%);
hsl(0, 100%, 30%);
hsl(0, 100%, 40%);
hsl(0, 100%, 50%);
hsl(0, 100%, 60%);
hsl(0, 100%, 70%);
hsl(0, 100%, 80%);
hsl(0, 100%, 90%);
hsl(0, 100%, 100%);
Ví dụ: XEM DEMO

1 2 3 4 5 6

#green {background-color:hsl(120,100%,50%);} #light-green {background-color:hsl(120,100%,75%);} #dark-green {background-color:hsl(120,100%,25%);} #pastel-green {background-color:hsl(120,60%,70%);} #violet {background-color:hsl(290,100%,50%);} #pastel-violet {background-color:hsl(290,60%,70%);}

3. HSLA Colors

HSLA Color là một phần mở rộng của HSL color với thành phần bổ sung là giá trị của alpha (opacity color).
Cú pháp của loại màu này là hsla(hue, saturation, lightness, alpha). Trong đó:

• Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
• Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
• Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.
• Alpha  alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Ví dụ:
hsla(0, 100%, 10%, 0.3);
hsla(0, 100%, 20%, 0.3);
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 40%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 60%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 80%, 0.3);
hsla(0, 100%, 90%, 0.3);
hsla(0, 100%, 100%, 0.3);
Ví dụ: XEM DEMO

1 2 3 4 5 6

#green {background-color:hsla(120,100%,50%,0.3);} #light-green {background-color:hsla(120,100%,75%,0.3);} #dark-green {background-color:hsla(120,100%,25%,0.3);} #pastel-green {background-color:hsla(120,60%,70%,0.3);} #violet {background-color:hsla(290,100%,50%,0.3);} #pastel-violet {background-color:hsla(290,60%,70%,0.3);}

4. Opacity

Một câu hỏi được đặt ra là trường hợp ta sử dụng mã màu dạng HSL thì làm thế nào để bổ sung giá trị của alpha? Câu trả lời là bạn sẽ sử dụng thuộc tính opacity để làm việc này.
Tuy nhiên nó sẽ có nhược điểm là text cũng sẽ bị mờ theo, vì vậy nếu trường hợp background của bạn có trong suốt thì nên dùng mã HSLA.
Ví dụ:
hsl(0, 100%, 10%); opacity:0.3;
hsl(0, 100%, 20%); opacity:0.3;
hsl(0, 100%, 30%); opacity:0.3;
hsl(0, 100%, 40%); opacity:0.3;
hsl(0, 100%, 50%); opacity:0.3;
hsl(0, 100%, 60%); opacity:0.3;
hsl(0, 100%, 70%); opacity:0.3;
hsl(0, 100%, 80%); opacity:0.3;
hsl(0, 100%, 90%); opacity:0.3;
hsl(0, 100%, 100%); opacity:0.3;
Ví dụ: XEM DEMO

1 2 3 4 5 6

#green {background-color:hsl(120,100%,50%); opacity: 0.3} #light-green {background-color:hsl(120,100%,75%); opacity: 0.3} #dark-green {background-color:hsl(120,100%,25%); opacity: 0.3} #pastel-green {background-color:hsl(120,60%,70%); opacity: 0.3} #violet {background-color:hsl(290,100%,50%); opacity: 0.3} #pastel-violet {background-color:hsl(290,60%,70%); opacity: 0.3}

5. HEX Colors

Đây là loại mã màu thông dụng nhất không chỉ ở CSS mà trong các công cụ thiết kế như Photoshop cũng sử dụng. 
Cấu trúc của nó như sau: #xxxxxx. Trong đó dấu # là khai báo loại mã màu HEX và xxxxxx là các giá trị có thể chữ cái hoặc chữ số. 
Ví dụ điển hình nhất là mã màu trắng là #ffffff và mã màu đen là #000000.
Sau đây là bảng mã màu cho bạn tham khảo:

EEEEEE	DDDDDD	CCCCCC	BBBBBB	AAAAAA	999999
888888	777777	666666	555555	444444	333333
222222	111111	000000	FF0000	EE0000	DD0000
CC0000	BB0000	AA0000	990000	880000	770000
660000	550000	440000	330000	220000	110000
FFFFFF	FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00
CCFFFF	CCFFCC	CCFF99	CCFF66	CCFF33	CCFF00
99FFFF	99FFCC	99FF99	99FF66	99FF33	99FF00
66FFFF	66FFCC	66FF99	66FF66	66FF33	66FF00
33FFFF	33FFCC	33FF99	33FF66	33FF33	33FF00
00FFFF	00FFCC	00FF99	00FF66	00FF33	00FF00
FFCCFF	FFCCCC	FFCC99	FFCC66	FFCC33	FFCC00
CCCCFF	CCCCCC	CCCC99	CCCC66	CCCC33	CCCC00
99CCFF	99CCCC	99CC99	99CC66	99CC33	99CC00
66CCFF	66CCCC	66CC99	66CC66	66CC33	66CC00
33CCFF	33CCCC	33CC99	33CC66	33CC33	33CC00
00CCFF	00CCCC	33CC66	33CC33	00CC99	00CC66
00CC33	00CC00	FF99FF	FF99CC	FF9999	FF9966
FF9933	FF9900	CC99FF	CC99CC	CC9999	CC9966
CC9933	CC9900	9999FF	9999CC	999999	999966
999933	999900	6699FF	6699CC	669999	669966
669933	669900	3399FF	3399CC	339999	339966
339933	339900	0099FF	0099CC	009999	009966
009933	009900	FF66FF	FF66CC	FF6699	FF6666
FF6633	FF6600	CC66FF	CC66CC	CC6699	CC6666
CC6633	CC6600	9966FF	9966CC	996699	996666
996633	996600	6666FF	6666CC	666699	666666
666633	666600	3366FF	3366CC	336699	336666
336633	336600	0066FF	0066CC	006699	006666
006633	006600	FF33FF	FF33CC	FF3399	FF3366
FF3333	FF3300	CC33FF	CC33CC	CC3399	CC3366
CC3333	CC3300	9933FF	9933CC	993399	993366
993333	993300	6633FF	6633CC	663399	663366
663333	663300	3333FF	3333CC	333399	333366
333333	333300	0033FF	FF3333	0033CC	003399
003366	003333	003300	FF00FF	FF00CC	FF0099
FF0066	FF0033	FF0000	CC00FF	CC00CC	CC0099
CC0066	CC0033	CC0000	9900FF	9900CC	990099
990066	990033	990000	6600FF	6600CC	660099
660066	660033	660000	3300FF	3300CC	330099
330066	330033	330000	0000FF	0000CC	000099
000066	000033	00FF00	00EE00	00DD00	00CC00
00BB00	00AA00	009900	008800	007700	006600
005500	004400	003300	002200	001100	0000FF
0000EE	0000DD	0000CC	0000BB	0000AA	000099
000088	000077	000055	000044	000022	000011

6. Color Name

Đây là cú pháp đơn giản nhất để xác định màu trong CSS. Tuy nhiên không khuyến khích bạn sử dụng bởi vì nó không phải là một dạng chuẩn của color và nó cũng không chứa đầy đủ màu.
Ví dụ: 

• black : màu đen
• red : màu đỏ
• pink : màu hồng
• white : màu trắng
• yellow : màu vàng

7. Lời kết

Qua bài này mình đã giới thiệu đầy đủ các định dạng màu sắc có thể sử dụng trong CSS nói chung và trong CSS3 nói riêng. 
Qua bài này ta cũng rút được kinh nghiệm là nếu sử dụng màu background có trong suốt thì nên sử dụng định dạng màu RGBA hoặc HSLA. Thứ hai nữa là không nên sử dụng màu theo tên tiếng anh bởi vì nó khó quản lý và ko đúng chuẩn.

Read More

CSS3 4

Bài 04: Học CSS3 - Các thuộc tính Backgrounds

 0 

 Google +0 

 

  0

Đăng bởi: TheHalfHeart - Vào ngày: 24-10-2015 - Chuyên mục: CSS - View: 213

Trong CSS3 hỗ trợ thêm một số tính năng mới để xử lý background, đó là những thuộc tính xử lý nâng cao hơn thuộc tính background thông thường.

Bình thường nếu muốn có hai background nằm đè nhau thì ta phải sử dụng hai thẻ HTML, nhưng với CSS3 thì nó hỗ trợ multiple background (đa backgrouds).

Chúng ta sẽ học những thuộc tính sau:

• background-size
• background-origin
• background-clip
• background-image
• background

1. CSS3 Multiple backgrouds

CSS3 cho phép thêm nhiều backgrounds cho một thẻ HTML bằng cách sử dụng thuộc tính background-image. 

Nếu cú pháp của thuộc tính background là:

background : url(link-to-file.png)

Thì cú pháp của multiple background là:

background :       url(link-to-file1.png),      url(link-to-file2.png)      ...;

Lúc này để thiết lập các thuộc tính cho từng image thì ta sử dụng cấu trúc như sau:

background-position: top left, right bottom;  background-repeat: no-repeat, no-repeat

Nghĩa là dùng dấu phẩy để thiết lập cho từng background tương ứng ở trên.

Ví dụ: XEM DEMO

div  {      width: 620px;      height: 350px;      background-image:               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png),               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg);      background-position: center center, center center;      background-repeat: no-repeat, no-repeat  }

Kết quả:

Nếu bạn cảm thấy code trên dài dòng quá thì có thể sử dụng thuộc tính backgroud như ví dụ sau:

div      {          width: 620px;          height: 350px;          background:                   url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center,                   url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;      }

Thay vài code CSS trên bạn sẽ thấy kết quả như nhau.

2. Cấu hình kích thước cho background (background-size)

Thường thì chúng ta không thể thay đổi kích thước của background được nhưng với CSS3 thì hoàn toàn có thể bằng cách sử dụng thuộc tính background-size.

Ví dụ: XEM DEMO

div  {      width: 620px;      height: 350px;      background:               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center,               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;      background-size: 200px 200px, 300px 300px;  }

Kết quả:

Nếu chúng ta thiết lập kích thước cố định cho background như vậy thì không thể chạy tốt trong thiết kế responsive được vì responsive co giãn nên không có định chiều cao và chiều rộng. Lúc này ta sẽ lựa chọn sử dụng hai giá trị chuẩn sau đây:

• contain: background sẽ có tác dụng như thẻ img, nghĩa là nó sẽ co giãn theo chiều rộng và chiều cao theo đúng tỉ lệ của hình ảnh.
• cover: Nếu chiều rộng và chiều cao của thẻ HTML lớn hơn hình ảnh thì nó sẽ giãn ra (full)

Ví dụ cover: XEM DEMO

div  {      width: 800px;      height: 800px;      background:               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;      background-size: cover;  }  

Trong ví dụ này vì thẻ HTML lớn nên hình background nó kéo giãn ra cho khớp.

Ví dụ contain: XEM DEMO

div  {      width: 800px;      height: 100px;      border: solid 1px;      background:               url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;      background-size: contain;  }

Trong ví dụ này thẻ HTML có chiều rộng dài và chiêu cao ngắn nên hình nó sẽ fix theo chiều cao, vì vậy chiều cao full mà chiều rộng thì không full.

3. Thuộc tính background-origin trong CSS3

Thuộc tính background-origin trong CSS3 dùng để xác đinh nơi mà background hình ảnh sẽ hiển thị. Nó có ba giá trị sau đây:

• border-box: biên của background tính luôn border ngoài cùng
• padding-box: biên của background tính từ vị trí padding (sát lề border)
• content-box: biên của backgroudn tính từ vị trí có thể sử dụng

Xem hình mô tả sau để dễ hiểu hơn.

Ví dụ: XEM DEMO

div{     width: 250px;     height: 100px;     margin: 20px auto;     border: solid 20px;     padding: 50px;     background: url(http://freetuts.net/upload/tut_post/images/2015/10/23/478/hoa-hong-dep.gif) no-repeat top left;  }    #div1{      background-origin: border-box;  }    #div2{      background-origin: padding-box;  }    #div3{      background-origin: content-box;  }  

4. Thuộc tính background-clip trong CSS3

Thuộc tính backgroud-clip trong CSS3 dùng để xác định nơi mà background color sẽ hiển thị. Nó có ba giá trị sau:

• border-box: biên của background tính luôn border ngoài cùng
• padding-box: biên của background tính từ vị trí padding (sát lề border)
• content-box: biên của backgroudn tính từ vị trí có thể sử dụng

Như vậy công dụng của nó tương tự như background-origin nhưng nó có tác dụng với background color còn background-origin thì có tác dụng với background image.

Ví dụ: XEM DEMO

div{     width: 250px;     height: 100px;     margin: 20px auto;     border: dotted 10px;     padding: 50px;     background: blue;  }    #div1{      background-clip: border-box;  }    #div2{      background-clip: padding-box;  }    #div3{      background-clip: content-box;  }

5. Lời kết

Việc xử lý multiple background là một tính năng khá hay trong CSS3 bởi nó giải quyết được vấn đề bổ sung thẻ HTML để tạo background. Bên cạnh đó các thuộc tính như background-origin và backgroud-clip cũng giúp cho coder có nhiều sự lựa chọn hơn.

Một ngày không xa chúng ta sẽ gặp lại những thuộc tính này.

Read More

CSS3 3

Bài 03: Học CSS3 - border-image - tạo đường viền bằng hình

 0 

 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 23-10-2015 - Chuyên mục: CSS - View: 345
Có một số đường viền mang những hoa văn rất đẹp mà ta không thể sử dụng thuộc tính border trong CSS để tạo được. Trường hợp trong CSS thường ta phải tạo bốn thẻ HTML và thiết lập background và cho nó repeat-x để giả đường viền. Nhưng đến với CSS3 thì bạn không cần sử dụng background nữa mà sẽ sử dụng thuộc tính border-image.

1. Border-image trong CSS3

Với thuộc tính border-image trong CSS3 bạn có thể thiết lập hình ảnh làm đường viền cho thẻ HTML.
Thuộc tính này hỗ trợ ở các trình duyệt:

• IE > 11.0
• Chrome > 16.0
• Firefox > 15.5
• Safary > 6.0
• Opera > 15.0

Lưu ý: Chiều cao của đường viền phụ thuộc vào chiều cao của thuộc tính border nên bạn phải tạo borderthì mới sử dụng được border-image.
Cú pháp: border-image: url(border-image.png) 25 repeat;
Trong đó:

• url(border-image.png) (SOURCE) là đường dẫn đến file hình ảnh
• 25 (OFFSET) đây là kiểu ghi tắt của thuộc tính offset, nếu ghi đầy đủ sẽ là 25 25 25 25 tương ứng vớilề trên, lề phải, lề dưới và lề trái.
• repeat  (REPEAT) cách sử dụng các phần hình ảnh đã cắt đó.

Code Hack CSS cho các trình duyệt:

• -webkit-border-image đối với Chrome và Safary.
• -moz-border-image đối với Firefox.
• -o-border-image đối với Opera.

Chi tiết các thành phần như sau:

SOURCE:

Là đường dẫn đến file hình ảnh dùng để làm border.

OFFSET:

Để cho border được đẹp thì bạn phải tính chuẩn xác từng pixel trong hình ảnh để thiết lập border-width và giá trị OFFSET.
Offset chính là khoảng cách tính từ ngoài biên đi vào trong hình ảnh sẽ được lấy để làm border.
Thuộc tính offset gồm có bốn cạnh như hình sau:

Giá trị OFFSET tuân theo quy tắc rút gọn trong CSS như sau:

• Nếu có 4 giá trị (25 25 25 25) thì tương đương với (cạnh trên, cạnh phải, cạnh dưới, cạnh trái).
• Nếu có 3 giá trị (25 25 25) thì tương đương với (cạnh trên, cạnh trái + phải, cạnh dưới)
• Nếu có 2 giá trị (25 25) thì tương đương với (cạnh trên + dưới, cạnh trái + phải)
• Nếu có 1 giá trị (25) thì tương đương với (cạnh trên + dưới + trái + phải)

Như vậy với bốn đường thẳng kéo dài của bốn cạnh của bốn OFFSET sẽ tạo thành 9 phần như sau:

Lúc này ta chú ý các phần (1, 3, 7, 9) chính là phần border cho bốn góc và nó cố định, phần 5 sẽ là vị trí trung tâm và những phần còn lại sẽ bị ảnh hưởng bởi thuộc tính REPEAT.

REPEAT:

Chúng ta có các giá trị thường sử dụng sau:

• stretch
• repeat
• round

Note: Các giá trị này đều chỉ có tác dụng với các phần 2, 6, 8, 4.
Stretch: kéo giãn hình ảnh cho tương thích với chiều rộng của các cạnh.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     width: 108px;     height: 108px;     border-style: solid;     border-width: 27px;     border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;     -webkit-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;     -moz-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;     -o-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch; }

Kết quả:

Repeat: lặp lại hình ảnh cho các cạnh
Lưu ý là nó sẽ lặp từ giữa đi ra hai phía.
Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     width: 108px;     height: 108px;     border-style: solid;     border-width: 27px;     border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;     -webkit-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;     -moz-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;     -o-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat; }

Kết quả:

Round: Lặp lại hình ảnh cho các cạnh nhưng nó sẽ fit lần lặp theo tỉ lệ phần trăm, nghĩa là nó sẽ co giãn sao cho lặp vừa khít. Chính vì vậy nếu ta chọn OFFSET chuẩn và chọn chế độ round thì sẽ đẹp, tuy nhiên backgroud sẽ bị co giãn nếu chiều rộng không tương thích với hình ảnh.
Vi dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10

div{     width: 70px;     height: 108px;     border-style: solid;     border-width: 27px;     border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 round;     -webkit-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 round;     -moz-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 round;     -o-border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 round; }

 
Lưu ý: Giá trị của repeat có thể chia làm hai phần đó là Vertical và Horizontal. 
Ví dụ: 

1	border-image: url(http://freetuts.net/upload/tut_post/images/2015/10/23/477/border.png) 27 round repeat;

Trong đó round là Vertical và repeat là Horizontal.

2. Lời kết

Đáng lẽ mình sẽ đưa ra nhiều ví dụ nữa nhưng mình sẽ để dành nó ở một bài thực hành khác, quan trọng ở bài này là bạn hiểu bản chất của nó và sử dụng đúng theo hình ảnh giao diện.
Như vậy là mình đã giới thiệu xong cách sử dụng thuộc tính border-image trong CSS3, đây quả thật là một bài viết khá nhức đàu và nó mất khá nhiều thời gian biên soạn của mình, hy vọng các bạn hiểu.

Read More