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

Кому пригодиться этот скрипт?

Область применения этого плагина очень широкая. Мне сразу в голову приходят бьюти блоги, то есть про макияж и одежду. Вот там можно делать мгновенное сравнение результата мейкапа или стиля одежды той или иной звезды шоу-бизнеса.

Также не могут обойти стороной скрипт авторы сайтов и блогов про дизайн. Вы сможете круто показать редизайн сайта или ваше личное видение фасадного ремонта Белого дома. Вообщем, есть где разыграться.

Как установить себе в блог?

Сейчас я расскажу как установить этот скрипт сайту на платформе Blogger.
1. Заходим в Панель управления и выбираем нужны блог.
2. В сайдбаре слева выбираете вкладку Шаблон, а затем на обновившейся странице нажимаете на кнопку Изменить HTML.

3. Кликните левой кнопкой мыши по коду в текстовом поле и нажмите CTRL+F и в том же поле с кодом должно появиться поле Search, как на картинке. В поле поиска вводим </head>.

4. Теперь когда Вы нашли этот тег, нужно перед ним вставить следующий код:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
});
</script> 

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение

5. Найдите строчку,  где у Вас начинается стиль <b:skin> и где рядом, под информацией о шаблоне Вы встретите строчку <Variable name="maincolor" .., если ее нашли, то под этой строчкой вставьте следующий код:

<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/> 

Если не нашли, то вставьте код в любое место после  <b:skin>.

5. Осталось сохранить шаблон и переходить к следующем пункту!

Как работать с плагином эффекта до/после?

Для начала нужно создать новое сообщение и в нужно месте разместить следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

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

Между прочем, если у Вас есть несколько таких сравнений, то есть отличное решение - нужно добавить всего одну строчку в код перед </head>. Нужно скопировать и изменить номер блока beforeafter. То есть был только beforeafter1, а теперь появиться beforeafter2, beforeafter3 и тд. Код для двух сравнение будет выглядеть так:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : false});
});
</script> 

А страница сообщение будет иметь следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

<div id='beforeafter2'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

Теперь осталось проверить работу скрипта - посмотрите что получилось. У меня получился вот такой результат - смотрите демонстрацию работы плагина до/после . Кстати, друзья, а Вы видели новый трейлер фильма "Первый мститель: Противостояние"? Предлагаю посмотреть и уже начинать ждать эту кинокартину.


На этом всё. За скрипт спасибо CatchMyFame, а всем остальным спасибо, за то что прочитали. Ваши вопросы по работе скрипта пишите в комментах. До скорого!

Всем привет!  Как говориться, праздник к нам приходит, а что более звучно мне - свято наближається! Это я к чему - сегодня у меня новогодний пост, который посвящен необычной странице-поздравления. Никакого flash, только передовые технологии js, css и html! А что самое главное - это под силу каждому!

Пример 1 Пример 2
Пример 3 Пример 4

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

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

JavaScript- код

/**
 *
 * Скрипт новогоднего праздника xD
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Идея Script Tutorials
 * http://www.script-tutorials.com
 * 
 * Адаптация
 * http://www.ipetrenko.ru 
 */

// canvas and context objects
var canvas, ctx;

