Доброго времени суток, друзья. На моём блоге сегодня очередной гостевой пост. Каждый из нас, рано или поздно, сталкивается с необходимостью сделать логотип, визитку, объявление, создать презентацию, инфографику или коллаж. Думаю, что сервис Canva Вас заинтересует, и Вы захотите испробовать его в деле.

Региональный специалист сервиса Canva, Роман Лукьяненко, специально для вас, подготовил обзор этого сервиса графического дизайна.

⏬

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

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

 Презентации

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

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

 

Электронные открытки 

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

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

Обработка фотографий 

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

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

Разработчики неустанно работают над сервисом, обновляя и улучшая его. Кстати, для тех, кто не представляет жизни без портативного устройства, у редактора есть бесплатное мобильное приложение, доступно для скачивания в AppleStore и GooglePlay. 

 Присоединяйтесь к команде графического дизайн-редактора Canva!

здесь можно оформить подписку на новости блога

Введите Ваш email

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

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

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

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

А вот так в виде сетки

Такие кнопки будут видны только на главной странице, странице ярлыков и архива.

• Лёгким нажатием на кнопку читатель может перейти в нужный режим просмотра. 
• В коде не предусмотрен скрипт библиотеки jQuery.
• В режиме списка сообщения будут отображаться с автоматической кнопкой читать дальше и миниатюрами, заданного размера.
• В режиме сетки при наведении используем красивый hover-эффект с лёгкой прозрачностью, отображается название поста с количеством комментариев. 

Посмотрите, как это выглядит на тестовом блоге

Демонстрация 

Если появилось желание установить у сея такой переключатель отображения список/сетка, давайте перейдём к установке.

Все изменения и дополнения нужно делать непосредственно во вкладке Тема. Поэтому заранее рекомендую сделать резервную копию шаблона или потренироваться на тестовом блоге. Хотя особо сложного ничего нет.

Идём во вкладку Тема и находим закрывающийся тег </head>. Над ним устанавливаем следующий код

<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
 <script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}

else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
#list-view-button a{text-decoration: none; color: #666;}
.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
.post-grid-view .post-header {display: none;}
.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
.post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-footer a{color: #128EC9;}
.post-grid-view a.comment-bubble {display: none;}
.main-inner .column-center-inner .section {margin: 0px !important;}
.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

#blog-pager {clear:both;}
.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.date-header {display: none;}
h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
h3.post-title:hover {opacity: 1;}
.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}
.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.post-body a {text-decoration: none;}
.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: none;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: &#39;Pacifico&#39;, cursive;z-index: 122;}
a.comment-bubble:before { content: &quot;Комментариев: &quot; url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}
.post-header,.post-footer {display:none;}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

background-color:#efefef; цвет кнопок
Зелёным - иконка сердечка в стилях сетки

Затем нужно найти строку

<b:section class='main' id='main' name='Main' showaddelement='no'>

или

<b:section class='main' id='main' name='Main' showaddelement='yes'>

Над ней вставить следующий код 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Отобразить сеткой</a> <a class='list-view-button' onclick='list_view()'><img src='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Отобразить списком</a></div>

</b:if></b:if>

Зелёным цветом отмечены иконки переключателя

Сейчас находим строку

<data:post.body/>

Обычно таких строк несколько. В моём случае на одном из тестовых блогов было 2 на другом 3. Замените вторую, если два вхождения или вторую и третью, если таковых у вас три, на следующий код

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>     <b:if cond='data:blog.pageType != &quot;item&quot;'>         <div expr:id='&quot;summary&quot; + data:post.id'>             <data:post.body/>         </div>         <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>         <b:if cond='data:post.allowComments'>             <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>                 <data:post.numComments/>             </a>         </b:if>     </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'>     <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'>     <data:post.body/> </b:if>

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

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

Желаю вам удачи.
  

здесь можно оформить подписку на новости блога

Введите Ваш email

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

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

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

Скопируйте весь код целиком и установите в этом редакторе для просмотра результата.

<style>#dialogoverlay{
 display: none;
 opacity: .7;
 position: fixed;
 top: 0px;
 left: 0px;
 background: #000;
 width: 100%;
 z-index: 10;
}
#dialogbox{
 top: -300px;
 position: fixed;
 background: #000;
 width:350px;
 z-index: 10;transition:all 400ms ease-in-out;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
