Всем, доброго времени суток. Очень красивые эффекты трехмерного (3D) текста на CSS. Такие часто используются в современных оформлениях и дизайне веб страниц. Простые и лёгкие в установке. Сегодня вам предлагаю из множества подобных 3 варианта. Сложного ничего нет, а смотрятся очень даже стильно.

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

Вариант 1. Просто 3D текст с эффектом подъёма.

<div class="text3d-wrap-1">

    <span class="text3d-1">это красивый 3d текст</span>

</div>

<style>

.text3d-wrap-1 {    

    margin: 0;

    padding: 0;

    background-color:#8B0000;

    position: relative;

    width: 100%;

    height: 260px;

    display: flex;

    flex-direction: row;

    justify-content: center;

    perspective: 3000px;    

}    

.text3d-1 {

    align-self: center;

    margin-top: -18px;

    transition: all 0.3s ease;

    transform: rotateX(40deg) rotateZ(5deg);

    font-family: Impact, Charcoal, sans-serif;

    font-size: 100px;

    letter-spacing: 3px;

    color: #f5f5f5;

    text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px, #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px, #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px, #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px, #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px, rgba(16, 16, 16, 0.4) 1px 18px 6px, rgba(16, 16, 16, 0.2) 1px 22px 10px, rgba(16, 16, 16, 0.2) 1px 26px 35px, rgba(16, 16, 16, 0.4) 1px 30px 65px;

}

.text3d-wrap-1:hover .text3d-1{

    margin-top: -26px;

    text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px, #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px, #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px, #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px, #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px, rgba(16, 16, 16, 0.4) 1px 38px 26px, rgba(16, 16, 16, 0.2) 1px 42px 30px, rgba(16, 16, 16, 0.2) 1px 46px 65px, rgba(16, 16, 16, 0.4) 1px 50px 95px;

}

@media (max-width:767px) {

    .text3d-1 {

        font-size: 60px;

    }

}

</style>

Вариант 2. Текст с красивой тенью и эффектом подъёма при наведении

<div class="text3d-wrap-3">

    <span class="text3d-3">3D текст</span>

</div>

<style>.text3d-wrap-3 {

    margin: 0;

    padding: 0;

    background-color: #D2691E;

    position: relative;

    width: 100%;

    height: 260px;

    display: flex;

    flex-direction: row;

    justify-content: center;

}

.text3d-3 {

    margin-top: -12px;

    align-self: center;

    transform: perspective(300px) rotateX(15deg) scaleY(0.8);

    transition: all 0.5s;

    font-family: Impact, Charcoal, sans-serif;

    font-size: 90px;

    letter-spacing: 3px;

    color: #FFF;

    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 10px 0 #BFE2FF;

}

.text3d-wrap-3:hover .text3d-3 {

    transform: perspective(1000px) rotateX(15deg) scale(1.07);

    text-shadow: 0 0 10px black, 0 2px 0 #BFE2FF;

}

@media (max-width:767px) {

    .text3d-3 {

        font-size: 60px;

    }

}

</style>

Вариант 3. Текст при наведении курсора раскачивается. 

Уникальность задают трансформация и анимация текста.  

<div class="text3d-wrap-3">

    <div class="text3d-3">

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-23"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

        <div class="text3d-layer-3"></div>

    </div>

</div>

<style>

.text3d-wrap-3 {    

    background-color: #337AB7;  

    height: 260px;

    overflow: hidden;

} 

.text3d-3 {

    margin: 0;

    padding: 0;

    position: relative;

    width: 100%;

    height: 160px;

    perspective: 2000px;

    transform-style: preserve-3d;  

}

.text3d-layer-3 {

    width: 100%;

    height: 100%;

    position: absolute;

    transform-style: preserve-3d;

    transform: rotateY(20deg) rotateX(35deg) translateZ(0);

    animation: text3d-anim-2 2s infinite alternate linear;

    animation-fill-mode: forwards;  

    animation-play-state: paused;

}

.text3d-layer-3:after {

    font-family: Impact, Charcoal, sans-serif;

    font-size: 100px;

    content: '3D текст';

    letter-spacing: 2px;

    text-align: center;

    height: 100%;

    width: 100%;

    position: absolute;

    top: 58px;

    color: #FFF;

    text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);

}

.text3d-layer-3:nth-child(1):after {

    transform: translateZ(0px);

}

.text3d-layer-3:nth-child(2):after {

    transform: translateZ(-1.5px);

}

.text3d-layer-3:nth-child(3):after {

    transform: translateZ(-3px);

}

.text3d-layer-2:nth-child(4):after {

    transform: translateZ(-4.5px);

}