//Snowflakes object
Snowflakes = (function () {

    // sprites information
    var sprCnt = 15;
    var sprWidth = 80;
    var sprHeight = 68;

    // arrays of snowflakes and sprites
    var snowflakes = [];
    var snowflakeSprites = [];

    // other inner params
    var minScale = 0.2; // min scale for flakes
    var maxScale = 1.2; // max scale for flakes

    var minVerticalVelocity = 2; // min vertical velocity
    var maxVerticalVelocity = 5; // max vertical velocity
    var minHorizontalVelocity = -2; // min horizontal velocity
    var maxHorizontalVelocity = 3; // max horizontal velocity

    var minOpacity = 0.1; // min opacity
    var maxOpacity = 0.9; // max opacity
    var maxOpacityIncrement = 60; // opacity increment

    // every flake swings in the interim between next deltas:
    var minHorizontalDelta = 1;
    var maxHorizontalDelta = 4;

    var speed = 2; // speed

    // get random number between x1 and x2
    function getRandom(x1, x2) {
        return Math.random() * (x2 - x1) + x1
    }

    // initialize sprites
    function initializeSprites() {
        var img = new Image();
        img.onload = function () {

            // fill snowflakeSprites with every sprite of sprite.png
            for (var i = 0; i < sprCnt; i++) {
                // create new canvas
                var sprite = document.createElement('canvas');
                sprite.width = sprWidth;
                sprite.height = sprHeight;
                var context = sprite.getContext('2d');

                // and draw every sprite at this canvas
                context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);

                // and fill array
                snowflakeSprites.push(sprite);
            }
        }
        img.src = 'http://nwo.ucoz.ua/demo/ny/sprite.png';
    };

    // initialize snowflakes
    function initialize(number) {
        // initialize sprites
        initializeSprites();

        // prepare a necessary amount of snowflakes
        for (var i = 0; i < number; i++) {
            snowflakes.push(initializeSnowflake());
        }
    };

    // initialize snowflake
    function initializeSnowflake() {
        // get random scale
        var scale = getRandom(minScale, maxScale);

        return {
            x: Math.random() * ctx.canvas.width, // x and
            y: Math.random() * ctx.canvas.height, // y positions
            vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
            hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
            o: getRandom(minOpacity, maxOpacity), // opacity
            oi: Math.random() / maxOpacityIncrement, // opacity increment
            mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
            hd: 0, // horizontal delta
            hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
            sw: scale * sprWidth, // scaled sprite width
            sh: scale * sprHeight, // and height
            si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
        }
    };

    // move flakes
    function moveFlakes() {
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];

            // shift X and Y position
            osf.x += (osf.hd + osf.hv) * speed;
            osf.y += osf.vv * speed;

            // swings             
            osf.hd += osf.hdi;
            if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
                osf.hdi = -osf.hdi;
            };

            // collision with borders
            if (osf.y > ctx.canvas.height + sprHeight / 2) {
                osf.y = 0
            };
            if (osf.y < 0) {
                osf.y = ctx.canvas.height
            };
            if (osf.x > ctx.canvas.width + sprWidth / 2) {
                osf.x = 0
            };
            if (osf.x < 0) {
                osf.x = ctx.canvas.width
            };

            // toggle opacity
            osf.o += osf.oi;
            if (osf.o > maxOpacity || osf.o < minOpacity) {
                osf.oi = -osf.oi
            };
            if (osf.o > maxOpacity)
                osf.o = maxOpacity;
            if (osf.o < minOpacity)
                osf.o = minOpacity;
        }
    }

    // render frame
    function renderFrame() {

        // move (shift) our flakes
        moveFlakes();

        // clear content
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // draw each flake
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];
            ctx.globalAlpha = osf.o;
            ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
        }
    }

    return {
        'initialize': initialize,
        'render': renderFrame,
    }
})();

// main initialization
function initialization() {

    // create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // set canvas size - fullscreen
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    // loop main scene
    setInterval(Snowflakes.render, 40);
    Snowflakes.initialize(100);
}

// window onload event handler
if (window.attachEvent) {
    window.attachEvent('onload', initialization);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            initialization();
        };
        window.onload = newonload;
    } else {
        window.onload = initialization;
    }
} 

Сохраните этот код в файле под названием script.js. Кстати, какой редактор Вы используете? Я ранее уже советовал три крутых редактора для вебмастера. Если сохраните спрайт себе на хостинг, то не забудьте поменять в вышеизложенном коде адрес картинки, который помечен красным, то есть это http://nwo.ucoz.ua/demo/ny/sprite.png.

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

CSS-код

