ruVisio

CSS3 генератор углов

Администратор — Sat, 18 Jun 2011 18:07:08 +0000

CSS3 генератор углов — если вам нужно создать быстро блок с закругленными краями, то сделать это теперь проще некуда. Воспользуйтесь генератором от ruVisio. Задайте значения углов вручную и код CSS3 автоматически сгенерируется с поддержкой различных браузеров.

Дрожь во всем

Администратор — Mon, 09 May 2011 13:42:38 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Всем привет. Сегодняшний урок будет достаточно интересным, так как эффект, который я продемонстрирую используется очень редко и найти подобные ресурсы с использованием данной технологии мне не доводилось. Сам скрипт jRumble v1.0 для меня ничего не говорит. Если честно, полный ноль в этом деле, но сам скрипт представлю. Смотрим ниже:

jRumble v1.0

(function($){
	$.fn.jrumble = function(options){

		var defaults = {
			rangeX: 2,
			rangeY: 2,
			rangeRot: 1,
			rumbleSpeed: 10,
			rumbleEvent: 'hover',
			posX: 'left',
			posY: 'top'
		};

		var opt = $.extend(defaults, options);

		return this.each(function(){

			$obj = $(this);
			var rumbleInterval;
			var rangeX = opt.rangeX;
			var rangeY = opt.rangeY;
			var rangeRot = opt.rangeRot;
			rangeX = rangeX*2;
			rangeY = rangeY*2;
			rangeRot = rangeRot*2;
			var rumbleSpeed = opt.rumbleSpeed;
			var objPosition = $obj.css('position');
			var objXrel = opt.posX;
			var objYrel = opt.posY;
			var objXmove;
			var objYmove;
			var inlineChange;

			if(objXrel === 'left'){
				objXmove = parseInt($obj.css('left'),10);
			}
			if(objXrel === 'right'){
				objXmove = parseInt($obj.css('right'),10);
			}
			if(objYrel === 'top'){
				objYmove = parseInt($obj.css('top'),10);
			}
			if(objYrel === 'bottom'){
				objYmove = parseInt($obj.css('bottom'),10);
			}

			function rumbler(elem) {
				var randBool = Math.random();
				var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2;
				var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2;
				var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2;	

				if(elem.css('display') === 'inline'){
					inlineChange = true;
					elem.css('display', 'inline-block')
				}

				if(randX === 0 && rangeX !== 0){
					if(randBool < .5){
						randX = 1;
					}
					else {
						randX = -1;
					}
				}

				if(randY === 0 && rangeY !== 0){
					if(randBool < .5){
						randY = 1;
					}
					else {
						randY = -1;
					}
				}

				if(objPosition === 'absolute'){
					elem.css({'position':'absolute','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
					elem.css(objXrel, objXmove+randX+'px');
					elem.css(objYrel, objYmove+randY+'px');
				}
				if(objPosition === 'fixed'){
					elem.css({'position':'fixed','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
					elem.css(objXrel, objXmove+randX+'px');
					elem.css(objYrel, objYmove+randY+'px');
				}
				if(objPosition === 'static' || objPosition === 'relative'){
					elem.css({'position':'relative','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
					elem.css(objXrel, randX+'px');
					elem.css(objYrel, randY+'px');
				}
			} 

			var resetRumblerCSS = {'position':objPosition,'-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'};

			if(opt.rumbleEvent === 'hover'){
				$obj.hover(
					function() {
						var rumblee = $(this);
						rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
					},
					function() {
						var rumblee = $(this);
						clearInterval(rumbleInterval);
						rumblee.css(resetRumblerCSS);
						rumblee.css(objXrel, objXmove+'px');
						rumblee.css(objYrel, objYmove+'px');
						if(inlineChange === true){
							rumblee.css('display','inline');
						}
					}
				);
			}

			if(opt.rumbleEvent === 'click'){
				$obj.toggle(function(){
					var rumblee = $(this);
					rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
				}, function(){
					var rumblee = $(this);
					clearInterval(rumbleInterval);
					rumblee.css(resetRumblerCSS);
					rumblee.css(objXrel, objXmove+'px');
					rumblee.css(objYrel, objYmove+'px');
					if(inlineChange === true){
						rumblee.css('display','inline');
					}
				});
			}

			if(opt.rumbleEvent === 'mousedown'){
				$obj.bind({
					mousedown: function(){
						var rumblee = $(this);
						rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
					},
					mouseup: function(){
						var rumblee = $(this);
						clearInterval(rumbleInterval);
						rumblee.css(resetRumblerCSS);
						rumblee.css(objXrel, objXmove+'px');
						rumblee.css(objYrel, objYmove+'px');
						if(inlineChange === true){
							rumblee.css('display','inline');
						}
					},
					mouseout: function(){
						var rumblee = $(this);
						clearInterval(rumbleInterval);
						rumblee.css(resetRumblerCSS);
						rumblee.css(objXrel, objXmove+'px');
						rumblee.css(objYrel, objYmove+'px');
						if(inlineChange === true){
							rumblee.css('display','inline');
						}
					}
				});
			}

			if(opt.rumbleEvent === 'constant'){
				var rumblee = $(this);
				rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
			}

		});
	};
})(jQuery);

Остальная часть урока лежит в демонстрационном файле, который вы можете просмотреть онлайн. Хочу еще сказать, что данный скрипт будет эффектно смотреться при использовании кнопок.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

ONG Conserva??o Internacional: Lipstick

Администратор — Sat, 16 Apr 2011 18:21:52 +0000

Красивые губки

Advertising Agency: Africa, S?o Paulo, Brazil

Creative Directors: Sergio Gordilho, Flavio Waiteman, Humberto Fernandez, Rafael Pitanguy

Art Director: Gabriel Jardim

Copywriter: Vinicius Bandeira

Illustrator: Paige Thompson

Photographer: Paige Thompson

Colon 101: 101 stains

Администратор — Fri, 15 Apr 2011 16:19:12 +0000

Реклама Colon 101: 101 stains

День Битлов

Администратор — Sat, 09 Apr 2011 12:38:16 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Сегодня хочу показать вам один пример от Романа Кортеза. Текст плавно перетекает из строчек песни в лицо популярного певца из группы Битлз. Пример кода я комментировать не буду, просто полюбуйтесь:

HTML

<div id="beatles" style="cursor: pointer; text-align: center; width: 450px; height: 470px; overflow: hidden;" onclick="anim()">Yesterday,
<br />All my troubles seemed so far away,
<br />Now it looks as though they're here to stay,
<br />Oh, I believe in yesterday.
<br />Suddenly,
<br />I'm not half the man I used to be,
<br />There's a shadow hanging over me,
<br />Oh, yesterday came suddenly.
<br />Why she
<br />Had to go I don't know, she wouldn't say.
<br />I said,
<br />Something wrong, now I long for yesterday.
<br />Yesterday,
<br />Love was such an easy game to play,
<br />Now I need a place to hide away,
<br />Oh, I believe in yesterday.
<br />Why she
<br />Had to go I don't know, she wouldn't say.
<br />I said,
<br />Something wrong, now I long for yesterday.
<br />Yesterday,
<br />Love was such an easy game to play,
<br />Now I need a place to hide away,
<br />Oh, I believe in yesterday.div>

JS

<script type="text/javascript">
    /*< ![CDATA[*/
    var d = 'Q;PQD0R1F1CMF=;I73F5=QP2WUHCWNAOP:8LF77E43BL4S?UEHNW?27UGBFJ2CC0WNI9;G?P1;G0GL35WRTMSBVB:@LJI>I03=J:RF1>>V3U?M3G=U7BF;GQ=E4=8RFBU23IMQ>GH1PINK:7D:JWC0UEPM9L>MRA6QRF?;>C7TLCU89CP?92A2U7UQCOEK<9A1S9W@7>AL562GTI7OF9?IE2UQPNSVNFK=PML1LNKFB8A32T4QOJ9W=QK?CEP6VA;UMQTA5K35W64MO25V3E5G7QC3BC=S0SB=A2GAO7VBTF8JF?BKLGQ8WPD>RECRPWSP9BPVKA2O56N?Q7DOO=3RDW;W53;QORWIF1:L22KV5SKV4=;@3=6W@0ECMJTBODP3HL=8TUMD2N1CNFSFR71D=PE>O?IN3EA5IM6HPSP@>U2S@OBG81NR551533394VATGMVBCR>TSKU5NGIQVES?;UD:URR7T?1E8GEAIUGS0O>PVS1GSWTP@SLLKKC?S3@34EUK<9HQ9J90:VGGIC82GGMI=?UOOOPL99:8H;>IBMLC?N3:W>4RRTR6MVA0NNEHSIFN6S?CTHGBA8A25Q;=R5@E6IT=;MADSN5590994MOWR4TIU59NGM?L4AJVN4LJG@1RRLO0CR>33<94>KE6Q5AI8V==9;T5CNU2F;O0O3GEKNISQQER0?U8@X8O1RUM7U@M8N9TQ=>UL=TQ=G26GESGGFC=GF3POOMNONJ3QCGTH4=0ULE6;A@DRNK17D1RTD4FVTPO5WA6DVK1CVI7Q@Q?PPCQCD>QEH;FQVQ9OBQLHI?4R9P>QM3KJSDPN2M87>RTL@2P:=JU6RPP@5T?>GMGASRQSQVVGS6>2=GB?RQ=JJ7AHFV@FD:NNVDPGE?T4@J15PLURMQSER>UB=K>PP3S8HJ7HVPP>;SANMTHVO0O0HBOP5M1ABQ73GE@O5@6P6PU9WRHQQ3W;F6A@ECVOWI1S5E35@< ?M728A<=P2KS97O89U2:U>OLB91J>FF>2MWV8P;1F;
    var xo = [],
        yo = [],
        xd = [],
        yd = [],
        e = [],
        an = -1,
        dir = -1;
    var e;

    function i() {
        var n = 0,
            g = document.getElementById('beatles'),
            l = g.innerHTML,
            s = '';
        while (n < l.length) {
            var r = l.charAt(n);
            if (r == ' ') {
                s += r;
                n++
            }
            if (r == '<') while (l.charAt(n - 1) != '>') s += l.charAt(n++);
            s += '' + l.charAt(n++) + '';
        }
        g.innerHTML = s;
        e = document.getElementById('beatles').getElementsByTagName('b');
        for (n = 0; n & lt; 520; n++) {
            xo[n] = e[n].offsetLeft;
            yo[n] = e[n].offsetTop;
            var p = d.charCodeAt(n * 3) * 1600 + d.charCodeAt(n * 3 + 1) * 40 + d.charCodeAt(n * 3 + 2) - 78768;
            yd[n] = p % 284;
            xd[n] = (p - yd[n]) / 284;
        }
        for (n = 0; n & lt; 520; n++) {
            e[n].style.position = 'absolute';
            e[n].style.left = xo[n] + 'px';
            e[n].style.top = yo[n] + 'px';
        }
    }

    function ani() {
        for (var n = 0; n & lt; 130; n++) {
            m = 519 - n;
            if ((an - n < = 30) && (an - n >= 0)) {
                var b = (Math.cos((((an - n) * Math.PI) / 30)) + 1) / 2;
                var a = 1 - b;
                for (i = 0; i < = 130; i += 130) {
                    e[n + i].style.left = ((xd[n + i] + 111) * a + xo[n + i] * b) + 'px';
                    e[n + i].style.top = ((yd[n + i] + 74) * a + yo[n + i] * b) + 'px';
                    e[m - i].style.left = ((xd[m - i] + 111) * a + xo[m - i] * b) + 'px';
                    e[m - i].style.top = ((yd[m - i] + 74) * a + yo[m - i] * b) + 'px';
                }
            }
        }
        an += dir;
        if ((an <= 160) && (an >= 0)) {
            window.setTimeout("ani()", 30);
        }
    }

    function anim() {
        dir *= -1;
        if ((an & lt; 0) || (an > 160)) ani();
    }
    i(); /*]]>*/
    < /r1>8ga > < /ctvchigp>n7fme6i: 5t > < /wtri6766>cg > < /ul>q6jiag37uf32874dw3wc7 > < /k5tmtd076>ss7bl3b2losgw1 >
script>

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Рекламный блок на CSS3

Администратор — Sun, 03 Apr 2011 11:47:48 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Иногда требуется сделать не очень броский рекламный блок, без использования тяжелых скриптов, но с различными эффектами. Сегодняшний урок как раз посвящен решению такого вопроса. Мы не будем использовать сторонние скрипты, ну к примеру Mootools или jQuery. Нам потребуются всего лишь знания CSS3. С рассмотрения css мы и начнем урок:

В head области нашего сайта прописываем css-код

		.slide-up-boxes a {
			display: block;
			height: 130px;
			margin: 0 0 20px 0;
			background: rgba(215, 215, 215, 0.5);
			border: 1px solid #ccc;
			height: 65px;
			overflow: hidden;
		}

		.slide-up-boxes h5 {
			color: #333;
			text-align: center;
			height: 65px;
			font: italic 18px/65px Georgia, Serif;
			 opacity: 1;
			 -webkit-transition: all 0.2s linear;
			 -moz-transition: all 0.2s linear;
			 -o-transition: all 0.2s linear;
		}

		.slide-up-boxes a:hover h5 {
			margin-top: -65px;
			opacity: 0;
		}

		.slide-up-boxes div {
			position: relative;
			color: white;
			font: 12px/15px Georgia, Serif;
			height: 45px;
			padding: 10px;
			opacity: 0;
			-webkit-transform: rotate(6deg);
			-webkit-transition: all 0.4s linear;
			-moz-transform: rotate(6deg);
			-moz-transition: all 0.4s linear;
			-o-transform: rotate(6deg);
			-o-transition: all 0.4s linear;
		}
		.slide-up-boxes a:hover div {
			opacity: 1;
			-webkit-transform: rotate(0);
			-moz-transform: rotate(0);
			-o-transform: rotate(0);
		}
/* Здесь мы укажем пути к нашим изображениям в формате *.png, а также их размеры в px */
		.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
		.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
		.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

Остальной код будет располагаться в body наше сайта. Выглядит он следующим образом:

Вставка рекламных блоков в тело документа



			
				Где я работаю...
				Wufoo представляет собой интернет-фирму, которая занимается строительством самых сложных форм.
			

			
				Книга написанной мною в соавторстве ...
				Копаться в WordPress это книга и блог в соавторстве с Джефом Старр, #1 в мире.
			

			
				Words I collect...
				Quotes on Design is a collection of design related quotes. With an API for your integration ideas!

На этом мой небольшой урок закончен. Если вам понравилось, оставляйте свои комментарии и подписывайтесь на RSS-рассылку.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

3D галерея сайтов

Администратор — Mon, 28 Mar 2011 14:26:30 +0000

Вот решил наконец дополнить свой сервис SEO. Простой показ ссылок и голосование – это как то скучновато и не очень наглядно. Другое дело, когда можно посмотреть превьюшку сайта и перейти на него одним кликом мыши.

Для того, чтобы ваш сайт попал в галерею, необходимо просто добавить его в список, который находится здесь.

И наконец, всего за 50 рублей вы сможете выделить свой сайт в 3D галерее знаком VIP. Все предложения через контакную форму.

Eset NOD32 – Обнови свою защиту!

Администратор — Sun, 27 Mar 2011 16:44:10 +0000

Только для посетителей нашего сайта ключи популярного антивируса Eset NOD32. Ключи располагаются ниже в комментариях и предоставляются доброжелателями.

9 градиентных CSS кнопок

Администратор — Sat, 19 Mar 2011 16:35:45 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Мой очередной урок будет посвящен созданию оригинальных градиентных кнопок, которые используют только CSS и ничего более. Мало того, они так же являются мультиплатформенными. В чем же преимущество таких кнопок? Ответ прост: вы имеете на своем сайте красивые кнопки и высокую скорость работы. Давайте сначала рассмотрим только html-код:

index.html

< !DOCTYPE html>



    Мультиплатформенные CSS градиентные кнопки - ruVisio
    


            

            Кнопка
            Кнопка
            Кнопка
            

            Кнопка
            Кнопка
            Кнопка
            

            Кнопка
            Кнопка
            Кнопка

Теперь перейдем к CSS-коду, который можно разместить в шапке документа, либо создать style.css и прописать путь одной строкой.

Стиль кнопки и ее цветовые решения

/* Данный CSS-код мы вставим в head нашего html документа */
        {
            background: #e5e5e5;
            text-align: center;
        }

        /* Здесь создаем саму основу кнопки */

        .button
        {
            margin: 10px;
            text-decoration: none;
            font: bold 1.5em 'Trebuchet MS',Arial, Helvetica;
            display: inline-block;
            text-align: center;
            color: #fff;

            border: 1px solid #9c9c9c;
            border: 1px solid rgba(0, 0, 0, 0.3);            

            text-shadow: 0 1px 0 rgba(0,0,0,0.4);

            box-shadow: 0 0 .05em rgba(0,0,0,0.4);
            -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
            -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

        }

        .button, .button span
        {
            -moz-border-radius: .3em;
            border-radius: .3em;
        }

        .button span
        {
            border-top: 1px solid #fff;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            display: block;
            padding: 0.5em 2.5em;

            /* Фоновое изображение */

            background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                              -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                              -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                              -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
            background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                              -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                              -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                              -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

            /* Настройки */

            -moz-background-size: 3px 3px;
            -webkit-background-size: 3px 3px;
        }

        .button:hover
        {
            box-shadow: 0 0 .1em rgba(0,0,0,0.4);
            -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
            -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
        }

        .button:active
        {
            /* При нажатии перемещение просиходит на 1px */
            position: relative;
            top: 1px;
        }

        /* Кнопка Хаки */

        .button-khaki
        {
            background: #A2B598;
            background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) );
            background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598);
            filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BDD1B4', EndColorStr='#A2B598');
        }

        .button-khaki:hover
        {
            background: #BDD1B4;
            background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) );
            background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);
            filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A2B598', EndColorStr='#BDD1B4');
        }

        .button-khaki:active
        {
            background: #A2B598;
        }

        /* Синяя кнопка */        

        .button-blue
        {
            background: #4477a1;
            background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
            background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
            filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
        }

        .button-blue:hover
        {
            background: #81a8cb;
            background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
            background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
            filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
        }

        .button-blue:active
        {
            background: #4477a1;
        }

        /* Коричневая кнопка */

        .button-brown
        {
            background: #8f3714;
            background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );
            background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');
        }

        .button-brown:hover
        {
            background: #bf6f50;
            background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );
            background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');
        }

        .button-brown:active
        {
            background: #8f3714;
        }

        /* Зеленая кнопка */

        .button-green
        {
            background: #428739;
            background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );
            background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');
        }

        .button-green:hover
        {
            background: #c8dd95;
            background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );
            background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');
        }

        .button-green:active
        {
            background: #428739;
        }

        /* Красная кнопка */

        .button-red
        {
            background: #D82741;
            background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );
            background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');
        }

        .button-red:hover
        {
            background: #E84B6E;
            background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );
            background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');
        }

        .button-red:active
        {
            background: #D82741;
        }
        /* Пурпурная кнопка */

        .button-purple
        {
            background: #6F50E7;
            background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
            background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7');
        }

        .button-purple:hover
        {
            background: #B8A9F3;
            background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );
            background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');
        }

        .button-purple:active
        {
            background: #6F50E7;
        }

        /* Черная кнопка */

        .button-black
        {
            background: #141414;
            background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) );
            background: -moz-linear-gradient(-90deg, #656565, #141414);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414');
        }

        .button-black:hover
        {
            background: #656565;
            background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) );
            background: -moz-linear-gradient(-90deg, #141414, #656565);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565');
        }

        .button-black:active
        {
            background: #141414;
        }

        /* Оранжевая кнопка */

        .button-orange
        {
            background: #f09c15;
            background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
            background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
        }

        .button-orange:hover
        {
            background: #f8c939;
            background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );
            background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');
        }

        .button-orange:active
        {
            background: #f09c15;
        }

        /* Серебряная кнопка */

        .button-silver
        {
            background: #c5c5c5;
            background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) );
            background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#c5c5c5');
        }

        .button-silver:hover
        {
            background: #eaeaea;
            background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) );
            background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c5c5c5', EndColorStr='#eaeaea');
        }

        .button-silver:active
        {
            background: #c5c5c5;
        }

