lostyazilim
tr.link

Karıncalı televizyon efektli 404 hata sayfası kodu buyur

13 Mesajlar 4.423 Okunma
acebozum
tr.link

mujdatsayar mujdatsayar M.Kemal Atatürk Kullanıcı
  • Üyelik 04.04.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek Grafik tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1285
  • Beğeniler 452 / 308
  • Ticaret 0, (%0)
Önizleme resim:



Kodlar: HTML:

404















Kodlar:CSS:
* {
margin: 0;
padding: 0;
}

html {
height: 100%;
overflow: hidden;
}

canvas {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.caps {
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
animation: as 8s linear infinite;
}

.caps img {
display: block;
width: 100%;
height: 100%;
}

@keyframes as {
0% {
opacity: 0;
}
10% {
opacity: .3;
}
20% {
opacity: .1;
}
30% {
opacity: .5;
}
40% {
opacity: 0;
}
50% {
opacity: .8;
}
55% {
opacity: 0;
}
55% {
opacity: 0;
}
}

.frame {
z-index: 3;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */

}

.frame div {
position: absolute;
left: 0;
top: -20%;
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, .12);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
animation: asd 12s linear infinite;
}

.frame div:nth-child(1) {
animation-delay: 0;
}

.frame div:nth-child(2) {
animation-delay: 4s;
}

.frame div:nth-child(3) {
animation-delay: 8s;
}

@keyframes asd {
0% {
top: -20%;
}
100% {
top: 100%;
}
}

h1 {
z-index: 3;
position: absolute;
font: bold 200px/200px Arial, sans-serif;
left: 50%;
top: 50%;
margin-top: -100px;
width: 100%;
margin-left: -50%;
height: 200px;
text-align: center;
color: transparent;
text-shadow: 0 0 30px rgba(0, 0, 0, .5);
animation: asdd 2s linear infinite;
}

@keyframes asdd {
0% {
text-shadow: 0 0 30px rgba(0, 0, 0, .5);
}
33% {
text-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
66% {
text-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
100% {
text-shadow: 0 0 40px rgba(0, 0, 0, .8);
}
}


Kodlar:JS:
// js source http://codepen.io/moklick/pen/zKleC

var Application = ( function () {
var canvas;
var ctx;
var imgData;
var pix;
var WIDTH;
var HEIGHT;
var flickerInterval;

var init = function () {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = WIDTH = 700;
canvas.height = HEIGHT = 500;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fill();
imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
pix = imgData.data;
flickerInterval = setInterval(flickering, 30);
};

var flickering = function () {
for (var i = 0; i < pix.length; i += 4) {
var color = (Math.random() * 255) + 50;
pix[i] = color;
pix[i + 1] = color;
pix[i + 2] = color;
}
ctx.putImageData(imgData, 0, 0);
};

return {
init: init
};
}());

Application.init();


Not: DEMO İÇİN TIKLA
sametweb Developers ArizaNotlari

kişi bu mesajı beğendi.

www.mujdatsayar.com
wmaraci
reklam

sametweb sametweb WM Aracı Kullanıcı
  • Üyelik 29.08.2011
  • Yaş/Cinsiyet 34 / E
  • Meslek software developer
  • Konum ABD
  • Ad Soyad S** M**
  • Mesajlar 615
  • Beğeniler 52 / 196
  • Ticaret 1, (%100)
Gayet güzel duruyor, teşekkürler :)
mujdatsayar

kişi bu mesajı beğendi.

React Dersleri YouTube Kanalı
https://www.youtube.com/c/reactdersleri

sistem911 sistem911 WM Aracı Kullanıcı
  • Üyelik 14.12.2012
  • Yaş/Cinsiyet 29 / E
  • Meslek öğrenci
  • Konum Bursa
  • Ad Soyad ** **
  • Mesajlar 118
  • Beğeniler 26 / 25
  • Ticaret 6, (%100)
Gayet güzel olmuş , elinize sağlık.
mujdatsayar

kişi bu mesajı beğendi.

BrutalStar BrutalStar Yazılımcı Kullanıcı
  • Üyelik 26.02.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Yazılımcı
  • Konum İstanbul Avrupa
  • Ad Soyad U** C**
  • Mesajlar 697
  • Beğeniler 149 / 137
  • Ticaret 0, (%0)
Çok şık olmuş hocam, teşekkürler bizimle paylaştığınız için.
 

 

BLOG | http://safkaninsan.blogspot.com/
wmaraci
wmaraci

ArizaNotlari ArizaNotlari WM Aracı Kullanıcı
  • Üyelik 03.06.2012
  • Yaş/Cinsiyet 44 / E
  • Meslek Elektronik Tamircisi
  • Konum Diyarbakır
  • Ad Soyad Ö** G**
  • Mesajlar 79
  • Beğeniler 62 / 34
  • Ticaret 1, (%100)
tam benim siteme göre. teşekkürler.
 

 

arizanotlari.com

Deidara Deidara WM Aracı Kullanıcı
  • Üyelik 27.01.2013
  • Yaş/Cinsiyet 35 / E
  • Meslek Engelli Büro İşçisi
  • Konum İstanbul Avrupa
  • Ad Soyad F** D**
  • Mesajlar 9
  • Beğeniler 2 / 1
  • Ticaret 0, (%0)
Sağ ol hocam, tam da aradığım gibi.
 

 

Meric Meric Atam izindeyiz! Kullanıcı
  • Üyelik 11.05.2012
  • Yaş/Cinsiyet 27 / E
  • Meslek Computer Engineer
  • Konum Burdur
  • Ad Soyad M** G**
  • Mesajlar 696
  • Beğeniler 413 / 115
  • Ticaret 22, (%95)
Televizyonlarla ilgili bir sitem olsa mutlaka kullanırdım :) Çok güzel hocam. Teşekkürler :)
 

 

Onur Onur WM Aracı Kullanıcı
  • Üyelik 01.03.2013
  • Yaş/Cinsiyet 25 / E
  • Meslek N/A
  • Konum Sakarya
  • Ad Soyad O** B**
  • Mesajlar 1309
  • Beğeniler 0 / 297
  • Ticaret 65, (%98)
Vay be, Müjdat abi bu çok kaliteliymiş :)
mujdatsayar

kişi bu mesajı beğendi.

ferhatkorkut ferhatkorkut Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 28.07.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 274
  • Beğeniler 35 / 55
  • Ticaret 2, (%100)
Çok güzel olmuş elinize sağlık ancak sitemde iyi durmayacağı için kullanamıcam :)
 

 

lordleos lordleos WM Aracı Kullanıcı
  • Üyelik 04.03.2012
  • Yaş/Cinsiyet 46 / K
  • Meslek danışman
  • Konum
  • Ad Soyad L** K**
  • Mesajlar 148
  • Beğeniler 29 / 28
  • Ticaret 0, (%0)
Çok şık olmuş
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al