Tạo trang 404 hiệu ứng 3D giống Github

tháng 12 16, 2018

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 == &quot;error_page&quot;'>
      <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/AVvXsEjZcFteNRagH-IFMDZ-KzL5bs39UJ56keb26V2nQ1aJADzF6Gj9mJEC-0uO8qhi8q4suLrPwcAQF0iCbGQW1ReQwFiJ_K7nraDoqff3_OlBD6fi0_uyln44w8ONEu2fJta4obYS_yWX9H4/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/AVvXsEiWZaFM85AYmncXVk4pgTsq_J7rtjC9E7k8sk1tV7802HrPZJ0l-LxbsnQtpQ5LMJC9K8qNXwmnr5H0_DnHvQvmcdzHr6D9ut-aXhR2gFTei8-pjTL9zXaXrkcLu3qiCF_u_se45hbq9Ok/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/AVvXsEi_jBymNeRWFFvvKciZmF7eWGajZ4XWVWLrNOECMgC7PzBtBPyZJopa-6ZMrTqucfQjs3ftGHfnJRMSazquxOjtXUUgJBQUaciMrCirnDA6XmrTqs3VVE6938T4z5kelhhEy8EmY3HwX8I/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/AVvXsEjjFvHUGPl3ChbuVbz2yKziY1SxEfs0i2SueJbWF5iZjJNEz4vcAZipah2DErZHeXVAg6aNPfKsS87feRgCYIS5FdMF95AxmARnJrZzke7aqNbEqeNy7ONvOg2_-va9ydQH8hMgiRLMung/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/AVvXsEhMR5fL5md4wf-COP2YCCIlZBr7IvVKJJliTgxBLa_3fa5eklPIzKuAPNiq_3NN3VuL8gUHgbtJQp_2Ajo8B4v2c80_rvP3RZM2XdKhpEj5sJYgGMND2NKzyfMiG8mENm15BoJA44Kvxwc/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/AVvXsEjd5bwBlPWo-wci745IdiOBUFO2dL4iPiUqglbxd9CNADqKgHb2xYusXnFmcxWbY30HDuMdBlo9_bZTDRLwIw4lQArKZ1NuV9VdZ74EvPKBqg-fJI0lxlGHL4T9zUDt189hPoW0a-epIZU/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/AVvXsEjwSWgPVPgIu0VUd7GeZx9R0VHqXvy9c8JUOK8BTTSNQa5I2GRfcbOr3L7Pm0o88EwauEKeZQoeK0DRTEdfv-R_KfFLvLP-tQhAmIE-wIfCpxj4gKegUMsNs29SIkBykTr9LQrb4z-KF7A/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/AVvXsEh21_V0QO62cE6MVfvkKtzqTORy1TXw5Q-bK__181EQryee6cASHfLtx9DYhAYvLw4Mj4ipViRVzoopF7zFNjXYkl42ycU3L-Nqh_iLzlwTn3Ahdpw7sKoy06mLsxzxjtvrmHxXnc_dnok/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>

Lời kết

Thế thôi nè!! Cảm ơn các bạn đã đón xem. Mong các bạn sẽ giúp đỡ mình phát triển blog hơn. Nhân tiện mình xin rao bán template của mình giá 100k bạn nào mua thì để lại Gmail bên dưới mình sẽ liên hệ các bạn sớm nhất nhé.