На этом урок закончен. Если у вас остались вопросы или пожелания, пишите…

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Volt – Наше поколение

Администратор — Thu, 17 Mar 2011 16:11:56 +0000

Реклама Adidas

Портфолио с эффектом затвора

Администратор — Sun, 13 Mar 2011 07:40:09 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Здравствуйте. В сегодняшнем уроке мы будем использовать элемент HTML5 для создания простого портфолио фотографий, которое отображает множество фотографий с эффектом затвора камеры. Данная функция будет осуществляться при помощи использования плагина jQuery, который можно легко интегрировать в любой сайт.

Идея

Элемент холста – это специальная область, на которой можно рисовать при помощи JavaScript и применять всевозможные манипуляции с изображением. Однако существуют ограничения на то, что можно сделать с ним. Создание сложной анимации в реальном времени является сложной задачей, так как приходится перерисовывать холст на каждом кадре.

Для таких процессов требуется много вычислительной мощности. На сегодняшний день современные веб-браузеры просто не готовы к таким сложным операциям, и, как результат, плавная анимация практически невозможна. Но есть способ обойти это ограничение. Если вы посмотрели демонтсрацию, вы заметили, как гладко она работает. А все потому, что кадры формируются заранее и каждый из них построен как отдельный элемент.

Эффект затвора

