город: Тамбов
тел: +7 999 621 90 62
e-mail: moskwin68@mail.ru
( ! ) Deprecated: Функция get_the_author вызвана с аргументом, который <strong>считается устаревшим</strong> с версии 2.1.0. Альтернативы не предусмотрено. in /home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/functions.php on line 5011 Call Stack #TimeMemoryFunctionLocation 10.0001408120{main}( ).../index.php:0 20.0002409736require( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-blog-header.php' ).../index.php:17 30.369265248784require_once( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/template-loader.php' ).../wp-blog-header.php:19 40.373865382272include( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-content/themes/sandbox/single.php' ).../template-loader.php:106 50.393866386288sandbox_post_class( ).../single.php:12 60.393866386720get_the_author( ).../functions.php:298 70.393866386720_deprecated_argument( ).../author-template.php:27 80.393866387040trigger_error ( ).../functions.php:5011 hentry p1 post publish author-%d0%b5%d0%b2%d0%b3%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bc%d0%be%d1%81%d0%ba%d0%b2%d0%b8%d0%bd category-blog tag-css tag-html tag-javascript y2019 m04 d04 h03">

Смена направления градиента по клику

Описание

При клике по кнопке происходит смена направления градиента по часовой стрелке.

HTML

<script src="//code.jquery.com/jquery.min.js"></script>
<button id="direction"></button>
<div id="wrapper"></div>

JQuery

var i = 0;
var arr = [ 'to bottom left', 'to left', 'to top left', 'to top', 'to top right', 'to right', 'to bottom right', 'to bottom'];
$('#direction').click( function() {
 direction = arr[i++ % arr.length];			
 $('#wrapper').css('background', 'linear-gradient(' + direction + ', #be1432, #270b36)');
});

CSS

#wrapper {
background: -webkit-linear-gradient(bottom, #be1432, #270b36);
background: -moz-linear-gradient(bottom, #be1432, #270b36);
background: -o-linear-gradient(bottom, #be1432, #270b36);
background: linear-gradient(to bottom, #be1432, #270b36);
width: 100px;
height: 100px;
}

#direction {
cursor: pointer;
width: 35px;
height: 35px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;  
background-image: url(//xn--90abjbolhs9b.xn--p1ai/wp-content/uploads/2019/04/rotate.png);
background-size: 20px 20px;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
}

https://jsfiddle.net/8vwh25fL/3/