Сегодня предлагаю посмотреть генератор градиентов и градиентных рамок.
Код генератора
<h1 style="clear: both; text-align: justify;"><span style="text-align: left;">Линейный Генератор Градиентов</span></h1><nav> <div class="form-group"> <label>Цвет 1</label><br />
<input autocomplete="off" id="color11" pattern="([#]{1}[A-Fa-f0-9]{6})" type="text" value="#0aaf9d" /><br />
<input autocomplete="off" id="color1" type="color" value="#0aaf9d" /><br />
</div><br />
<div class="form-group"> <label>Цвет 2</label><br />
<input autocomplete="off" id="color22" pattern="([#]{1}[A-Fa-f0-9]{6})" type="text" value="#0454a4" /><br />
<input autocomplete="off" id="color2" type="color" value="#0454a4" /><br />
</div><br />
<h3 style="text-align: left;">Настройка градиента</h3> <div class="form-group"> <input autocomplete="off" checked="checked" name="LeRi" type="radio" value="left" /><i>Left (лево)</i><br />
<input autocomplete="off" name="LeRi" type="radio" value="right" /><i>Right (право)</i><br />
<input autocomplete="off" name="LeRi" type="radio" value="" /><i>None </i></div> <div class="form-group"> <input autocomplete="off" checked="checked" name="ToBo" type="radio" value="top" /><i>Top (верх)</i><br />
<input autocomplete="off" name="ToBo" type="radio" value="bottom" /><i>Bottom (низ)</i><br />
<input autocomplete="off" name="ToBo" type="radio" value="" /><i>None </i><br />
</div> </nav><br />
<br />
<section><br />
<div class="imagegradient"> background-image:linear-gradient(to top left, #0aaf9d 0%, #0454a4 100%);<br />
</div> </section><br />
<hr /> <nav><br />
<h2 style="text-align: left;">Градиентная рамка</h2> <h3 style="text-align: left;">Ширина границ рамки</h3> <input autocomplete="off" id="borderwidth" max="50" type="range" value="10" /><br />
</nav><br />
<section><br />
<div class="bordergradient"> border: 10px solid transparent;<br /><br /><br />
<br />
border-image-source:linear-gradient(to top left, #0aaf9d 0%, #0454a4 100%);<br /><br /><br />
<br />
border-image-slice: 1;<br />
</div> </section><br />
<footer><br />
Created by <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> -<br />
<a href="https://codepen.io/JesGraPa/" target="_blank">More Pens</a><br />
<br /><br /><br />
</footer><br />
<style>
*{
color:#000000;
}
}
input[type="text"]:invalid{
border:1px solid #f00;
}
*{
font-family: 'Arial';
margin: 0;
padding: 0;
box-sizing: border-box;
box-sizing: border-box;
font-weight: 100;
}
nav{
float: left;
width: 30%;
margin-bottom: 40px;
}
section{
width: 50%;
float:right;
}
.form-group{
display: block;
clear: both;
padding-bottom: 10px;
}
i{
width: 90%;
display: inline-block;
}
input[type="color"]{
float: right;
width:25px;
}
input[type="text"]{
float: right;
width:60px;
margin-left: 10px;
margin-top:1px;
}
input[type="radio"]{
width:10%;
}
input[type="range"]{
width: 100%;
}
h1{
text-align: center;
margin: 60px 0;
}
h2{
margin-bottom:10px;
font-size: 20px;
}
h3{
margin-bottom: 20px;
margin-top: 20px;
padding-bottom: 10px;
font-size: 16px;
}
.bordergradient,
.imagegradient{
padding: 20px;
box-shadow:0 5px 20px 0 rgba(0,0,0,0.2);
transition:all 0.3s;
font-family: Arial;
color: #333;
clear:both;
}
.imagegradient{
padding: 80px 20px;
background-image:linear-gradient(to top left, #0aaf9d 0%, #0454a4 100%);
text-shadow:
1px 1px 5px rgba(255,255,255,0.5),
-1px -1px 5px rgba(255,255,255,0.5),
1px -1px 5px rgba(255,255,255,0.5),
-1px 1px 5px rgba(255,255,255,0.5);
}
.bordergradient{
border: 10px solid transparent;
border-image-slice: 1;
border-image-source:linear-gradient(to top left, #0aaf9d 0%, #0454a4 100%);
}
hr{
width: 100%;
display: block;
clear: both;
border: none;
border-bottom: 1px solid #999;
margin-bottom: 60px;
}
footer{
position: relative;
display: block;
clear: both;
text-align: center;
padding-top: 40px;
}
footer a{
text-decoration: none;
}
footer a:hover{
color: #000;
}
</style><br />
<script>
$(document).ready(function() {
//bind text to color
$("input[type=text]").on("change", function(){
$("#color1").val($("#color11").val()) ;
$("#color2").val($("#color22").val()) ;
});
//bind color to text
$("input[type=color]").on("change", function(){
$("#color11").val($("#color1").val()) ;
$("#color22").val($("#color2").val()) ;
});
//create styles
$("input").on("change", function(){
//get values
var borderwidth = $("#borderwidth").val() + "px";
var borderimagesource = "linear-gradient(to "+$("input[name=ToBo]:checked").val()+" "+$("input[name=LeRi]:checked").val()+", " + $("#color1").val()+ " 0%, " + $("#color2").val()+ " 100%)";
//set border gradient css
$("div.bordergradient").css({
"border-width": borderwidth,
"border-image-source": borderimagesource
});
//print border gradient css
$("div.bordergradient").html("\
border: "+ borderwidth + " solid transparent;<br/><br/>\
border-image-source:" + borderimagesource +";<br/><br/>\
border-image-slice: 1;");
//set border gradient bg css
$("div.imagegradient").css({"background-image": borderimagesource});
//print border gradient bg css
$("div.imagegradient").html("background-image: " + borderimagesource);
});
});
</script>
В коде можно поменять текст - выделила красным цветом.
Комментарии со спамом удаляются.