Для просмотра изображения кликните по нему. Вы наверное заметили уже, что частвует в процессе реализации затвора одно единственное изображение. С помощью Холста и плагина jQuery все работает довольно слаженно и без потери производительности.

Напоминаю, что Canvas (англ. canvas — «холст») — это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Так же в свою очередь могу сказать, что я сам использую эффект “холста” у себя на сайте. Он реализуется в нестандартных шрифтах блога. Хотя многие думают, что это просто шрифты, прописанные в шапке. Это заблуждение – битмап да и только.

Теперь давайте поближе познакомимся с разметкой HTML нашей главной страницы. Так как мы используем Canvas элемент, нам необходимо определить документ как HTML5, то есть DOCTYPE.

index.html

< !DOCTYPE html> 



"Эффект затвора" совместно с использованием Canvas И jQuery | Ruvisio Demo











	Портфолио с эффектом затвора

Стили для страницы и плагин включены в головной части документа, а вот сценарий как раз находится в #content. Содержание DIV имеет неупорядоченный список из четырех фотографий, которые будут отображаться в виде слайд-шоу. Если браузер пользователя не поддерживает элемент холста, то он просто увидит циклически прокручиваемые образы без отображения эффекта затвора фотокамеры.

Открытый затвор камеры

В данном примере на картинке показан открытый затвор. Так будет выглядеть в принципе любое портфолио, но далее будет показан пример работы уже с закрытым затвором. Хочется сказать, что именно этот эффект будет порождать новый вид HTML кода content# div. Давайте посмотрим на него и поймем как он работает и по какому принципу.

