| Текущая версия |
Ваш текст |
| Строка 794: |
Строка 794: |
| | </body> | | </body> |
| | </html> | | </html> |
| − | </syntaxhighlight>
| |
| − | Файл '''"bg.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | window.addEventListener("load", program_code, false);
| |
| − | function program_code() {
| |
| − | var canvas = document.getElementById('canvas_bg')[0],
| |
| − | ctx = null,
| |
| − | grad = null,
| |
| − | body = document.getElementsByTagName('body')[0],
| |
| − | color = 255; //изначальный цвет фона сайта
| |
| − |
| |
| − | if (canvas_bg.getContext('2d')) {
| |
| − | ctx = canvas_bg.getContext('2d');
| |
| − | ctx.clearRect(0, 0, 600, 600);
| |
| − | ctx.save();
| |
| − |
| |
| − | // создание радиального градиента
| |
| − | grad = ctx.createRadialGradient(0,0,0,0,0,600);
| |
| − | grad.addColorStop(0, '#DFDFDF');
| |
| − | grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
| |
| − |
| |
| − | // сам фон-градиент
| |
| − | ctx.fillStyle = grad;
| |
| − |
| |
| − | first_time(); //при первом запуске
| |
| − | function first_time() {
| |
| − | var width = window.innerWidth,
| |
| − | height = window.innerHeight,
| |
| − | x = width/2,
| |
| − | y = height/2,
| |
| − | rx = 600 * x / width,
| |
| − | ry = 600 * y / height;
| |
| − |
| |
| − | var xc = ~~(256 * x / width);
| |
| − | var yc = ~~(256 * y / height);
| |
| − |
| |
| − | grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 500); //размер указателя мышки
| |
| − | grad.addColorStop(0, '#478CFB'); //цвет указателя мышки
| |
| − | grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
| |
| − | ctx.fillStyle = grad;
| |
| − | ctx.fillRect(0,0,600,600);
| |
| − | };
| |
| − |
| |
| − | body.onmousemove = function (event) {
| |
| − | var width = window.innerWidth,
| |
| − | height = window.innerHeight,
| |
| − | x = event.clientX,
| |
| − | y = event.clientY,
| |
| − | rx = 600 * x / width,
| |
| − | ry = 600 * y / height;
| |
| − | var xc = ~~(256 * x / width);
| |
| − | var yc = ~~(256 * y / height);
| |
| − |
| |
| − | grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 500); //размер указателя мышки
| |
| − | grad.addColorStop(0, '#478CFB'); //цвет указателя мышки
| |
| − | grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
| |
| − | //ctx.restore();
| |
| − | ctx.fillStyle = grad;
| |
| − | ctx.fillRect(0,0,600,600);
| |
| − | // ctx.save();
| |
| − | };
| |
| − | }
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | Файл '''"style.css"'''
| |
| − | <syntaxhighlight lang="css" line start="1" enclose="div">
| |
| − | h2, h1 {
| |
| − | margin: 10px 0 0 0;
| |
| − | color: #fff;
| |
| − | text-shadow: 1px 1px 1px black, 0 0 0.1em blue;;
| |
| − | }
| |
| − | .button {
| |
| − | font-size: 18px;
| |
| − | font-weight: 700;
| |
| − | color: white;
| |
| − | text-decoration: none;
| |
| − | padding: .4em 1em calc(.4em + 3px);
| |
| − | border-radius: 3px;
| |
| − | background: rgb(64,199,129);
| |
| − | box-shadow: 0 -3px rgb(53,167,110) inset;
| |
| − | transition: 0.2s;
| |
| − | }
| |
| − | .button:hover { background: rgb(53, 167, 110); }
| |
| − | .button:active {
| |
| − | background: rgb(33,147,90);
| |
| − | box-shadow: 0 3px rgb(33,147,90) inset;
| |
| − | }
| |
| − | a.button28 {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | font-size: 90%;
| |
| − | font-weight: 700;
| |
| − | color: rgb(209,209,217);
| |
| − | text-decoration: none;
| |
| − | text-shadow: 0 -1px 2px rgba(0,0,0,.2);
| |
| − | padding: .5em 1em;
| |
| − | outline: none;
| |
| − | border-radius: 3px;
| |
| − | background: linear-gradient(rgb(110,112,120), rgb(81,81,86)) rgb(110,112,120);
| |
| − | box-shadow:
| |
| − | 0 1px rgba(255,255,255,.2) inset,
| |
| − | 0 3px 5px rgba(0,1,6,.5),
| |
| − | 0 0 1px 1px rgba(0,1,6,.2);
| |
| − | transition: .2s ease-in-out;
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | a.button28:hover:not(:active) {
| |
| − | background: linear-gradient(rgb(126,126,134), rgb(70,71,76)) rgb(126,126,134);
| |
| − | }
| |
| − | a.button28:active {
| |
| − | top: 1px;
| |
| − | background: linear-gradient(rgb(76,77,82), rgb(56,57,62)) rgb(76,77,82);
| |
| − | box-shadow:
| |
| − | 0 0 1px rgba(0,0,0,.5) inset,
| |
| − | 0 2px 3px rgba(0,0,0,.5) inset,
| |
| − | 0 1px 1px rgba(255,255,255,.1);
| |
| − | }
| |
| − | input[type="number"] {
| |
| − | border: 1px solid black;
| |
| − | border-radius: 5px;
| |
| − |
| |
| − | color: #000000;
| |
| − | padding: 3px;
| |
| − | margin-top: 2px;
| |
| − | margin-bottom: 2px;
| |
| − | font-size: 16px;
| |
| − | font-family: Verdana;
| |
| − | background: #FFF;
| |
| − | width: 70px;
| |
| − | }
| |
| − | input[type="number"]:focus {
| |
| − | color: #000000;
| |
| − | border: 1px solid #000000
| |
| − | }
| |
| − | canvas.canvas_bg {
| |
| − | position: absolute; /* позиционирование */
| |
| − | top: 0; /* фиксируем */
| |
| − | left: 0; /* фиксируем */
| |
| − | height: 100%; /* делаем фон резиновым */
| |
| − | width: 100%; /* делаем фон резиновым */
| |
| − | }
| |
| − |
| |
| − |
| |
| − | div.main {
| |
| − | position: absolute;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | /*width:100%;
| |
| − | height:100%;*/
| |
| − | }
| |
| − | sub + sup {
| |
| − | margin-left: -0.4em;
| |
| − | }
| |
| − |
| |
| − | /*Таблица*/
| |
| − | table {
| |
| − | border-spacing: 0;
| |
| − | text-align: center;
| |
| − | border-top-right-radius: 10px;
| |
| − | border-top-left-radius: 10px;
| |
| − | }
| |
| − | th {
| |
| − | background: rgba(101, 11, 95, 0.86);
| |
| − | color: white;
| |
| − | text-shadow: 0 1px 1px #2D2020;
| |
| − | padding: 0px;
| |
| − | }
| |
| − | th, td {
| |
| − | colspan: 5;
| |
| − | border-style: solid;
| |
| − | border-width: 0 1px 1px 0;
| |
| − | border-color: white;
| |
| − | }
| |
| − | th:first-child, td:first-child {
| |
| − | text-align: center;
| |
| − | }
| |
| − | th:first-child {
| |
| − | }
| |
| − | th:last-child {
| |
| − |
| |
| − | border-right: none;
| |
| − | }
| |
| − | td {
| |
| − | padding: 1px 2px;
| |
| − | background: #ecfc95;
| |
| − | }
| |
| − | tr:last-child td:first-child {
| |
| − | border-radius: 0 0 0 10px;
| |
| − | }
| |
| − | tr:last-child td:last-child {
| |
| − | border-radius: 0 0 10px 0;
| |
| − | }
| |
| − | tr td:last-child {
| |
| − | border-right: none;
| |
| − | }
| |
| − | p{
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | .follow {
| |
| − | margin-left: 150px;
| |
| − | }
| |
| | </syntaxhighlight> | | </syntaxhighlight> |
| | </div> | | </div> |
| Строка 1001: |
Строка 799: |
| | | | |
| | | | |
| − | Совместный проект студентов [[Дрепин_Михаил|Дрепина Михаила]] и [[Калинин_Илья|Калинина Ильи]] | + | Совместный проект студентов [[Дрепин_Михаил|Дрепина Михаила]] и [[Калинин_Илья|Калинина Илья]] |
| | [[Category: Виртуальная лаборатория]] | | [[Category: Виртуальная лаборатория]] |
| | [[Category: Программирование]] | | [[Category: Программирование]] |
| | [[Category: JavaScript]] | | [[Category: JavaScript]] |
