Hướng dẫn tạo template Css Trang 404 Cực Đẹp

Xem: 154    Tải: 1   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 0 đánh giá ) File đã được kiểm thử

Miễn Phí [megacode]huong-dan-tao-template-css-trang.rar (2.32 KB)
Tải miễn phí

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-template-css-trang.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Hôm nay, mình xin chia sẻ một mẫu css trang 404 cực đẹp, chỉ dùng css thuần.

Hôm nay, mình xin chia sẻ một mẫu css trang 404 cực đẹp, chỉ dùng css thuần.

HTML.

<span class='one'>4</span>
<span class='two'>0</span>
<span class='mid'>ops!</span>
<span class='three'>4</span>

CSS.

@import url(https://fonts.googleapis.com/css?family=Fascinate);
* {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  min-height: 100%;
  font-family: 'Fascinate', cursive;
  background: #6A9C92;
  font-size: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4rem;
}
body span, html span {
  margin: -2rem 0;
  color: #F74545;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  font-size: 34rem;
  letter-spacing: -1rem;
  -webkit-transition: font-size .3s ease;
  transition: font-size .3s ease;
  text-shadow: 0px 0px 0 #FFAC78, -1px 1px 0 #FFAC78, -2px 2px 0 #FFAC78, -3px 3px 0 #FFAC78, -4px 4px 0 #FFAC78, -5px 5px 0 #FFAC78, -6px 6px 0 #FFAC78, -7px 7px 0 #FFE2A8, -8px 8px 0 #FFE2A8, -9px 9px 0 #FFE2A8, -10px 10px 0 #FFE2A8, -11px 11px 0 #FFE2A8, -12px 12px 0 #FFE2A8, -13px 13px 0 #FFE2A8, -14px 14px 0 #FFE2A8, -15px 15px 0 #FFE2A8, -16px 16px 0 #FFE2A8, -17px 17px 0 rgba(0, 0, 0, 0.19), 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.28), 0 5px 10px rgba(0, 0, 0, 0.35), 0 10px 15px rgba(0, 0, 0, 0.4), 0 20px 20px rgba(0, 0, 0, 0.45);
}
body span.one, html span.one {
  -webkit-transform: rotate(-26deg);
          transform: rotate(-26deg);
}
body span.two, html span.two {
  color: #423845;
  font-size: 36rem;
}
body span.mid, html span.mid {
  color: #423845;
  font-size: 6rem;
  margin-left: -7rem;
  margin-top: 16rem;
  z-index: 3;
  letter-spacing: -6px;
}
body span.three, html span.three {
  -webkit-transform: rotate(26deg);
          transform: rotate(26deg);
  margin-left: -5rem;
  margin-top: -8rem;
}

@media (min-width: 40.6875em) and (max-width: 51.875em) {
  body span {
    font-size: 28rem;
  }
  body span.two, body span.three {
    font-size: 30rem;
  }
}
@media (min-width: 30.0625em) and (max-width: 40.625em) {
  body span {
    font-size: 22rem;
  }
  body span.two, body span.three {
    font-size: 24rem;
  }
}
@media (max-width: 30em) {
  body span {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    font-size: 18rem;
  }
  body span.two {
    font-size: 20rem;
  }
  body span.mid {
    margin-top: 11rem;
    margin-left: -5rem;
  }
  body span.three {
    margin-left: -7rem;
  }
}

Chúc các bạn thành công !

Hướng dẫn tạo template Css Trang 404 Cực Đẹp

Hướng dẫn tạo template Css Trang 404 Cực Đẹp Đăng ngày 27-09-2016  Hôm nay, mình xin chia sẻ một mẫu css trang 404 cực đẹp, chỉ dùng css thuần. 5/10 154

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn