Bắt đầu với HTML5 / CSS3: Mẹo, giới thiệu và mẫu mã hóa

HTML5 đang trở nên phổ biến hơn và bắt đầu phát triển toàn bộ giao diện web. Thậm chí, một số nhà phát triển web đã trích dẫn rằng các yếu tố và hiệu ứng hình ảnh HTM5 có thể so sánh với Flash. Kiểu kịch bản mới rất dễ hiểu và khả năng nâng cao giao diện web là vô hạn. Vì vậy, HTML5 thú vị như thế nào?


Bài viết này nhằm cung cấp cho người đọc cái nhìn sâu sắc về những gì bạn nên biết về HTML5 và quan trọng nhất là một số mẹo & thủ thuật tạo các trang HTML5 nhẹ, hấp dẫn và tương tác.

1. Cơ bản trong HTML5

HTML5

Trước khi chúng tôi bắt đầu thêm bất kỳ chủ đề này trong HTML5, sẽ tốt hơn nếu kiểm tra trình duyệt hiện tại của bạn trước. Vì nhiều trình duyệt vẫn đang ở chế độ phát triển (cải tiến để chứa HTML5), một số tính năng được đề cập ở đây có thể không hỗ trợ.

Đây là một mẹo nhanh để kiểm tra tính tương thích của trình duyệt web.

Để hiểu thêm về giới hạn của một trình duyệt nhất định, bạn có thể tham khảo đây.

2. Hiệu ứng văn bản – Thêm hiệu ứng bóng và nâng cao văn bản trong HTML5

Hiệu ứng văn bản trong HTML5

Hiệu ứng bóng cơ bản trên văn bản

Đây là mã chuỗi đơn giản nhất để chuyển đổi tiêu đề thông thường của bạn thành văn bản dễ nhìn. Đừng bao giờ đánh giá thấp hiệu ứng bóng tối. Để tạo hiệu ứng tương tự này, đòi hỏi người thiết kế web phải trải qua nhiều bước chỉnh sửa hình ảnh trong Photoshop. Và bây giờ tất cả chỉ cần một dòng mã. Khoảng cách bóng, màu sắc có thể được thay đổi theo nội dung trái tim của bạn.

Mẫu mã

#shadow h1 {
bóng văn bản: 0px 1px 1px rgba (0,0,0, .2);
}

Văn bản về hiệu ứng giống như lửa trước

Mẹo tiếp theo là chỉ cho bạn cách mã hóa HTML5 có thể được điều chỉnh thành một văn bản trông thậm chí mát mẻ hơn. Nếu bạn thử nghiệm đủ hoặc tìm các ví dụ khác, khả năng tùy chỉnh các hiệu ứng là vô tận. Lưu ý: ví dụ này không được tạo bởi bất kỳ phần mềm chỉnh sửa ảnh nào. Chỉ cần mã đơn giản trong HTML5.

Mẫu mã

#fire h1 {
văn bản-align: trung tâm;
lề: tự động 200px;
phông chữ gia đình: "Liên minh-gothic", Chuyển phát nhanh;
cỡ chữ: 200px; biến đổi văn bản: chữ hoa;
màu: #fff;
text-Shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px 80px # 451b0e;
}

Ví dụ tuyệt vời khác: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Góc tròn trong HTML5

Góc tròn trong HTML5

Tạo kiểu cho bố cục trang web trong HTML5 chưa bao giờ dễ dàng như vậy kể từ khi giới thiệu CSS. Và bây giờ bạn thậm chí có thể có các góc tròn của các yếu tố bố trí của bạn! Hãy tưởng tượng điều này; không cắt hình ảnh nền, không có nhiều mảnh hình ảnh lộn xộn. Điều này sẽ mang lại nhiều sự cổ vũ cho các nhà thiết kế web ngoài kia.

Mẫu mã

div {
viền: 2px solid # 434343;
phần đệm: 10px;
nền: # e3e3e3;
-moz-Border-radius: 10px;
-webkit-Border-radius: 10px;
chiều rộng: 500px;
}

Lưu ý: Moz có nghĩa là Mozilla và webkit dành cho Safari và Chrome.

Ví dụ tuyệt vời khác: http://fjd1.com/roundcorner.html

4. Đồ họa vectơ có thể mở rộng (SVG) trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Đồ họa vectơ có thể mở rộng hay thường được gọi là (SVG) là đồ họa vectơ 2 chiều được xác định trong các tệp văn bản XML. Nói cách khác, vì DNA của chúng dựa trên tệp văn bản XML, chúng có thể được tạo hoặc chỉnh sửa trên nền tảng web. Điều đó cũng có nghĩa là, có thể có tỷ lệ dễ dàng và các công cụ tìm kiếm có thể đọc và hiểu hình ảnh.

Mã mẫu

Các ví dụ tuyệt vời khác:

5. Nhúng tệp phim vào HTML5

Video trong HTML5

