<svg xmlns="http://www.w3.org/2000/svg"
width="920" height="160" viewBox="0 0 230 40">
<text text-anchor="middle" x="115" y="32" font-family="Times New Roman" font-size="35">
Hello, Toster
</text>
</svg>
получается такая картинка:mix-blend-mode: multiply;
Fiddle.fx {
background-image: url( bg1.png ), url( bg2.png );
background-repeat: no-repeat, no-repeat;
background-blend-mode: multiply, normal;
}
Fiddle <g>
.:hover
при наведении мышки пришлось обернуть SVG в <div>
stroke-dasharray
пунктиром. Очень-очень длинным пунктиром, таким, что один штрих захватывает всю окружность. Второй параметр, stroke-dashoffset
, сдвигает этот штрих "из кадра", оставляя видимой нужную его часть – соотв. отображаемому прогрессу.stroke-dasharray,
скруглёные концы через stroke-linecap="round"
, нужную толщину через stroke-width
и цвет через stroke
: <svg width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643">
<path fill="none"
stroke="#596E7A"
stroke-width="10"
stroke-miterlimit="10"
stroke-dasharray="25,25"
stroke-linecap="round"
d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075-8.983,449.372,67.834
c-15.801,113.4,167.532,164.904,318.724,34.547"/>
</svg>
input
(любое изменение) на элементе <input>
и копировать value
input'а в innerHTML
div'а:var src = document.getElementById("in-text"),
dst = document.getElementById("b-out");
src.addEventListener('input', function(){ dst.innerHTML = src.value });
var $el = $('h1');
var s = $el.text().split(/\s+/);
var i, h = {curr:0, prev:0}, parts = [], word, back=[];
while(s.length) {
word = s.shift();
back.push(word);
$el.html( back.join(' '));
h.curr = $el.height();
if( h.curr !== h.prev) {
parts.push([]);
h.prev = h.curr;
}
parts[ parts.length - 1].push(word);
}
parts = parts.map((e,i) => '<span class="row'+i+'">' + e.join(' ') + '</span>');
$el.html(parts.join("\n"));
$('.class').hover(
function() {
var $el = $(this);
$el.addClass('active');
setTimeout(function() {
$el.removeClass('active')
}, 500);
}
);
// выборка всех под-элементов в блоке:
var $el = $('#block_id').children();
// какой-то один случайный из них:
var $random = $el[ Math.floor( Math.random() * $el.length)];
// вставить его куда-то ещё
$("#suda").append( $random);