Генерация HTML

Каждый элемент холста содержит один кадр затвора анимации. Высота .film div установлена достаточно большой, для отображения элементов холста один над другим.

.ShutterAnimationHolder div установлен такой же высоты, как контейнер, в котором он установлен, и отображает неупорядоченный список с фотографиями. При overflow:hidden он скрывает остальной части анимации и показывает только определенные кадры.

CSS

Если коснуться CSS кода, то можно скказать, что эта часть кода не столь важна, нежели та, которая отвечает за создание полотна изображений. Тем не менее, CSS все равно должнен быть организован в виде фильмопленки в целях достижения гладкой анимации.

styles.css

.shutterAnimationHolder .film canvas{
	display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
	position:absolute;
	left:50%;
	top:0;
}

.shutterAnimationHolder{
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	z-index:1000;
}

Эти три набора правил с префиксом класса .shutterAnimationHolder влияют только на разметку. Для оптимизации вы можете скопировать этот код в ваш основной файл стилей, в целях сведения к минимуму количество запросов HTTP.

Закрытый затвор камеры

На данном рисунке показан закрытый затвор портфолио. Смотрится достаточно оригинально и что самое главное без использования флеш анимации. Я не сторонник флеш, так как потребляемость ресурсов увеличивается в разы. А это приводит к заторможенности при показе основного контента сайта. Хотя сейчас тенденция использования Flash уходит в небытыие.

jQuery

Здесь мы создадим плагин jQuery – tzShutter – который прост в использовании и требует минимальных изменений на вашем сайте для его использования. Одним из важных аспектов развития этого плагина, является обеспечение надлежащей поддержки для пользователей, чьи браузеры не понимают Canvas теги (в основном все версии IE, за исключением 9). Это в принципе дело не столь тяжелое.

Также мы должны обеспечить работу вызова анимации открытия и закрытия для пользователей tzShutter. Мы добьемся этого с использованием двух пользовательских событий, содержащих элементы – shutterOpen и shutterClose, которые, в свою очередь, легко выполняются методом trigger() jQuery.

Кроме того, плагин будет предоставлять пользователям способ подключения пользовательских функций посредством функций обратного вызова, изменяя параметры. Они выполняются в ключевых секторах анимации – когда холст элементы создаются, и, когда затвор открыт или закрыт.

Я не стану рассматривать код jQuery, он вызывает у меня ошибку на странице.

Единственным недостатком этого метода является то, что частое обращение к процессору вашего компьютера, может привести интерфейс браузера к зависанию на короткий промежуток времени. Как альтернатива можно использовать фактически изображения PNG вместо данного метода, но тогда это заняло бы более 1МБ места на ваших страницах (по сравнению с 12 Кб сейчас).