#dialogbox > div{
    background:#FFF;
    margin:8px;
    text-align:center
}
#dialogbox > div > #dialogboxhead{
    background: #666;
    font:18px Arial;
    font-weight:400;
    padding:10px;
    color:#efefef;
}
#dialogbox > div > #dialogboxbody{
    background:#222;
    padding:20px;
    color:#efefef;
    font:14px Arial;
    font-weight:400;
}
#dialogbox > div > #dialogboxfoot{
    background:#222;
    padding:0px;
    text-align:right;
}
#dialogbox > div > #dialogboxfoot button{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#000;
    border:none;
    border-radius:50%;
    height:25px;
    width:25px;
    outline:none;
    color:#fff;
    line-height:25px;
    font:bold 16px Arial;
    text-align:center;
    cursor:pointer;
}
.buttonalert{
    background:#efefef;
    border:1px solid #ddd;
    margin:0 auto;
    padding:5px 18px;
    font:14px Arial;
    font-weight:700;
    color:#333;
    text-align:center;
    display:inline-block;
    border-radius:3px;
    cursor:pointer;
}</style>
<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<div class='buttonalert' onclick="Alert.render('Меня зовут Виктория. Я автор блога шпаргалки блогерши.')">познакомимся</div>
<script type='text/javascript'>
function CustomAlert(){
 this.render = function(dialog){
  var winW = window.innerWidth;
     var winH = window.innerHeight;
  var dialogoverlay = document.getElementById('dialogoverlay');
     var dialogbox = document.getElementById('dialogbox');
  dialogoverlay.style.display = "block";
     dialogoverlay.style.height = winH+"px";
  dialogbox.style.left = (winW/2) - (350 * .5)+"px";
     dialogbox.style.top = "150px";
     dialogbox.style.display = "block";
  document.getElementById('dialogboxhead').innerHTML = "Привет, рада Вас приветствовать";
     document.getElementById('dialogboxbody').innerHTML = dialog;
  document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" title="Close this">&#215;</button>';
 }
 this.ok = function(){
  document.getElementById('dialogbox').style.top = "-300px";
  document.getElementById('dialogoverlay').style.display = "none";
 }
}
var Alert = new CustomAlert();
</script>

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

Создайте отдельную страницу и установите код в режиме HTML, опубликуйте. Это один из вариантов размещения. Можно установить код диалогового окна в гаджет или сообщение блога. В коде всегда легко можно менять нужную информацию или предупреждения.

Если Вы пропустили - диалоговое окно знакомства с посетителями.

Всем добра и до новых встреч. 

здесь можно оформить подписку на новости блога

Введите Ваш email

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

Привет, друзья. Хочу показать вам, как с помощью небольшого кода CSS можно запретить копирование вашего текста в сообщении. Кто заинтересован в вариантах запрета на копирование материала.

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

Дать копировать определённую часть сообщения, а текст отключить.

Посмотрите на тестовой странице примеры

Демонстрация 

Я разрешила пользователям скопировать код и цитату, но не текст. Делается это так. Нужно во вкладке Тема перед строкой ]]></b:skin> установить вот такой малюсенький код, который не даст копировать весь материал страницы.

body { -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !important; user-select: none !important; }

Но, как вы видели в примере часть содержимого разрешено к копированию. В моём случае это цитата и какой - то код. Сделаем так - добавим разрешение для класса blockquote (цитаты) и класса bloknot3 (так у меня оформлены стили для кодов).

Должно получиться следующее

.post blockquote, .bloknot3 { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } body { -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !important; user-select: none !important; }

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

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

А так вполне можете использовать на своих ресурсах.

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

здесь можно оформить подписку на новости блога

Введите Ваш email

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

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

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

код

::-webkit-scrollbar-button {background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px}

::-webkit-scrollbar-track {background-color: #9999FF;box-shadow: 0px 0px 3px #8E8E8E inset;}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;background-color: #CC0000;
box-shadow:0px 1px 1px #fff inset;

background-position:center;
background-repeat:no-repeat;}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}

::-webkit-scrollbar{width:17px;}

Код устанавливается во вкладке Тема над строкой  ]]></b:skin>. 

Вот и все дела. Спасибо за визит и до встречи.  

👇

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

Введите Ваш email

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