Tạo trang 404 hiệu ứng 3D giống Github
Xuất bản lúc 12:37 ngày 07/07/2018
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/AVvXsEgbPBscVaxHtsi-3tKrDe94KJzu2nIwdL9sNwVDCSqawqjsWyB3OZTSS1snmYabVzKFjYlPEGH6R6ID-1z8XZUbouMpZBrNVMDRmta5qCWiRKr8DIuPSUV1SPE1RtE2Va8wxUlp4YCw0Yo/s600/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/AVvXsEjuQXALRjyOrVxjyzWkpDlYHSvgPAnKWgBAONOrua_6Avi7dz-srQ0avTrwONP4Y81uOg8M0Q72VbPMRHPCt1yfEhp0mnBBC4JEtM8R79JuiFIxZn1rwKkTpsfE2uuq5LTv3-w0kwDeKUk/s600/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/AVvXsEjRrVspV1oZs0JVwhdPnxwTjU-imdGhx27PStJ_T04cN-c9EC-s_Inm2Ejmt0PLfqMa7CzqIjtvrwuAw9CG_2k6xrDDL7YiuQ5vGW4zZu4Ormor7fFkpCmJghrrp4qbaBCl-ArseZ4Nnto/s600/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/AVvXsEgC7n_XxjwpPc2tT4AltzyuPFkCnHlOP26_ksKWcaV4U4bylMLrcQnPspla5kZdkvmYjfQ4H9dowVToG7gkB03UH1hIUEPsqSJWkcYVnvJhjZq3_a1ozVOAkSd1RhNtj2aci0cLrfcun_o/s600/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/AVvXsEiEeCyz-Y1KD8b4PDCDvc1SSYMUfVS90DmXcIKkxEk41PR7YNq3Sxdpux9xZepAeHQNvoswrZI9qOUfqMtQX6E3eyn_HMfCVk7YbAzeMrz3puNwSUAWUfM2pta_TeHZF99CBnoh4p7l-hU/s600/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/AVvXsEifs71EXv1DdxaAfePgSq60OxtXpFJr6iH-Keuo-swCYCgCngycvNRCLtYzinNYUP6W_BRV9fGLiP0CD2n-mDXspIXNgdcWU_N24sj11V2tijhLOxTlWwtcwzWLF3xbfmw5g6i78Spte7Q/s600/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/AVvXsEixptWlktatPQXRPc3xeIU3FH382BsRWE4WfJ17vU-M06lITakD7Ttr3dl9XKlLFanqv7sYodjSsDLU1khSbCuSAwkCxxPKBiCkhwsCCruYpBot2lkQvvCFEoGmV8X5b9dn1qsBzgiVkK8/s600/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/AVvXsEhY4pXf_qVJO-a_0rVQ9gfi5wtfQN8S88s7MDjHK2AiB-fTMuOosiPZI_oIKiNfnKVECLiRw-s_6Dici7maIsj-FZZLi5CPRi64lxFxV6SGshJC69tD8hGR0xGxqQ6M1qVMCNSzfEFNt7c/s600/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>
Copyright © 2019
Viết bình luận (0)
Xếp theo