Теперь посмотрим, как плагин используется.

Script

script.js

$(document).ready(function(){

	var container = $('#container'),
		li = container.find('li');

	container.tzShutter({
		imgSrc: 'assets/jquery.shutter/shutter.png',
		closeCallback: function(){

			li.filter(':visible:first').hide();

			if(li.filter(':visible').length == 0){
				li.show();
			}

			setTimeout(function(){container.trigger('shutterOpen')},100);
		},
		loadCompleteCallback:function(){
			setInterval(function(){
				container.trigger('shutterClose');
			},4000);

			container.trigger('shutterClose');
		}
	});

});

Когда работа плагина заканчивается, это вызывает функцию loadCompleteCallback. Мы используем его для планирования затвора анимации каждые четыре секунды, что сопровождается изменением фотографий неупорядоченным списком.

В заключении

Canvas теги предоставляют разработчикам широкий спектр возможностей и позволяют им создавать новые и интересные для пользователей интерфейсы, анимации и даже игр. Поделитесь своими мыслями в комментариях ниже. Если вам понравился этот урок, не забывайте подписаться на наш канал RSS.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Эффект загнутых уголков на CSS

Администратор — Sun, 06 Mar 2011 10:12:08 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Очень простой урок, который покажет, насколько просто преобразить ваш сайт без использования разнообразных скриптов. Все делается при помощи CSS. В теле документа разместим обычный дивы, в которых будет находиться наш контент. 4 варианта расцветки, отсюда и 4 класса: note, note red rounded, note blue и note taupe.

index.html


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Теперь перейдем непосредственно к нашему CSS файлу: style.css. Все комментарии кода будут находиться в самом файле css. Поэтому читаем и изучаем, что кому непонятно.

style.css

/* -- Загнутые уголки -- */