.text3d-layer-3:nth-child(5):after {

    transform: translateZ(-6px);

}

.text3d-layer-3:nth-child(6):after {

    transform: translateZ(-7.5px);

}

.text3d-layer-3:nth-child(7):after {

    transform: translateZ(-9px);

}

.text3d-layer-3:nth-child(8):after {

    transform: translateZ(-10.5px);

}

.text3d-layer-3:nth-child(9):after {

    transform: translateZ(-12px);

}

.text3d-layer-3:nth-child(10):after {

    transform: translateZ(-13.5px);

}

.text3d-layer-3:nth-child(11):after {

    transform: translateZ(-15px);

}

.text3d-layer-3:nth-child(12):after {

    transform: translateZ(-16.5px);

}

.text3d-layer-3:nth-child(13):after {

    transform: translateZ(-18px);

}

.text3d-layer-3:nth-child(14):after {

    transform: translateZ(-19.5px);

}

.text3d-layer-3:nth-child(15):after {

    transform: translateZ(-21px);

}

.text3d-layer-3:nth-child(16):after {

    transform: translateZ(-22.5px);

}

.text3d-layer-3:nth-child(17):after {

    transform: translateZ(-24px);

}

.text3d-layer-3:nth-child(18):after {

    transform: translateZ(-25.5px);

}

.text3d-layer-2:nth-child(19):after {

    transform: translateZ(-27px);

}

.text3d-layer-3:nth-child(20):after {

    transform: translateZ(-28.5px);

}

.text3d-layer-3:nth-child(n+10):after {

    -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);

}

.text3d-layer-3:nth-child(n+11):after {

    -webkit-text-stroke: 15px #BFE2FF;

    text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;

}

.text3d-layer-3:nth-child(n+12):after {

    -webkit-text-stroke: 15px #68baff;

}

.text3d-layer-3:last-child:after {

    -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);

}

.text3d-layer-3:first-child:after {

    color: #fff;

    text-shadow: none;

}

.text3d-wrap-3:hover .text3d-layer-3 {

    animation-play-state: running;

}

@media (max-width:767px) {

    .text3d-3 .text3d-layer-3:after{

        font-size: 60px;

    }

}

@keyframes text3d-anim-3 {

    0 {

        transform: rotateY(20deg) rotateX(35deg) translateZ(0);

    }

    50% {

        transform: rotateY(0) rotateX(-20deg) translateZ(0);

    }

    100% {

        transform: rotateY(-20deg) rotateX(35deg) translateZ(0);

    }

}

</style>

Во всех кодах вы можете убрать или изменить цвет фона - background-color, размер самого текста  - font-size:, размер тени - text-shadow, цвет тени и другие свойства стилей. 

Применить можно на любой странице в сообщение, перейдя в формат HTML. Или вставить в гаджет HTML/JavaScript и расположить в макете, где - нибудь над сообщениями или под шапкой блога. Допустим, даже в качестве поздравления для грядущих праздников. 

Сегодня всё. До встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email

Подробнее...

 Уважаемые читатели и друзья. Представляю вашему вниманию стильный и развёрнутый блок профиля автора блога. Конечно, можно просто изменить уже готовый блоггеровский стиль гаджета об авторе блога. Можно сделать стильную карточку профиля в блоге. Но вариант, о котором пойдёт сегодня речь, более интересен и более содержателен. 

Его даже можно разместить на странице "Об авторе" которая непременно должна быть на каждом сайте. Ведь авторские страницы создают доверие у посетителей к вашему сайту.

Из достоинств такого авторского блога, помимо информации

1. Код на содержит файл JQuery и работает без кода JavaScript
2. Лёгкая установка
3. Быстрая загрузка
4. Работает на любом браузере.

 

Посмотрите на этой странице пример такого авторского блока.

Если решите установить блок автора на страницу, приступаем.

Сначала скопируйте приведённый ниже код в черновик или блокнот и разберёмся с настройками.

<style type="text/css">

#authorBox {width:760px;margin:0 auto;padding:20px;display:table;background-color:#fafafa;border-bottom:4px solid #75C3B7;font-family:sans-serif;}

#authorBox h2.widgetTitle{font-size:16px;padding:10px 0 0 0;color:#57BCAC;display:block;margin:0;text-align:center;}

#authorBox .authorInfo_widget{float:left;width:260px;padding:30px;text-align:center;}

#authorBox .authorInfo_widget .profilePhoto{text-align:center;}

#authorBox .authorInfo_widget .profilePhoto img {width:160px;min-height:160px;object-fit:cover;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;background:#FFF;padding:5px;border:2px inset #e8e8e8;}

