Зимняя страница 404 на CSS3 и HTML5

Разместил: Apocalypse
Опубликовано: 25 июня 2016

Скачать Отличная страница 404, которая позволит вашим пользователям, даже если они попадут на несуществующую страницу, почувствовать себя уютно Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: Создайте страницу 404.htm при помощи любого текстового редактора 2#: В качестве содержимого этого файла вставьте следующее:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 - Такой страницы не существует</title>
<style type="text/css">
html,
body {
height: 100%;
min-height: 450px;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight: 500;
color: #5d7399;
}
.content {
height: 100%;
position: relative;
z-index: 1;
background-color: #d2e1ec;
background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
overflow: hidden;
}
.content h1 {
font-size: 25px;
}
.snow {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 20;
}
.main-text {
padding: 20vh 20px 0 20px;
text-align: center;
line-height: 2em;
font-size: 5vh;
}
.home-link {
font-size: 0.6em;
font-weight: 400;
color: inherit;
text-decoration: none;
opacity: 0.6;
border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
}
.home-link:hover {
opacity: 1;
}
.ground {
height: 160px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #f6f9fa;
box-shadow: 0 0 10px 10px #f6f9fa;
}
.ground:before,
.ground:after {
content: '';
display: block;
width: 250px;
height: 250px;
position: absolute;
top: -62.5px;
z-index: -1;
background: transparent;
-webkit-transform: scaleX(0.2) rotate(45deg);
transform: scaleX(0.2) rotate(45deg);
}
.ground:after {
left: 50%;
margin-left: -166.66667px;
box-shadow: -325px 275px 15px #a1aec6, -600px 600px 15px #aab6cb, -885px 915px 15px #bac4d5, -1205px 1195px 15px #7e90b0, -1465px 1535px 15px #bac4d5, -1760px 1840px 15px #8798b6, -2060px 2140px 15px #8e9eba, -2435px 2365px 15px #adb9cd, -2670px 2730px 15px #a1aec6, -2950px 3050px 15px #7e90b0, -3335px 3265px 15px #a1aec6, -3585px 3615px 15px #a4b1c8, -3875px 3925px 15px #a7b4c9, -4180px 4220px 15px #94a3be, -4455px 4545px 15px #aab6cb, -4805px 4795px 15px #b0bccf;
}
.ground:before {
right: 50%;
margin-right: -166.66667px;
box-shadow: 340px -260px 15px #a4b1c8, 575px -625px 15px #9aa9c2, 940px -860px 15px #a7b4c9, 1200px -1200px 15px #9aa9c2, 1470px -1530px 15px #a1aec6, 1835px -1765px 15px #a7b4c9, 2125px -2075px 15px #8a9bb8, 2370px -2430px 15px #a1aec6, 2690px -2710px 15px #bac4d5, 3045px -2955px 15px #aab6cb, 3325px -3275px 15px #b0bccf, 3650px -3550px 15px #b7c1d3, 3885px -3915px 15px #94a3be, 4175px -4225px 15px #9dabc4, 4485px -4515px 15px #8193b2, 4815px -4785px 15px #a7b4c9;
}
.mound {
margin-top: -80px;
font-weight: 800;
font-size: 180px;
text-align: center;
color: #dd4040;
pointer-events: none;
}
.mound:before {
content: '';
display: block;
width: 600px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -300px;
top: 50px;
z-index: 1;
border-radius: 100%;
background-color: #e8f2f6;
background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);
background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);
}
.mound:after {
content: '';
display: block;
width: 28px;
height: 6px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 68px;
z-index: 2;
background: #dd4040;
border-radius: 100%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;
}
.mound_text {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
.mound_spade {
display: block;
width: 35px;
height: 30px;
position: absolute;
right: 50%;
top: 42%;
margin-right: -250px;
z-index: 0;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
background: #dd4040;
}
.mound_spade:before,
.mound_spade:after {
content: '';
display: block;
position: absolute;
}
.mound_spade:before {
width: 40%;
height: 30px;
bottom: 98%;
left: 50%;
margin-left: -20%;
background: #dd4040;
}
.mound_spade:after {
width: 100%;
height: 30px;
top: -55px;
left: 0%;
box-sizing: border-box;
border: 10px solid #dd4040;
border-radius: 4px 4px 20px 20px;
}
</style>
</head>
<body>
<div class="content">
<canvas id="snow" class="snow"></canvas>
<div class="main-text">
<h1>Ой, блин...<br/>Такой страницы не существует</h1><a href="/" class="home-link">Придётся свалить на главную...</a>
</div>
<div class="ground">
<div class="mound">
<div class="mound_text">404</div>
<div class="mound_spade"></div>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}