.note {
    position:relative;
    width:480px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* Данный трюк устраняет ошибку в браузерах webkit (сдвиг)  */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* Для работы с .rounded */
    background:#658E15; /* Для Opera при применении border-radius */
    display:block; width:0; /* Только для Firefox 3.0 для снятия ограничений */
    /* Опционально: тени */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

/* Версия со скругленными углами
 * Все современные браузеры могут воспроизвести данный эффект с помощью одного псевдо-элемента.
 * Но, все они работают с ошибками (связанными с border-radius), поэтому надо использовать трюки.
 * Это единственный кросс-браузерный метод на данный момент.
 * Нельзя использовать данный метод для простого эффекта, потому что Opera 11 показывает цвет фона
 * сквозь прозрачную обводку только при использовании свойства border-radius.
 */

.note.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.note.rounded:before {
    border-width:8px; /* Включает сдвиг на 1px по диагонали в Safari 5 (и Chrome 10) */
    border-color:#fff #fff transparent transparent; /* Исключает сдвиг на 1px в браузерах webkit. Фоновый цвет виден. */
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}

Применять данный стиль очень удобно на любых сайтах, так как оформление довольно универсально и производит неизгладимое впечатление.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Google Chrome – Мировая статистика

Администратор — Wed, 23 Feb 2011 15:56:16 +0000

Сейчас уже февраль и хотелось бы опубликовать мировую статистику по использованию интернет браузеров по состоянию на январь 2011 года. Я как то не очень доверяю нашей статистике, так как одно вранье. Можете сами посмотреть на примере статьи, которую я публиковал по использованию браузеров на январь 2010 года. Цифры заставляют усомниться. Я думаю будет интересно знать, что лидером все же пока остается IE, хотя силы покидают этот “замечательный” продукт корпорации Microsoft. Билл Гейтс седеет, а Эрик Шмидт зарабатывает миллиарды. Я пока что на стороне Google Chrome в основном из-за скорости загрузки веб-приложений, стабильности в работе, поддержкой широкого спектра стандартов разметки и маложорством ресурсов. Смотрите сами и делайте выводы:

Для тех, кому интересен новый Google Chrome (beta), можете скачать:

fRUVISIO – Форум блогера

Администратор — Sun, 06 Feb 2011 16:35:41 +0000

Решил открыть собственный форум, предназначенный в основном для написания статей, полезных для начинающих веб дизайнеров. У многих возникают вопросы в части CSS, HTML, Java и т.п. На форуме я попытаюсь обсудить наиболее нужные моменты кодинга. Что сказать, я еще сам учусь и поэтому для меня данные статьи будут служить дополнительным обучением. Регистрация обязательна для читателей форума.

Слайдер с автопоказом

Администратор — Thu, 03 Feb 2011 15:14:18 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Сегодня нашел хороший слайдер с эффектом предварительного затемнения перед просмотром следующего изображения. Стильный и вполне многим подойдет для всевозможных проектов. Начнем пожалуй с html файла, а если точнее, то пропишем следующий код в теле документа:

index.html

Так как скрипт с автопросмотром, то естественно можно настроить временные интервалы между отображениями картинок. Для этого нам необходим скриптовый файл autoadvance.js

autoadvance.js

...
	(function autoAdvance(){

		// Simulating a click on the next arrow.
		$('#slideshow .next').trigger('click',[true]);

		// Schedulling a time out in 5 seconds.
		timeOut = setTimeout(autoAdvance,5000);
	})();
...

В скрипте находим функцию autoAdvance и меняем значение 5000 на необходимый вам временной интервал, при этом нужно знать, что значение указывается в миллисекундах (мс). На этом мой небольшой урок закончен.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

С Новым 2011 Годом!

Администратор — Thu, 30 Dec 2010 17:39:22 +0000

Здравствуйте друзья! Хочу начать с того, что поздравляю всех с наступающим, а для кого уже и наступившим Новым годом. Пусть в 2011 у всех все будет хорошо, а точнее – лучше всех. Всем здоровья, радости, благополучия и побольше радостей в жизни. В общем не стану распинаться, просто всех поздравляю и желаю удачи. А я на месяц в работу погружаюсь, так что на обновления можете не рассчитывать, но все возможно :)

Безусловный лидер от Google

Администратор — Sat, 18 Dec 2010 07:28:02 +0000

Сегодня увидел такую странную особенность, а именно то, что мой сайт отображается корректно и без тормозов только в Google Chrome. Opera, Internet Explorer, Mozilla Firefox и другие аналоги безусловно отстают в развитии. Я не призываю использовать только один браузер, но рекомендую попробовать браузер от именитой корпорации Google. Разницу в скорости загрузки веб приложений заметите на первых минутах работы. У меня в блоге установлено много дополнений и скриптов, но только Google Chrome успевает обрабатывать их всех не загружая при этом оперативную память и дисковое пространство компьютера. Пытался я отключать кеш в других браузерах – безрезультатно, тормоза не пропали. Попробовал даже Safari от Apple – браузер хороший, но пришлось устанавливать много дополнительных плагинов для поддержки контента сайта. Сделал вывод и отдал предпочтение GH. Попробуйте, может и вам понравится.