Đây là một phần thú vị khác để giới thiệu các khả năng của HTML5. Nhiều video trực tuyến thường được trình bày cho người dùng web dưới dạng Flash. Cho đến gần đây, việc nhúng video trong HTML5 đang dần lấy lại đà (YouTube là ví dụ điển hình) và Flash đang dần mất đi sức hấp dẫn. Tại sao lại như vậy? Người dùng di động. Nếu bạn muốn video của mình có thể phát ở cả điện thoại iPhone và Android, HTML5 là cách để tiến về phía trước.

Để nhúng video, bạn sẽ cần biết hiện có 3 định dạng được hỗ trợ bởi các trình duyệt khác nhau; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Mã mẫu

Ví dụ tuyệt vời khác: https://www.html5rocks.com/en/tutorials/video/basics/

6. Trình bày slide trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Powerpoint đã được liên kết tên đồng nghĩa với trình bày slide. Nhưng tại sao lại giới hạn bản thân với một bản trình bày ngoại tuyến nơi bạn có thể tạo các trang trình bày dành cho khán giả web? HTML5 đã đến cứu nguy trong việc tạo ra các slide thuyết trình mạnh mẽ, hoàn chỉnh với menu chuyển tiếp và điều hướng. Phần tốt nhất là, bạn thậm chí có thể áp dụng chuyển đổi 3D cho bản trình bày của mình.

Mã mẫu

trước {
chuyển tiếp: tất cả 1s dễ dàng vào;
}

trước: di chuột {
màu nền: # F2F5FE;
viền màu: đen;
}

div {
biến đổi: rotation3d (1,1,0, 45deg);
}

Các ví dụ tuyệt vời khác:

7. Nội dung có thể chỉnh sửa trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Văn bản tĩnh là trường học quá cũ trong thời đại linh hoạt và năng động thống trị thế giới. Trong HTML5, bạn có thể xác định vùng văn bản mà người dùng web có thể chỉnh sửa mà không cần trình soạn thảo văn bản.

Mã mẫu

Nội dung này có thể chỉnh sửa!

Ví dụ tuyệt vời khác: http://html5demos.com/contenteditable

8. Canvas Web tương tác trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Ngoài SVG trong HTML5, canvas là thứ tốt nhất tiếp theo từng xảy ra với web. Canvas cho phép hiển thị hình dạng 2 chiều mang lại khả năng tương tác đến toàn bộ mà không cần sự trợ giúp từ Flash.

Tuy nhiên, mã hóa đơn giản trong HTML5 tạo ra tương tác hoạt hình tuyệt vời đáng được đề cập ở đây.

Ví dụ tuyệt vời khác: http://www.bestfreewebresource.com/2010/09/10-best-html5-canvas-appluggest.html

9. Kéo và thả trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Kéo và thả (đôi khi được gọi là DnD) là một tính năng thú vị khác có sẵn cho HTML5. Một ví dụ tuyệt vời sẽ được Google triển khai trong Gmail của họ. Nếu bạn đang sử dụng bất kỳ trình duyệt hỗ trợ HTML5 nào, bạn chỉ cần kéo tệp từ máy tính của mình và thả vào cửa sổ soạn thư. Nó sẽ được tự động thêm vào như một tệp đính kèm. Thật tuyệt?

Mã mẫu (Ddo bản địa)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘văn bản’, ‘Văn bản tùy chỉnh’);
event.dataTransfer.effect ALLowed = ‘copy’;
}, sai);

Ví dụ tuyệt vời khác: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Biểu đồ dữ liệu CSS thuần trong HTML5

Hướng dẫn, hướng dẫn và mẫu HTML 5

Trước HTML5, cũng không thể tạo biểu đồ có thể trình bày bằng cách chỉ sử dụng mã hóa trong HTML. Hơn nữa, thay đổi giá trị dữ liệu và phản ánh trong biểu đồ không phải là nhiệm vụ đơn giản. Một lần nữa, HTML5 để giải cứu. Cùng với CSS, bạn có thể tạo một biểu đồ hoàn toàn đẹp mắt khiến Microsoft Excel phải xấu hổ. Các mã rất đơn giản và tất cả những gì bạn cần làm là dành thời gian để tùy chỉnh màu sắc và hiệu ứng hoàn hảo cho biểu đồ của bạn.

Ví dụ tuyệt vời khác: http://cssglobe.com/pure-css-data-chart/

Không thể có đủ HTML 5?

Chúng ta cũng thế! Đây là nhiều hơn về chủ đề, đi kiểm tra chúng.

* 30 ví dụ rất hay về trang web HTML 5
* Bắt đầu với HTML 5
* Phải đọc Hướng dẫn HTML 5 năm 2012
* Học HTML 5: 10 Phải đọc bài học

Ngoài ra, hãy kiểm tra  khóa học sụp đổ HTML 5 này của Robin Nixon. Robin Nixon là tác giả của Học PHP, MySQL và JavaScript; khóa học bao gồm khá nhiều thứ mà một người mới cần biết trong HTML5 – bao gồm mã HTML cơ bản, khung vẽ HTML5 để vẽ, định vị địa lý, lưu trữ cục bộ, cũng như âm thanh và video HTML5.

Bài báo gốc được xuất bản lần đầu tiên trên Blog WHSR; Hiện tại, quản lý và cập nhật bởi đội ngũ nhân viên của Build This.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map