Tạo trang 404 hiệu ứng 3D giống Github
Xin chào các bạn!! Dạo này mình hơi bận nên không có thời gian để viết bài chia sẻ thủ thuật, chỉ up vài tấm bìa của CTV share cho các bạn. Thế nên hôm nay, nhân ngày chủ nhật rảnh rỗi quý giá mình sẽ chia sẻ và hướng dẫn cho các bạn cách Tạo trang 404 hiệu ứng 3D giống Github.
DEMO
Demo
Hướng dẫn thực hiện.
Với bài viết này thì các bạn chỉ việc copy và paste code là xong rồi. Vì mình đã "gom" CSS, HTML, JS lại chung cho các bạn rồi. Các bạn copy đoạn code bên dưới và paste vào phía bên dưới<body>hoặc
<body....nhé.
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-wrap'>
<style media='screen' type='text/css'>
#content-wrapper { padding:0; margin:0; width: 100%;} #copyright-lower, #site-header, ._hs-content{display:none} #auth { position: absolute; top: 0; right: 0; z-index: 50; min-height: 32px; background-color: rgba(53,95,120,.4); padding: 7px 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); display: none; } #auth h1, #auth p, #auth label { display: none; } .auth-form-body { display: inline; } #auth input[type=text], #auth input[type=password] { float: left; width: 175px; margin-right: 9px; border: 0; background-color: #f5f5f5; } #auth input[type=text]:focus, #auth input[type=password]:focus { background-color: #fff; box-shadow: 0 0 5px rgba(255,255,255,.5); } #auth .btn { border: 0; } #auth .btn:focus { box-shadow: 0 0 5px rgba(255,255,255,.5); } label[for=search] { display: block; text-align: left; } #search label { font-weight: 200; padding: 5px 0; } #search input[type=text] { font-size: 18px; width: 705px; } #search .btn { padding: 10px; width: 90px; } #parallax_wrapper { position: relative; z-index: 0; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in; } #parallax_field { overflow: hidden; position: absolute; left: 0; top: 0; height: 370px; width: 100%; } #parallax_field #parallax_bg { position: absolute; top: -20px; left: -20px; width: 110%; height: 425px; z-index: 1; } #parallax_illustration { display: block; margin: 0 auto; width: 940px; height: 370px; position: relative; overflow: hidden; clear: both; } #parallax_illustration img { position: absolute; } #parallax_illustration #parallax_error_text { top: 72px; left: 72px; z-index: 10; } #parallax_illustration #parallax_octocat { top: 94px; left: 356px; z-index: 9; } #parallax_illustration #parallax_speeder { top: 150px; left: 432px; z-index: 8; } #parallax_illustration #parallax_octocatshadow { top: 297px; left: 371px; z-index: 7; } #parallax_illustration #parallax_speedershadow { top: 263px; left: 442px; z-index: 6; } #parallax_illustration #parallax_building_1 { top: 73px; left: 467px; z-index: 5; } #parallax_illustration #parallax_building_2 { top: 113px; left: 762px; z-index: 4; }
</style>
<div id='parallax_wrapper'> <div id='parallax_field'> <img alt='' class='js-plaxify' data-invert='true' data-xrange='0' data-yrange='20' height='415' id='parallax_bg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTAYcznWwCRIRuShT7uwlW7gOXqntyN45YYPGh43PpfEBhdfPzvfqIPhGswDJOP4snmcPFoz3EGNlXft7vcbojxqhyphenhyphenZwQ17KHTb1g3mMLyk0_tnjzpHzKaTqDzXcIWYrkpAKv0lLiWN4/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng.jpg' width='940'/> </div> <div id='parallax_illustration'> <div id='auth'> </div> <img alt='This is not the web page you are looking for' class='js-plaxify' data-xrange='20' data-yrange='10' height='249' id='parallax_error_text' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjaVHJ4erBdU1wm8qzYRmlIBX3E4jXifI7PRcb5N04KM1LcgBcEQCYAo4Y8SjshRudn06AMrKF1UZBFzHyS5DXPWvmOw88LTE7ILKvAkALvqsjl7UP2NvdtSX7vpIqOGJq-PNZLiYtEmo/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng.png' width='271'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='230' id='parallax_octocat' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYhT6vdA42n5kbPGVfVia1yNXZEhhRhTvcF2d6A04l7YMj0b4cC7gAeLNsHhON5UWzueP61PSsTbsfS3i3y75MAkpDZEWD8viGsKsTsh7ntkPQ4xUzxhnOxmvZCkm56oih1oABi7K7e4/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25281%2529.png' width='188'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='156' id='parallax_speeder' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoYCqPLbcdiayEwj6Bp77YNdo4ZGkuU9eFMP20KSwj_UikXWq-4mwcp4B0wWLh4wwUf0Hg-qnmrlilDnLEzTXyiTzWi5f8nuPi0cexovA1jvne_OYsHkiODPqJTcsJurYyk2XUsJ2UIXg/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25282%2529.png' width='440'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='49' id='parallax_octocatshadow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTrF8316PSQeRgWjpjxrmuo2PHkd6rHZM-yezK9BnQW61MKC8c7fmOe2Z_GswiLdCKfJQi8D-_UnhLYIibpwzI3gzk6BxfhorPdWOlpxnh1ntPZJzxikJdm7kvC_eoKBWOYy2riKNchQ/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25283%2529.png' width='166'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='75' id='parallax_speedershadow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMWP5oHd-vS_7f4wmzizbaY4JTRFgB8QFyRSFdiZP9W33Go64Py9NHhyBoSgw2JPTaepFE20HSDnRAzwCObDu-kMgz3MD5VqXSUjogLHLzL1grcZ-Ghn-QVp1q-1sfLcm9E8w8DY0KkEY/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25284%2529.png' width='430'/> <img alt='' class='js-plaxify' data-invert='true' data-xrange='50' data-yrange='20' height='123' id='parallax_building_1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_GM5wJYrUmnUfO6lltnHTixIIQpiV7WWurqHSApQPYOHq1O_4LVxOk08y-OXCGUF-SrFYj3Az5W4yphHDzW-EQ7AE2A7q2vYsWap-UD75G5GSaCTc-uZnFa26sy4inPiezi9GD7HEtJA/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25285%2529.png' width='304'/> <img alt='' class='js-plaxify' data-invert='true' data-xrange='75' data-yrange='30' height='50' id='parallax_building_2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Wh5DcVABwgMv91VI3W3KUY5FlKqVQ0zUf2eQ04j8dsTHAM4Grr8txAq0ddypLRrts82kOn7vxDcSeJxRjQyFxfbs35eNZoXmab0P8Vz4mz8llgcUGwVjvQ7SeyJJaQrQ5SUsMTxgwr0/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25286%2529.png' width='116'/> </div> </div><script src='https://github.com/_error.js' type='text/javascript'/>
<div style='text-align: center;'>
<center>
<a class='bsw-btn bsw_btn' expr:href='data:blog.homepageUrl' title='GO TO HOME'><span style='font-size: large;'>GO TO HOME</span></a></center>
</div>
</div>
</b:if>
demo loi :v
Trả lờiXóalẹ trời :V cảm ơn nha đã fix
Xóavo blog thay blog bao co bai moi vo cmt luon :v
Xóacó báo có bài mới luôn á :V ghê dị
Xóacảm ơn bạn diện
Xóahay à nha <3 chúc a buổi tối vv
Trả lờiXóacảm ơn em nha
XóaHay đó em
Trả lờiXóatest ngay i nha anh :p hiẹu ứng đã lắm
XóaSửa liên kết top phần mềm thành www.ngoctinhblog.tk
Trả lờiXóaNgọc Tính Blog
tks, ttt
ok ông mai tui sửa cho nha
Xóahay nha
Trả lờiXóadùng ngay đi nha ><
XóaNgon đấy
Trả lờiXóacảm ơn kiên dz :p
Xóatrông đẹp đấy
Trả lờiXóaông lấy về dùng đi
XóaOk cu bảo
Trả lờiXóaok cu sinh :V
XóaMobile thấy có 1 khúc
Trả lờiXóachưa reponsive em à :V
XóaCông nhận là đẹp
Trả lờiXóakkkk cảm ơn nha >< lấy về dùng ngay đi chớ
XóaKo đẹp đâu em, nhìn tạm thôi :))
Trả lờiXóahàng của github đó anh :V em tháy cũng ok mà chưa có time res
XóaHiệu ứng đẹp đó e :)
Trả lờiXóahihi anh lấy về dùng i 😆
XóaUhm, khi nào a onl pc a sẽ lấy về dùng :)) cho nó bằng ngta haha
Xóacái này độc quyền bên em nên anh khỏi lo ><
XóaỞ trang chủ khi lướt xuống dưới thì lỗi phần sidebar a ơi
Trả lờiXóalỗi gì vậy em chụp anh xem đc không
Xóacx ngon,bao giờ ông làm cái giao diện khung liên kết đẹp đi
Trả lờiXóahihi cảm ơn ông ~ tui cũng đang định edit lại mà chưa có time
Xóawww.ngoctinhit.tk
Trả lờiXóaNgọc Tính IT
đổi hộ cái liên kết :))
ủa đổi rồi mà ta
Xóatên gắt nha :v
Trả lờiXóaripper
Trả lờiXóatoy dân thường :V
Xóadân thường như trình không thường kk
Xóabiết tí xíu thôi mà :p
Xóađủ sài để đi kiếm cơm thôi
Xóakiếm cháo :v
Xóacho liên kết t lên cao xíu đi -.-
Trả lờiXóatương tác tốt đi t cho lên rank :v
XóaAwesome post! Tuyệt cmn vời, quá đẹp
Trả lờiXóacảm ơn anh cường >< tưởng quên em rồi chớ
Xóachất
Trả lờiXóacảm ơn nef :v
Xóa