WhoIs – Узнай, свободен ли твой домен…

Администратор — Wed, 27 Oct 2010 17:12:48 +0000

Whois — сервис для проверки доменов. Введите любое имя сайта в поисковую строку без http://, и узнаете, свободен ли домен или занят. Если доменное имя уже занято, можно узнать, кто его владелец и как с ним связаться.

Я думаю, вдаваться в подробности не стоит. Очень удобный сервис для поиска доменов. Сегодня в сети таких море, но мне захотелось свой. Не удержался.

Чат

Администратор — Sat, 23 Oct 2010 12:51:31 +0000

Мне тут недавно пришла мысль в голову о создании собственного чата на сайте www.ruvisio.ru. Не скажу, что была серьезная необходимость. Но тем не менее захотелось и все тут. Некоторые читатели блога могут задавать свои вопросы онлайн, когда я нахожусь на сайте. Не хочется переписываться через icq и прочие социальные сети, где рекламы полно, да и просто неудобно.

Немного о функциональности. Чат работает очень быстро и обновляется налету, так как ajaxAJAX (?e?d??ks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью и веб-приложения становятся более быстрыми и удобными. делает свою работу безукоризненно. Так же поддерживается система Gravatars.Граватар - это ваша картинка, которая всегда с вами от сайта к сайту, появляющаяся когда вы оставляете комментарий или делаете пост в блоге. Аватары помогают идентифицировать вас на блогах и форумах, так почему бы не использовать их везде? Зарегистрироваться можно по адресу Регистрация на сайте: http://ru.gravatar.com

В чате вы можете писать что хотите, все записи все равно будут уничтожаться по истечении определенного времени автоматически. Так что, в принципе, он резиновый и не хранит ненужного хлама. Как и любой современный чат. Пользуйтесь на здоровье.

Анимированные CSS3 кнопки

Администратор — Fri, 22 Oct 2010 17:54:15 +0000

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

На этой неделе мы создаем полезный набор анимированных кнопок с использованием CSS3 и анимации. С помощью этого пакета кнопок вы можете легко превратить любую ссылку на вебстранице в анимированную кнопку, просто присваивая имя класса. Нет необходимости использовать JavaScript. Кнопки представлены в четырех ярких цветах и трех размерах, которые также доступны путем назначения дополнительных классов.

Наши кнопки имеют три размера, которые можно выбрать путем применения классов:

HTML-код, отвечающий за размеры кнопок

Скачать
Скачать
Скачать

Есть четыре доступных класса цвета – синий, зеленый, оранжевый и серый. Так же вы можете выбрать размер от малых, средних и до больших, и еще один класс – округлые, что создает более округлые версии кнопок. Имена классов легко запомнить, но это повышает возможность перекрытия с некоторыми из других классов на вашей уже существующей странице.

Очень важно понимать, что при помощи файла buttons.css можно легко менять параметры кнопок. При должном умении можно легко создать свои уникальные стили и использовать их в дальнейшем на ваших страницах.

Весь CSS код находится в buttons.css. Встроить стилевой файл легко и просто. Просто поместите его в существующий проект и используйте его.
Обратите внимание, что в представленном ниже коде используются правила для разных браузеров, что позволяет исключать неправильную работу.

buttons.css

.button{
    font:15px Calibri, Arial, sans-serif;

    /* Полупрозрачная тень текста */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Переопределение умолчания подчеркнуть стиль ссылки */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    /* Следующие два правила служат если браузер не поддерживает несколько фонов */

    background-position:bottom left;
    background-image:url('button_bg.png');

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Применяем значение по умолчанию радиуса границ в 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* 1px внутри кнопки */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Анимация фона при помощи CSS3 */
    /* Работает корректно только в Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    -o-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{

    /* Первое правило резервное, в случае, если браузер не поддерживает несколько фонов */

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

Анимация фона

Как я уже упоминал, анимация кнопок отображается в виде двух отдельных изображений, смещая позицию собственного фона. Используя свойство CSS3 перехода, мы определяем анимацию, в которой при наведении мыши на кнопку происходит вертикальное смещение фона в разных направлениях, что создает такой изумительный эффект перхлестывания. Хочется заметить еще раз, что никаких дополнительных скриптов не используется. Поэтому такую кнопку очень легко встроить на любой сайт.

Стиль кнопки

/* Синяя кнопка */

.blue.button{
    color:#0f4b6d !important;

    border:1px solid #84acc3 !important;

    /* Резервный цвет фона */
    background-color: #48b5f2;

    /* Указание версии градиента в соответствии с... */

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                           rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

На этом наш урок закончен. Скачать исходные файлы можно бесплатно с нашего сервера.

Информация о загрузкахNote: There is a file embedded within this post, please visit this post to download the file.

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!