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 !