function makeSnow(el) {
var ctx = el.getContext('2d');
var width = 0;
var height = 0;
var particles = [];

var Particle = function() {
this.x = this.y = this.dx = this.dy = 0;
this.reset();
}

Particle.prototype.reset = function() {
this.y = Math.random() * height;
this.x = Math.random() * width;
this.dx = (Math.random() * 1) - 0.5;
this.dy = (Math.random() * 0.5) + 0.5;
}

function createParticles(count) {
if (count != particles.length) {
particles = [];
for (var i = 0; i < count; i++) {
particles.push(new Particle());
}
}
}

function onResize() {
width = window.innerWidth;
height = window.innerHeight;
el.width = width;
el.height = height;

createParticles((width * height) / 10000);
}

function updateParticles() {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#f6f9fa';

particles.forEach(function(particle) {
particle.y += particle.dy;
particle.x += particle.dx;

if (particle.y > height) {
particle.y = 0;
}

if (particle.x > width) {
particle.reset();
particle.y = 0;
}

ctx.beginPath();
ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
ctx.fill();
});

window.requestAnimationFrame(updateParticles);
}

onResize();
updateParticles();

window.addEventListener('resize', onResize);
}

ready(function() {
var canvas = document.getElementById('snow');
makeSnow(canvas);
});
})();
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

<!DOCTYPE html>

<html>

<head>

<title>404 - Такой страницы не существует</title>

html,

body {

height: 100%;

min-height: 450px;

font-family: 'Dosis', sans-serif;

font-size: 15px;

font-weight: 500;

color: #5d7399;

}

.content {

height: 100%;

position: relative;

z-index: 1;

background-color: #d2e1ec;

overflow: hidden;

}

.content h1 {

font-size: 25px;

}

.snow {

position: absolute;

top: 0;

left: 0;

pointer-events: none;

z-index: 20;

}

.main-text {

padding: 20vh 20px 0 20px;

text-align: center;

line-height: 2em;

font-size: 5vh;

}

.home-link {

font-size: 0.6em;

font-weight: 400;

color: inherit;

text-decoration: none;

opacity: 0.6;

border-bottom: 1px dashed rgba(93, 115, 153, 0.5);

}

.home-link:hover {

opacity: 1;

}

.ground {

height: 160px;

width: 100%;

position: absolute;

bottom: 0;

left: 0;

background: #f6f9fa;

box-shadow: 0 0 10px 10px #f6f9fa;

}

.ground:before,

.ground:after {

content: '';

display: block;

width: 250px;

height: 250px;

position: absolute;

top: -62.5px;

z-index: -1;

background: transparent;

-webkit-transform: scaleX(0.2) rotate(45deg);

transform: scaleX(0.2) rotate(45deg);

}

.ground:after {

left: 50%;

margin-left: -166.66667px;

box-shadow: -325px 275px 15px #a1aec6, -600px 600px 15px #aab6cb, -885px 915px 15px #bac4d5, -1205px 1195px 15px #7e90b0, -1465px 1535px 15px #bac4d5, -1760px 1840px 15px #8798b6, -2060px 2140px 15px #8e9eba, -2435px 2365px 15px #adb9cd, -2670px 2730px 15px #a1aec6, -2950px 3050px 15px #7e90b0, -3335px 3265px 15px #a1aec6, -3585px 3615px 15px #a4b1c8, -3875px 3925px 15px #a7b4c9, -4180px 4220px 15px #94a3be, -4455px 4545px 15px #aab6cb, -4805px 4795px 15px #b0bccf;

}

