Lập trình web

Hướng dẫn tạo trang thông báo lỗi ấn tượng bằng CSS3

Chia sẻ nhanh

Bài viết này, HiFlyer hướng dẫn các bạn tạo trang thông báo lỗi ấn tượng, sử dụng 100% CSS3.



Technical Problems Page

Bước 1: Tải các file liên quan bao gồm: style.css & image background (gears.png) tại đây
Bước 2: Đưa nội dung html vào trang hiển thị.

<div id="level"><div id="content"><div id="gears"><div id="gears-static"></div><div id="gear-system-1"><div class="shadow" id="shadow15"></div><div id="gear15"></div><div class="shadow" id="shadow14"></div><div id="gear14"></div><div class="shadow" id="shadow13"></div><div id="gear13"></div></div><div id="gear-system-2"><div class="shadow" id="shadow10"></div><div id="gear10"></div><div class="shadow" id="shadow3"></div><div id="gear3"></div></div><div id="gear-system-3"><div class="shadow" id="shadow9"></div><div id="gear9"></div><div class="shadow" id="shadow7"></div><div id="gear7"></div></div><div id="gear-system-4"><div class="shadow" id="shadow6"></div><div id="gear6"></div><div id="gear4"></div></div><div id="gear-system-5"><div class="shadow" id="shadow12"></div><div id="gear12"></div><div class="shadow" id="shadow11"></div><div id="gear11"></div><div class="shadow" id="shadow8"></div><div id="gear8"></div></div><div class="shadow" id="shadow1"></div><div id="gear1"></div><div id="gear-system-6"><div class="shadow" id="shadow5"></div><div id="gear5"></div><div id="gear2"></div></div><div class="shadow" id="shadowweight"></div><div id="chain-circle"></div><div id="chain"></div><div id="weight"></div></div><div id="title"><h1>This is the Technical Problems Page.<br>Or any other page.</h1><p>It's free for comercial and non-comercial projects. And I promise, I wouldn't be mad if you link to my site:)</p></div></div></div>

Kết quả sẽ cho ra như dưới đây: Technical Problems Page

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?