* {
    margin: 0;
    padding: 0;
}
body {
    overflow:hidden;
    background: url("http://nwo.ucoz.ua/demo/ny/christmas_tree1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Сохраняем этот код в файле под названием main.css. Опять таки, если захотите сохранить себе картинку или у вас будет своя - не забудьте поменять адрес изображения!

А теперь нам остается лишь всё это "сложить в одну коробку". Наша страница index.html будет содержать следующий код.

HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Новогоднее поздравление 2016 в HTML5 </title>
        <link rel="stylesheet" href="http://nwo.ucoz.ua/demo/ny/main.css" type="text/css">
        <script src="http://nwo.ucoz.ua/demo/ny/script.js"></script>
    </head>
    <body>
        <canvas height="667" width="1360" id="panel">Сорян, ваш браузер не поддерживает HTML5 ;(</canvas>
    </body>
</html>

Как Вы заметили, файлы index.html, main.css, script.js  должны лежать в одной директории - учтите это. Вот и всё, айда смотреть результат! Кстати, а что у Вас получилось? Кидайте ссылки в комментарии ниже - посмотрим, на что у вас хватит фантазии. 


До новых встреч, йо-хо-хоу
Идея Андрю, автора Script Tutorials

И снова здравствуйте, дорогие читатели IPetrenko.ru
Сегодня я предлагаю вам оценить отличные стили для оформление цитат при помощи css и они вам несомненно понравятся.
Многие блоггеры и вебмастера игнорируют их дизайн, однако оформление цитат blockquote является очень важным в восприятии контента. Я предлагаю универсальный код, который подойдет практически для всех CMS, в том числе WordPress, а также для платформы Blogger.

Стиль оформление цитаты с почтовой совой

blockquote {        
margin : 0 20px;         
padding: 60px 30px 40px 20px;         
background: #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHtar7vnfKHFEjqBQYp9GMeKdkft9zJ2hwJ3fFlhZqmtwpV4dCUB9myZ1aWpMSd6pr9UQDOJylbjnlf9_N4NASYptHQNPZDuqQhqn5xI1tgG1qRtqTZkH7M7uWYHuUANaZHYn4lcWmNqY/s400/owl.png)
 no-repeat 350px 5px;         
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;         
color : #000;         
border-left: 8px dotted #DAB547; 
}     
   
blockquote p {         
margin: 0;         
padding-top:10px;         
} 

Оформление для тега blockquote с зеленными кавычками

blockquote {
font: italic 1em  "comic sans ms", Tahoma, sans-serif;padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xATljhXbhG4ftucGXLORu1QOlaRGOjK_IRYr2GWmpzUBiz4IQqmrB8OqGvNxABwXH0EcCN1sPFuSQiVwP78-7hkrmVjwGRwaLsBpgAHt-V7pRGgTpOE4_Vyj15MUVK-k_HF4iB-tzOo/s400/comma2-left.gif) no-repeat top left;text-indent: 65px;}


blockquote p {
margin: 0;
padding-top:10px;
}

Оформление цитаты в блоге (с темных фоном)

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgpim6QtZ9ED4JJC-lngiT3FAQtbDjYrPYG6e4xCbPkjg0decvxoIIylQrLS55Np_F5ylr8yHpSFWvB9V1NgMzV5IGr9UWyZoroV3fwT7jKVf_viCTTzAfO9B7ZCMMKvZsCD6S8RRJZs/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}


blockquote p {
margin: 0;
padding-top: 10px;
} 

Стиль оформление blockquote с оранжевыми лапками

blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyhTd98ZcHrbBblahQ9LOqsAyJoehIleUNX5ylP4jJWARPfMK1Tk9vWYRFnxblKTACoCXkcCMdKGJSaWTWkmxd5Lcpwxrs1YJgSL1KfCbNeNKIzbNcFcY57bVSP5zj_euP3LCOFBmCt0/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}

blockquote p {
margin: 0;
padding-top:10px;
}

Оформление цитаты с помощью CSS (свойство border)

blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
    
blockquote p {
margin: 0;
padding-top:10px;
}

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

Всем привет! На улице жарко, но по своему и своеобразно "жарит" новый алгоритм Яндекса под названием "Минусинск" (прочитайте, что это за зверь такой). Но я сейчас не об этом.

Изучая данные о том, что интересно посетителям IPetrenko.ru, я выяснил что особой популярностью пользуются материалы о css эффектах при наведении.

Ну что же, мне и самому интересна эта тема поэтому "ловите" новый материал об эффектах для кнопко-подобных ссылок.

 Смотреть демонстрацию всех эффектов на одной странице (клик-клик)

Итак, для начала (вне зависимости от выбранного вами эффекта) нужно использовать следующие строки стиля:

a {
    color: #2098D1;
    text-decoration: none;
}
[class^="hvr-"] {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Редактировать цвета и стили селекторов можете на свое усмотрение. Теперь приступим к самому главному - к эффектам, демонстрацию которых можно посмотреть прямо на ЭТОЙ странице. И это еще не всё - css-эффектов будет не пятнадцать, а ... семнадцать.  

Let is go, dear %username%!

Выделение границ

/* Выделение границ */
.hvr-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
  box-shadow: inset 0 0 0 4px #2098d1, 0 0 1px rgba(0, 0, 0, 0);
}

