Скрипт трансформирует введённые текстовые значения в "Прописные" и "Строчные" символы.В CSS3 существует свойство text-transforms которое трансформирует текст.В скрипт добавлены стили линейных градиентов и теней.
Установите скрипт там где хотите видеть
<script>
function ChangeMe(form){
inputStr=form.Input.value;UPPERCASE=inputStr.toUpperCase();
lowercase=inputStr.toLowerCase();
form.Upper.value=UPPERCASE;
form.lower.value=lowercase;
}
</script>
<table class="dstransformtext" border="0">
<tr>
<td>
<form>Введите текст: <input name="Input" type="text">
<br>
<br>
<input name="Convert_Button" value="Трансформировать" onclick="ChangeMe(this.form)" type="button">
<br>
<br>Прописные: <input name="Upper" type="text">
<br>
<br>Строчные: <input name="lower" type="text">
</form>
</td>
</tr>
</table>
<style>
.dstransformtext {
padding:10px;
background:-webkit-gradient(linear,left top,left bottom,
color-stop(rgba(255,255,255,1),0),
color-stop(rgba(246,246,246,1),0.74),
color-stop(rgba(237,237,237,1),1));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.dstransformtext:hover {
background:#fff;
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
</style>
|