#authorBox .authorInfo_widget .profileDataBlock h3{color:#75c3b7;font-weight:normal;font-size:20px;margin:10px 0 0 0;}

#authorBox .authorInfo_widget .profileDataBlock h3 a{color:#75c3b7;text-decoration:none;}

#authorBox .authorInfo_widget .profileDataBlock p{font-size:14px;}

#authorBox .authorInfo_widget .profileDataBlock img{width:200px;}

#authorBox .authorDetail_widget{float:left;width:420px;}

#authorBox .authorDetail_widget .widgetContent{margin:10px;background-color:#FFFFFF;webkit-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-moz-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-o-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);}

#authorBox .authorDetail_widget .widgetContent p {padding:10px;font-size:14px;text-align:center;margin:0;}

/*--------социальные сети ------*/

#authorBox .authorDetail_widget .socialsharing{height:60px;text-align:center;}

#authorBox .authorDetail_widget .socialsharing a {display:inline-block;height:50px;width:50px;padding:0 5px;background:transparent url(https://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;-o-transition:ease-in 0.2s all;-ms-transition:ease-in 0.2s all;transition:ease-in 0.2s all;cursor:pointer;}

#authorBox .authorDetail_widget .socialsharing a.twitter {background-position:0px -290px;}

#authorBox .authorDetail_widget .socialsharing a.twitter:hover {background-position:0px -232px;}

#authorBox .authorDetail_widget .socialsharing a.facebook {background-position:0px -406px;}

#authorBox .authorDetail_widget .socialsharing a.facebook:hover {background-position:0px -348px;}

#authorBox .authorDetail_widget .socialsharing a.rss {background-position:0px -174px;}

#authorBox .authorDetail_widget .socialsharing a.rss:hover {background-position:0px -116px;}

</style>

<div id="authorBox">

<div class="authorInfo_widget">

<h2 class="widgetTitle">Привет, это я...!!!</h2>

<div class="profilePhoto">

<img alt="Вика Барад" title="Вика Барад" src="https://lh3.googleusercontent.com/ogw/ADGmqu__EDi1uSTcIBbRzsW0jocY-xG8rTqFA6x4ma-YhA=s83-c-mo">

</div>

<div class="profileDataBlock">

<h3><a href="######" title="Вика Барад">Виктория Барад</a></h3>

<p>Я проживаю там где горы, на самой границе Европы и Азии</p>

<img alt="Вика Барад" title="Вика Барад" src="https://1.bp.blogspot.com/-V46TIqCJWXY/V4NDPQdKw2I/AAAAAAAAE18/71fLZqll5EYPfW0rObGYLVvoEgs4uHQZACKgB/s200/%25D0%25BF%25D0%25BE%25D0%25B4%25D0%25BF%25D0%25B8%25D1%2581%25D1%258C.png" >

</div>

</div>

<div class="authorDetail_widget" >

<div class="widgetContent">

<h2 class="widgetTitle">Давайте знакомиться</h2>

<p>Уже​ ​много ​​лет​ ​я​ ​использую платформу​ ​Blogger.​ ​Имею​ ​опыт​ п​о​ ​настройке,​ ​дизайну,​ в​едению и​ ​ ​оптимизации​ ​блога.​

О​ ​чём ​​подробно​ ​делюсь​ ​в​ ​своих публикациях

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

А​ ​почему​ ​я ​​об​ ​этом​ ​пишу?​ ​Да​ ​только​ ​потому, ​​что​ ​несколько​ ​лет​ ​назад​ ​я приняла​ ​решение,​ ​что​ ​мне​ ​нужен​ ​свой​ ​блог.​ 

Перебрала​ массу​ ​бесплатных платформ​ ​пока​ ​не​ ​пришло​ ​полное​ ​понимание,​ ч​то​ ​платформа​ ​ ​Blogger​ с​амая подходящая​ ​для​ ​этого.​

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

Сейчас у меня несколько блогов и очень много друзей и подписчиков. Присоединяйтесь и вы, будем общаться, дружить. Блог ​​—​ ​это​ ​крутой​ ​личный​ ​блокнот,​ ​который​ ч​итают ​​другие​ ​люди.​ ​Именно наличие​ ч​итающей​ ​и​ о​бсуждающей​ а​вторские​ ​мысли​ ​аудитории​ ​приносит ни ​​с​ ​чем​ ​не​ ​сравнимое​ у​довольствие. 

</p>

</div>

<div class="widgetContent">

<h2 class="widgetTitle">мой блог и странички в социальных сетях</h2>

<div class="socialsharing">