Ложные границы

/* Ложные границы */
.hvr-hollow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
.hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active {
  background: none;
}

Обделка

/* Обделка */
.hvr-trim {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

}
.hvr-trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before {
  opacity: 1;

}

Читайте также: Иконки социальных сетей с эффектом при наведении 

Пульсация от границ

/* Пульсация от границ */
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-ripple-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

Пульсация к границам

/* Пульсация к границам */
@-webkit-keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
@keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
.hvr-ripple-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-ripple-in:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before {
  -webkit-animation-name: hvr-ripple-in;
  animation-name: hvr-ripple-in;
}

Рамка от границ

/* Рамка от границ */
.hvr-outline-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-outline-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

Рамка к границам

/* Рамка к границам */
.hvr-outline-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-outline-in:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

Закругление углов

/* Закругление углов */
.hvr-round-corners {
  display: inline-block;
  vertical-align: middle;
 -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
}
.hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active {
  border-radius: 1em;
}

Андерлайн слева

/* Андерлайн слева */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение 

Андерлайн с центра

/* Андерлайн с центра */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}

Андерлайн справа

/* Андерлайн справа */
.hvr-underline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before {
  left: 0;
}

Оверлайн слева

/* Оверлайн слева */
.hvr-overline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before {
  right: 0;
}

Оверйлан с центра

/* Оверлайн с центра */
.hvr-overline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;
 position: relative;
  overflow: hidden;
}
.hvr-overline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
  left: 0;
  right: 0;
}

Оверлайн справа

/* Оверлайн справа */
.hvr-overline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-overline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before {
  left: 0;
}

Появление границ

/* Появление границ */
.hvr-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2098d1;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}

Андерлайн снизу

/* Андерлайн снизу */
.hvr-underline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

Верхний оверлайн

/* Верхний оверлайн */
.hvr-overline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-overline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

В конце предлагю вам псомотреть ролик, где офисные ребята с словенского Люблина развлекаються вместе с Гендальфом


Надеюсь этот материал окажеться полезным для вас. Свои вопросы оставляйте в комментариях. До новых встреч.

Автор этих эффектов веб-разработчик из Великобритании - Ян Ланн. Ему отдельное спасибо.

Всем привет

Часто в дизайне сайта есть элементы, которые гарантировано должны умещаться в окно просмотра браузера (по другому -  вюьпорт).

В общем случае для этого используется JavaScript. Проверяем размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.

В спецификации CSS3 есть новые единицы размерности, которые значительно облегчают это задание  - vw и vh.

С их помощью мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh примечательны тем, что 1vw — единица равная 1/100'ой ширины вьюпорта. То есть, если нам нужно чтобы элемент занимал всю ширину вьюпорта пользователя, надо установить width:100vw.

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение

Где это может пригодиться?

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

vw

Единица равна 1% от ширины начального содержащего блока.
Например, если ширина окна просмотра 200мм, размер шрифта элементов h1 будет 16 мм (т.е. (8 × 200 мм) / 100 = 16).

Для элемента применяем такой код:

h1 { font-size: 8vw }

vh

Единица равна 1% от высоты исходного контейнера.
По аналогии, если высота окна просмотра 800мм, размер блока comment будет 240 мм ( т.е. (30 х 800 мм) / 100 = 240)

Для элемента применяем такой код:

.comment { height: 40vh }

Есть еще такие единицы как vmin и vmax. Vmin равна наименьшему значению ‘vw’ или ‘vh’, а vmax наоборот - наибольшему значению ‘vw’ или ‘vh’.


Здесь пример масштабирования изображения (изменения его размеров).  Суть в чем : при изменении размера окна просмотра  синхронно будет изменяться и размер изображения.

Попробуйте изменить ширину вьюпорта и посмотрите, как изменяется изображение. В примере я задал такое значение для элемента img:

img {width: 50vw; height: 50 vh;}

Как вы поняли с примеров выше, я задал ширину и высоту, которые равны 50% от размеров вьюпорта.

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

Заодно поздравляю всех студентов с этим чудом, в частности своих одногруппников
До новых встреч ;)