.ground:before {

right: 50%;

margin-right: -166.66667px;

box-shadow: 340px -260px 15px #a4b1c8, 575px -625px 15px #9aa9c2, 940px -860px 15px #a7b4c9, 1200px -1200px 15px #9aa9c2, 1470px -1530px 15px #a1aec6, 1835px -1765px 15px #a7b4c9, 2125px -2075px 15px #8a9bb8, 2370px -2430px 15px #a1aec6, 2690px -2710px 15px #bac4d5, 3045px -2955px 15px #aab6cb, 3325px -3275px 15px #b0bccf, 3650px -3550px 15px #b7c1d3, 3885px -3915px 15px #94a3be, 4175px -4225px 15px #9dabc4, 4485px -4515px 15px #8193b2, 4815px -4785px 15px #a7b4c9;

}

.mound {

margin-top: -80px;

font-weight: 800;

font-size: 180px;

text-align: center;

color: #dd4040;

pointer-events: none;

}

.mound:before {

content: '';

display: block;

width: 600px;

height: 200px;

position: absolute;

left: 50%;

margin-left: -300px;

top: 50px;

z-index: 1;

border-radius: 100%;

background-color: #e8f2f6;

}

.mound:after {

content: '';

display: block;

width: 28px;

height: 6px;

position: absolute;

left: 50%;

margin-left: -150px;

top: 68px;

z-index: 2;

background: #dd4040;

border-radius: 100%;

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;

}

.mound_text {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

.mound_spade {

display: block;

width: 35px;

height: 30px;

position: absolute;

right: 50%;

top: 42%;

margin-right: -250px;

z-index: 0;

-webkit-transform: rotate(35deg);

transform: rotate(35deg);

background: #dd4040;

}

.mound_spade:before,

.mound_spade:after {

content: '';

display: block;

position: absolute;

}

.mound_spade:before {

width: 40%;

height: 30px;

bottom: 98%;

left: 50%;

margin-left: -20%;

background: #dd4040;

}

.mound_spade:after {

width: 100%;

height: 30px;

top: -55px;

left: 0%;

box-sizing: border-box;

border: 10px solid #dd4040;

border-radius: 4px 4px 20px 20px;

}

</style>

</head>

<body>

<h1>Ой, блин...<br/>Такой страницы не существует</h1><a href="/" class="home-link">Придётся свалить на главную...</a>

</div>

</div>

(function() {

function ready(fn) {

if (document.readyState != 'loading'){

fn();

} else {

document.addEventListener('DOMContentLoaded', fn);

}

function makeSnow(el) {

var ctx = el.getContext('2d');

var width = 0;

var height = 0;

var particles = [];

var Particle = function() {

this.x = this.y = this.dx = this.dy = 0;

this.reset();

}

Particle.prototype.reset = function() {

this.y = Math.random() * height;

this.x = Math.random() * width;

this.dx = (Math.random() * 1) - 0.5;

this.dy = (Math.random() * 0.5) + 0.5;

}

function createParticles(count) {

if (count != particles.length) {

particles = [];

for (var i = 0; i < count; i++) {

particles.push(new Particle());

}

function onResize() {

width = window.innerWidth;

height = window.innerHeight;

el.width = width;

el.height = height;

createParticles((width * height) / 10000);

}

function updateParticles() {

ctx.clearRect(0, 0, width, height);

ctx.fillStyle = '#f6f9fa';

particles.forEach(function(particle) {

particle.y += particle.dy;

particle.x += particle.dx;

if (particle.y > height) {

particle.y = 0;

}

if (particle.x > width) {

particle.reset();

particle.y = 0;

}

ctx.beginPath();

ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);

ctx.fill();

});

window.requestAnimationFrame(updateParticles);

}

onResize();

updateParticles();

window.addEventListener('resize', onResize);

}

ready(function() {

var canvas = document.getElementById('snow');

makeSnow(canvas);

});

})();

</script>

</body>

</html>

3#: Сохраните все изменения и залейте файл 404.htm в корень вашего сайта или файлового менеджера P.S. В прикреплённом архиве лежит уже готовая страничка 404.htm

Метки: 404 CSS3 HTML5 Winter Зима

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Зимняя страница 404 на CSS3 и HTML5

Читайте также:

Посетители сайта

Панель управления

Июнь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Зимняя страница 404 на CSS3 и HTML5

Читайте также:

Дождевое облако на чистом CSS3

Вращающаяся 3D галерея изображений на чистом CSS

Стильные белые часы на Javascript и CSS3

Посетители сайта

Панель управления