Jump to content
«ПЛАНАР-СИТИ»
  • Announcements

    • DVN

      Борьба за Авторское право

      Предупреждаю всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума с 13.03.2007 года все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта будут сразу же удаляться в Корзину.
    • DVN

      Борьба за Авторское право-2

      Предупреждаю ЕЩЁ РАЗ, всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта (авторства, ссылки на источник, откуда Вы взяли эту информацию) будут сразу же удаляться в Корзину. Если Вы автор представленной информации, так и пишите - © ник
Sign in to follow this  
ЗАРАЗА

Интересный WEB-кодинг

Recommended Posts

Интерактивная 3D анимация на чистом CSS (без java, без flash, без gif)

 

<iframe width="640" height="480" src="

http://www.romancortes.com/ficheros/css-coke.html" frameborder="0" allowfullscreen></iframe>

 

Исходный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Coke Can by Román Cortés</title>
<style type="text/css">
	body
	{
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	#coke
	{
		width: 510px;
		height: 400px;
		overflow: auto;
	}

	img
	{
		border: 0;
		margin-left: -172px;
	}

	a
	{
		display: block;
		padding-top: 19px;
		width: 194px;
	}

	a:hover img
	{
		background-image: url(coke-title.png);
		background-repeat: no-repeat;
		background-position: 15px 100px;
	}

	div div
	{
		background-image: url(coke-scroll.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		padding-left: 300px;
		width: 660px;
	}

	p
	{
		margin: 0;
		padding: 0;
		float: left;
		height: 336px;
		background-image: url(coke-label.jpg);
		background-attachment: fixed;
		background-repeat: repeat-x;
		width: 1px;
	}

	#x1 {background-position: 5px 30px;}
	#x2 {background-position: 0px 30px;}
	#x3 {background-position: -3px 30px;}
	#x4 {background-position: -6px 30px;}
	#x5 {background-position: -8px 30px;}
	#x6 {background-position: -10px 30px;}
	#x7 {background-position: -12px 30px;}
	#x8 {background-position: -14px 30px;}
	#x9 {background-position: -15px 30px;}
	#x10 {background-position: -16px 30px;}
	#x11 {background-position: -17px 30px;}
	#x12 {background-position: -18px 30px;}
	#x13 {background-position: -19px 30px;}
	#x14 {background-position: -20px 30px;}
	#x15 {background-position: -21px 30px;}
	#x16 {background-position: -22px 30px; width: 2px;}
	#x17 {background-position: -23px 30px;}
	#x18 {background-position: -24px 30px; width: 2px;}
	#x19 {background-position: -25px 30px; width: 2px;}
	#x20 {background-position: -26px 30px; width: 2px;}
	#x21 {background-position: -27px 30px; width: 2px;}
	#x22 {background-position: -28px 30px; width: 3px;}
	#x23 {background-position: -29px 30px; width: 3px;}
	#x24 {background-position: -30px 30px; width: 4px;}
	#x25 {background-position: -31px 30px; width: 5px;}
	#x26 {background-position: -32px 30px; width: 7px;}
	#x27 {background-position: -33px 30px; width: 12px;}
	#x28 {background-position: -34px 30px; width: 55px;}
	#x29 {background-position: -35px 30px; width: 11px;}
	#x30 {background-position: -36px 30px; width: 6px;}
	#x31 {background-position: -37px 30px; width: 5px;}
	#x32 {background-position: -38px 30px; width: 4px;}
	#x33 {background-position: -39px 30px; width: 3px;}
	#x34 {background-position: -40px 30px; width: 2px;}
	#x35 {background-position: -41px 30px; width: 3px;}
	#x36 {background-position: -42px 30px; width: 2px;}
	#x37 {background-position: -43px 30px; width: 2px;}
	#x38 {background-position: -44px 30px;}
	#x39 {background-position: -45px 30px; width: 2px;}
	#x40 {background-position: -46px 30px;}
	#x41 {background-position: -47px 30px;}
	#x42 {background-position: -48px 30px;}
	#x43 {background-position: -49px 30px;}
	#x44 {background-position: -50px 30px;}
	#x45 {background-position: -51px 30px;}
	#x46 {background-position: -52px 30px;}
	#x47 {background-position: -53px 30px;}
	#x48 {background-position: -54px 30px;}
	#x49 {background-position: -56px 30px;}
	#x50 {background-position: -58px 30px;}
	#x51 {background-position: -60px 30px;}
	#x52 {background-position: -62px 30px;}
	#x53 {background-position: -65px 30px;}
	#x54 {background-position: -68px 30px;}
	#x55 {background-position: -74px 30px;}
</style>
</head>
<body>
<div id="coke">
	<div id="y">
		<p id="x1"></p><p id="x2"></p><p id="x3"></p><p id="x4"></p><p id="x5"></p><p id="x6"></p><p id="x7"></p><p id="x8"></p><p id="x9"></p><p id="x10"></p><p id="x11"></p><p id="x12"></p><p id="x13"></p><p id="x14"></p><p id="x15"></p><p id="x16"></p><p id="x17"></p><p id="x18"></p><p id="x19"></p><p id="x20"></p><p id="x21"></p><p id="x22"></p><p id="x23"></p><p id="x24"></p><p id="x25"></p><p id="x26"></p><p id="x27"></p><p id="x28"></p><p id="x29"></p><p id="x30"></p><p id="x31"></p><p id="x32"></p><p id="x33"></p><p id="x34"></p><p id="x35"></p><p id="x36"></p><p id="x37"></p><p id="x38"></p><p id="x39"></p><p id="x40"></p><p id="x41"></p><p id="x42"></p><p id="x43"></p><p id="x44"></p><p id="x45"></p><p id="x46"></p><p id="x47"></p><p id="x48"></p><p id="x49"></p><p id="x50"></p><p id="x51"></p><p id="x52"></p><p id="x53"></p><p id="x54"></p><p id="x55"></p>
		<a href="http://www.romancortes.com/" target="_top">
			<img src="coke-can.png" alt="Pure CSS Coke Can by Román Cortés" />
		</a>
	</div>
</div>
</body>
</html>

 

Материалы:

 

coke-label.jpg

http://www.romancortes.com/ficheros/coke-label.jpg

 

coke-scroll.png

http://www.romancortes.com/ficheros/coke-scroll.png

 

coke-title.png

http://www.romancortes.com/ficheros/coke-title.png

 

Источник: http://www.romancortes.com/ficheros/css-coke.html

:)

Share this post


Link to post
Share on other sites

Классно, сейчас через css, тексту и тень можно добавить и вогнутость, и сложные активные фоны, никогда flash не любил, а теперь в нем-то и смысла нет.

По теме прикольные было бы не в сторону крутить, а объект подкручивать, как в rozetka 3-D товары.

Edited by A1es

Share this post


Link to post
Share on other sites

Классно, сейчас через css, тексту и тень можно добавить и вогнутость, и сложные активные фоны, никогда flash не любил, а теперь в нем-то и смысла нет.

По теме прикольные было бы не в сторону крутить, а объект подкручивать, как в rozetka 3-D товары.

 

Это делается на яваскрипте.

Где-то оно у меня было...

Найду исходники - выложу.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×