<a class="rss" href="http://www.shpargalochki.ru/" rel="external nofollow" target="_blank"></a>

<a class="facebook" href="https://www.facebook.com/viktoria.barad " target="_blank"></a>

<a class="twitter" href="https://twitter.com/VikserV" rel="external nofollow" target="_blank"></a>

</div>

</div>

<div style="clear:both:"></div>

</div>

</div>

Настройки авторского профиля

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

2. В строке жёлтого цвета можно дать ссылку на ваш профиль Блоггер..

3. Розовый цвет, это подпись ваша. В принципе её можно убрать или вставить что - то ещё. Я же применила картинку подпись и вставила её URL. Как её сделать прочитайте в этой статье. 

4. Синий цвет  -  адреса ваших страничек в социальных сетях. Можно дать ссылку на подписку RSS или на главную страницу. 

5. Все текстовые поля заполняйте своим содержанием. 

С цветом тоже можно поиграться. Меняйте все свойства background, background-color на желаемые.

Готовый код устанавливаем на нужную страницу, перейдя в формат HTML.

Всё просто, а в итоге имеем полностраничный стильный блок об авторе. 

Если возникнут вопросы, пишите в комментариях, разберёмся. Если понравился пост, буду благодарна если вы поделитесь им с друзьями в социальных сетях. 

Добра всем и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email

Подробнее...

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

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

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

При вставке изображения, если мы перейдём в режим HTML увидим , что ссылка состоит из двух ссылок. Извините за масло масляное. Ну вот так она выглядит (показываю на примере первой картинки)

Сам код такой 

<a href="https://1.bp.blogspot.com/-hkse5CgJuAk/X7PUYXxcytI/AAAAAAAAOVk/bgb_fH_po9Mt-bZDOmVDELMVuf2mQNC5wCLcBGAsYHQ/s369/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B8.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="196" data-original-width="369" src="https://1.bp.blogspot.com/-hkse5CgJuAk/X7PUYXxcytI/AAAAAAAAOVk/bgb_fH_po9Mt-bZDOmVDELMVuf2mQNC5wCLcBGAsYHQ/s16000/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B8.jpg" /></a>

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

В самом начале мы просто нажимали на соответствующую иконку в редакторе.

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

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

Если вы вставляете изображение в блог, нажмите на него левой кнопкой и обратите внимание на отмеченные красным иконки в панели редактора. А именно на подчёркнутый текст. Смотрим скриншот

Вообще не совсем понятна эта функция для картинки. Так вот там и оказалась зарыта эта опция - убрать ссылку. 

Но чтобы ей воспользоваться нужно щёлкать на картинку. Потом рядом с ней на пустое поле около неё, потом на иконку подчёркнутый текст. Появляется строка с перечёркнутой иконкой ссылки. Жмём на неё и вуаля. Лишний ссылки нет. 

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

P. S. Моя коллега по блоговедению Ольга Протасова, обратила внимание, что не сохраняется гаджет страницы в макете блога. У неё же перестала работать форма связи. А мне через форму связи просто спам пачками приходит. Не успеваю удалять. И ещё при оформлении ссылки в тексте, окно трясётся "в судорогах", еле успеваешь поймать строку. Как у Вас?

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email

Подробнее...

Привет, друзья. Хочу поделиться с вами как сделать ваши веб-сайты в настольные приложения Chrome.  Это поможет более разумно организовать рабочее место и даст быстрый доступ к любому нужному вам ресурсу. Не знаю как в других, но с помощью браузера Chrome это сейчас достаточно просто реализовать. 

Пост подкорректирован и обновлён. Буквально на днях два моих читателя задавали этот вопрос. Всего несколько несложных шагов. Может ещё кому пригодится.

В правом верхнем углу браузера Хром открываем меню и выбираем опцию Дополнительные инструменты. Из открывшегося списка нам нужна строка Добавить на рабочий стол. 

Я покажу на примере почты Gmail. Можно вывести любой продукт Гугл, тот же Блоггер. Тогда в панель инструментов будет просто зайти сразу по иконке с рабочего стола.

В поле вводим нужное название и поставим галочку Открыть в отдельном окне. Добавить.

Вернитесь к рабочему столу и вы увидите иконку вновь созданного приложения. Его обычным способом можно закрепить на панели задач для быстрого доступа к нему. Можно таким же образом сделать веб-приложение из любого другого нужного вам сайта. Очень удобно и советую вам попробовать. Такое приложение прекрасный помощник для владельцев планшетов под управлением Windows.
.
Спасибо всем за визит и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email

Подробнее...

