Показать сообщение отдельно
  #5 (permalink)  
Старый 27.06.2010, 17:19
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

<offtopic>
Я вот тут подумал и сделал небольшой набросок на тему активности и css.
К сожалению, Opera-only.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>CSS Fun</title>
		<style type="text/css">
html, body, label{width:100%; height:100%; padding:0; margin:0; border:none; background:transparent}
body *{position:fixed}
input{width:0px; height:0px; top:-10px}
p{background:black; margin:0px; height:100%; width:100%; top:0; left:0}
a{width:100px; height:100px; background:#fff; border-radius:50px; left:50%; top:50%; margin:-50px 0 0 -50px; overflow:hidden}
a:after{position:absolute; display:block; content:"."; background:black; width:110px; height:0px; padding:110px 0px 0px 0px; border-radius:60px; left:30px; overflow:hidden}
b, 
b:before, 
b:after, 
i, 
i:before, 
i:after{content:""; position:fixed; background:white; height:0px; width:5px; padding:5px 0 0 0; border-radius:5px; top:80%; left:70%}
b:before{top:10%; left:10%}
b:after{top:70%; left:90%}
i{top:45%; left:20%}
i:before{top:5%; left:80%}
i:after{top:85%; left:5%}

input:focus+p{background:#c0c0ff}

input:focus+p a{background:orange; overflow:visible}

input:focus+p a:after{background:transparent; top:-8px; left:-8px; border:solid #ffff50 3px}

input:focus+p b, 
input:focus+p b:before, 
input:focus+p b:after, 
input:focus+p i, 
input:focus+p i:before, 
input:focus+p i:after{width:40px; height:0px; padding:6px 0 0 0; border-radius:40px/10px; background:#f0ff60; left:50%; top:50%; margin:-3px 0 0 -120px}

input:focus+p i:before, 
input:focus+p i:after, 
input:focus+p b:before, 
input:focus+p b:after{position:absolute; top:0px; left:0px; margin:0px; -o-transform-origin:120px 3px; -o-transform:rotate(120deg)}

input:focus+p b:after, 
input:focus+p i:after{-o-transform:rotate(-120deg)}

input:focus+p b{-o-transform-origin:120px 3px; -o-transform:rotate(180deg)}

		</style>
	</head>
	<body>
		<label><input /><p><a></a><b></b><i></i></p></label>
	</body>
</html>

Щелк внутри ифрейма — щелк снаружи.
</offtopic>
Ответить с цитированием