Доброго времени суток, друзья. Этот эффект увеличительного стекла для картинок в блоге, который вам сегодня предложу, впишется в любой дизайн. Изображение будет увеличиваться при наведении курсора мыши. Сам эффект масштабирования будет плавным. Можно добавить неограниченное количество изображений на веб-страницу. Перемещение курсора от изображения мягко гасит увеличительное стекло, возвращая изображение в состояние по умолчанию.

Я очень много тестировала подобных эффектов, но все они в Блоггере отказывались работать. Вот не так давно нашла руководство по его созданию здесь, чем и делюсь сегодня с вами. 

Для просмотра результата в работе, как всегда, скопируйте код и установите его в этом редакторе. Ещё рабочий вариант на тестовом блоге в самом низу сайдбара. 

Код

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js"></script><script type="text/javascript">

$(function() {

var native_width = 0;

var native_height = 0;

var mouse = {x: 0, y: 0};

var magnify;

var cur_img;

var ui = {

magniflier: $('.magniflier')

};

if (ui.magniflier.length) {

var div = document.createElement('div');

div.setAttribute('class', 'glass');

ui.glass = $(div);

$('body').append(div);

}

var mouseMove = function(e) {

var $el = $(this);

var magnify_offset = cur_img.offset();

mouse.x = e.pageX - magnify_offset.left;

mouse.y = e.pageY - magnify_offset.top;

if (

mouse.x < cur_img.width() &&

mouse.y < cur_img.height() &&

mouse.x > 0 &&

mouse.y > 0

) {

magnify(e);

}

else {

ui.glass.fadeOut(100);

}

return;

};

var magnify = function(e) {

var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;

var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;

var bg_pos = rx + "px " + ry + "px";

var glass_left = e.pageX - ui.glass.width() / 2;

var glass_top = e.pageY - ui.glass.height() / 2;

ui.glass.css({

left: glass_left,

top: glass_top,

backgroundPosition: bg_pos

});

return;

};

$('.magniflier').on('mousemove', function() {

ui.glass.fadeIn(100);

cur_img = $(this);

var large_img_loaded = cur_img.data('large-img-loaded');

var src = cur_img.data('large') || cur_img.attr('src');

// cur_img.data('large-img-loaded', true)

if (src) {

ui.glass.css({

'background-image': 'url(' + src + ')',

'background-repeat': 'no-repeat'

});

}

//if(!native_width && !native_height) {

if (!cur_img.data('native_width')) {

var image_object = new Image();

image_object.onload = function() {

native_width = image_object.width;

native_height = image_object.height;

cur_img.data('native_width', native_width);

cur_img.data('native_height', native_height);

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

};

image_object.src = src;

return;

} else {

native_width = cur_img.data('native_width');

native_height = cur_img.data('native_height');

}

//}

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

});

ui.glass.on('mouseout', function() {

ui.glass.off('mousemove', mouseMove);

});

});

</script>

<style type="text/css">

.glass {

width: 170px;

height: 170px;

position: absolute;

border-radius: 50%;

cursor: crosshair;

box-shadow:

0 0 0 7px rgba(255, 255, 255, 0.85),

0 0 7px 7px rgba(0, 0, 0, 0.25),

inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

display: none;

}

.magnifying {

margin: 50px auto;

text-align: center;

padding: 20px;

border: none!important;

}

</style>

<div class="magnifying">

<img class="magniflier" src="https://1.bp.blogspot.com/-X9uDmnYMyR8/X6P73yoNKrI/AAAAAAAAOUE/AUzYaPQBDSgf6lYj0bCwpGdixNLig6shwCLcBGAsYHQ/s16000/%25D0%25BC%25D0%25BE%25D0%25BD%25D1%2580%25D0%25BE.jpg" width="160" />

</div>

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

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

Просто добавляйте новые классы div с другими адресами. 

На тестовом блоге, ссылка на который выше,  всё прекрасно разместилось в гаджете HTML/JavaScript. Так что,  в сообщениях блога такой вариант прекрасно устроится. Переходите в формат HTML в редакторе создания поста, в нужных местах пропишите 1 или несколько div ов с адресами картинок. А в конце сообщения, там же вставьте всю первую часть кода - JQuery, JavaScript и CSS3.

Собственно и ни каких хлопот, Нужны лишь адреса ваших изображений. Я пробовала очень много картинок - групповые фотографии, фото где не совсем видны мелкие детали. Реально получается просмотреть всё в увеличенном виде. Попробуйте.

Возможно вас заинтересует

Эффект увеличения миниатюр в блоге

Эффект света фонарика

На этом всё, спасибо вам за визит и до встречи.

 Получайте новые статьи прямо на почту

Введите Ваш email

Подробнее...