Небольшое вступление
Недавно я писал свою соц сеть и мне приходилось вручную создавать многие плагины, и что бы вы не занимались этим долгим делом я подготовил уже готовые. Естественно если вы уже серьёзный веб-разработчик, то вам я думаю это не нужно. Статья посвещается различным уже готовым кодам, которые сэкономят время для начинающих веб-ваятелей.
Как пришла идея писать сайты? (Краткая предыстория, можете смело проматывать)
Незадолго до создания своего движка, я просто занимался программированием ерундой (всякие реверс-инжиниринги андроид приложений, дизассембилирование и всякое такое). И вот как-то раз скачивая очередной компилятор с сайта, я увидел, что сервис не отвечает на мои запросы. Я поинтересовался у админов и они сказали, что на них проведена DOS-атака. После недолгих поисков причины я понял, что это некая уязвимость, которая позволяет провести DOS-атаку на сайт-блог, с помощью файла wp-trackback.php (обычно такие уязвимости проявляются на Word Press). Используя специальный скрипт злоумышленник может провести DOS-атаку. В результате чего сайт перестанет отвечать на запросы пользователей. Кстати для того, чтобы обезопасить блог от данной атаки необходимо добавить следующие строчки в файл functions.php в папке шаблона блога:
function ft_stop_trackback_dos_attacks(){
global $pagenow;
if ( 'wp-trackback.php' == $pagenow ){
// DoS attack fix.
if ( isset($_POST['charset']) ){
$charset = $_POST['charset'];
if ( strlen($charset) > 50 ) { die; }
}
}
}
add_action('init','ft_stop_trackback_dos_attacks');Затем углубляясь в это всё больше и больше, я понял что могу написать свою cms. Нужно добавить, то что паралельно с этим я давно уже думал о создание своего движка или соц сети, но вот руки всё никак не доходили, а тут вдруг представилась хорошая возможность.
Мой новый сайт должен был стать некой платформой для добавления пользователями статей, новостей, сайтов, плагинов, cms и прочего. Ну вот как-то так я и начал заниматься веб-разработкой. Ну а теперь вернёмся к плагинам.
Уведомление cookie
Первым плагином станет предупреждение посетителя вашего сайта о использование куки. Плагин достаточно простой, но я думаю полезный.
подробнее
<p>
<script>(function(d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter22958884 = new Ya.Metrika({
id: 22958884, //можно воспользоваться этим или завести свой
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
} catch (e) {}
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function() {
n.parentNode.insertBefore(s, n);
};
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else {
f();
}
})(document, window, "yandex_metrika_callbacks");</script>
</p>
<noscript><div><img src="https://mc.yandex.ru/watch/22958884" style="position:absolute; left:-9998px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
<p>
<script>// <![CDATA[
var cnArgs = {
"ajaxurl": "https:\/\/ваш сайт\/wp-admin\/admin-ajax.php",
"hideEffect": "fade",
"onScroll": "no",
"onScrollOffset": "100",
"cookieName": "cookie_notice_accepted",
"cookieValue": "TRUE",
"cookieTime": "2596000000",
"cookiePath": "\/",
"cookieDomain": "",
"redirection": "",
"cache": ""
};
// ]]></script>
<script>! function(o) {
o.fn.setCookieNotice = function(e) {
"yes" === cnArgs.onScroll && o(window).off("scroll", cnHandleScroll);
var c = new Date,
i = new Date,
n = o("#cookie-notice"),
t = this;
if (i.setTime(parseInt(c.getTime()) + 1e3 * parseInt(cnArgs.cookieTime)), e = "accept" === e, document.cookie = cnArgs.cookieName + "=" + e + ";expires=" + i.toGMTString() + ";" + (void 0 !== cnArgs.cookieDomain && "" !== cnArgs.cookieDomain ? "domain=" + cnArgs.cookieDomain + ";" : "") + (void 0 !== cnArgs.cookiePath && "" !== cnArgs.cookiePath ? "path=" + cnArgs.cookiePath + ";" : ""), o.event.trigger({
type: "setCookieNotice",
value: e,
time: c,
expires: i
}), "fade" === cnArgs.hideEffect ? n.fadeOut(300, function() {
t.removeCookieNotice()
}) : "slide" === cnArgs.hideEffect ? n.slideUp(300, function() {
t.removeCookieNotice()
}) : t.removeCookieNotice(), e && "1" === cnArgs.redirection) {
var r = window.location.protocol + "//",
a = window.location.host + "/" + window.location.pathname;
"1" === cnArgs.cache ? (r = r + a.replace("//", "/") + ("" === window.location.search ? "?" : window.location.search + "&") + "cn-reloaded=1" + window.location.hash, window.location.href = r) : (r = r + a.replace("//", "/") + window.location.search + window.location.hash, window.location.reload(!0))
} else;
}, o.fn.removeCookieNotice = function(e) {
o("#cookie-notice").remove(), o("body").removeClass("cookies-not-accepted")
}, o(document).ready(function() {
var e = o("#cookie-notice");
"yes" === cnArgs.onScroll && (cnHandleScroll = function() {
var e = o(this);
e.scrollTop() > parseInt(cnArgs.onScrollOffset) && (e.setCookieNotice("accept"), e.off("scroll", cnHandleScroll))
}), o(document).on("click", ".cn-set-cookie", function(e) {
e.preventDefault(), o(this).setCookieNotice(o(this).data("cookie-set"))
}), -1 === document.cookie.indexOf("cookie_notice_accepted") ? ("yes" === cnArgs.onScroll && o(window).on("scroll", cnHandleScroll), "fade" === cnArgs.hideEffect ? e.fadeIn(300) : "slide" === cnArgs.hideEffect ? e.slideDown(300) : e.show(), o("body").addClass("cookies-not-accepted")) : e.removeCookieNotice()
})
}(jQuery);</script></p><div class="fixed1">
<div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #000;">
<div class="cookie-notice-container" align="center"><span id="cn-notice-text">Мы используем cookie на нашем Сайте.</span> <div class="cookie-notice-container" align="center"><span id="cn-notice-text">Это увеличивает скорость работы сервиса.</span></div><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap" align="center">ПРОДОЛЖИТЬ</a></div></div></div>И css стиль для него
.fixed1{
position:fixed;
right: 20px;
left: 20px;
bottom:8px;
filter:alpha(opacity=50);
-moz-opacity:0.84;
opacity: 0.85;
border-radius: 7px;
z-index:2000;
}
Хостинг для изображения
Я думаю что он подойдет тем кто делает что-то вроде форума. Код так же есть вот здесь.
подробнее
<?php
// Папка для сохранения файла
$path = 'image/'; //Папка для загрузки изображений
$tmp_path = 'time/'; //Временные изображения
$types = array('image/gif', 'image/png', 'image/jpeg');
$size = 1033020;
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!in_array($_FILES['picture']['type'], $types))
die('Неверный тип файла. <a href="?">Попробовать другой?</a>');
if ($_FILES['picture']['size'] > $size)
die('Слишком большой размер файла. <a href="?">Попробовать другой?</a>');
if (!@copy($_FILES['picture']['tmp_name'], $path . $_FILES['picture']['name']))
echo 'Ошибка';
else
echo 'Загрузка удачна <a href="' . $path . $_FILES['picture']['name'] . '">Посмотреть готовое изображение</a> ' ;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Хостинг изображения</h1>
<form method="post" enctype="multipart/form-data">
<input type="file" name="picture">
<input type="submit" value="Загрузить">
</form>
</body>
</html>
Расширенная палитра цветов html
Данный код подойдёт хорошо для админ панели, когда вы будите писать какой-нибудь css или html элемент в своём блоге.
подробнее
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
(function(h,k,j){function r(a){if(h.event&&h.event.contentOverflow!==j)return{x:h.event.offsetX,y:h.event.offsetY};if(a.offsetX!==j&&a.offsetY!==j)return{x:a.offsetX,y:a.offsetY};var b=a.target.parentNode.parentNode;return{x:a.layerX-b.offsetLeft,y:a.layerY-b.offsetTop}}function e(a,b,c){a=k.createElementNS(v,a);for(var d in b)a.setAttribute(d,b[d]);if(Object.prototype.toString.call(c)!="[object Array]")c=[c];b=0;for(d=c[0]&&c.length||0;b<d;b++)a.appendChild(c[b]);return a}function l(a,b,c){var d,
f,g;a=a%360/60;g=c*b;f=g*(1-Math.abs(a%2-1));d=b=c-=g;a=~~a;d+=[g,f,0,0,f,g][a];b+=[f,g,g,f,0,0][a];c+=[0,0,f,g,g,f][a];a=d*255;b*=255;c*=255;return{r:a,g:b,b:c,hex:"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)}}function s(a,b,c){if(a>1||b>1||c>1){a/=255;b/=255;c/=255}var d,f;d=Math.max(a,b,c);f=d-Math.min(a,b,c);return{h:(f==0?null:d==a?(b-c)/f:d==b?(c-a)/f+2:(a-b)/f+4)%6*60,s:f==0?0:f/d,v:d}}function t(a,b,c){return function(d){d=d||h.event;d=r(d);a.h=d.y/b.offsetHeight*360+o;var f=l(a.h,1,
1);c.style.backgroundColor=f.hex;a.callback&&a.callback(f.hex,{h:a.h-o,s:a.s,v:a.v},{r:f.r,g:f.g,b:f.b},j,d)}}function u(a,b){return function(c){c=c||h.event;c=r(c);var d=b.offsetHeight;a.s=c.x/b.offsetWidth;a.v=(d-c.y)/d;d=l(a.h,a.s,a.v);a.callback&&a.callback(d.hex,{h:a.h-o,s:a.s,v:a.v},{r:d.r,g:d.g,b:d.b},c)}}function i(a,b,c){if(!(this instanceof i))return new i(a,b,c);this.callback=c;this.h=0;this.v=this.s=1;this.pickerElement=b;this.slideElement=a;if(p=="SVG"){a.appendChild(m.cloneNode(true));
b.appendChild(n.cloneNode(true))}else{a.innerHTML=m;b.innerHTML=n}if(a.attachEvent){a.attachEvent("onclick",t(this,a,b));b.attachEvent("onclick",u(this,b))}else if(a.addEventListener){a.addEventListener("click",t(this,a,b),false);b.addEventListener("click",u(this,b),false)}}function q(a,b,c,d){a.h=b.h%360;a.s=b.s;a.v=b.v;b=l(a.h,a.s,a.v);var f={y:a.h*a.slideElement.offsetHeight/360,x:0},g=a.pickerElement.offsetHeight;g={x:a.s*a.pickerElement.offsetWidth,y:g-a.v*g};a.pickerElement.style.backgroundColor=
l(a.h,1,1).hex;a.callback&&a.callback(d||b.hex,{h:a.h,s:a.s,v:a.v},c||{r:b.r,g:b.g,b:b.b},g,f)}var p=h.SVGAngle||k.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",n,m,o=15,v="http://www.w3.org/2000/svg";if(p=="SVG"){m=e("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[e("defs",{},e("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[e("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),
e("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),e("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),e("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),e("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),e("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),e("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),e("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),e("stop",{offset:"100%","stop-color":"#FF0000",
"stop-opacity":"1"})])),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]);n=e("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[e("defs",{},[e("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[e("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),e("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),e("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[e("stop",
{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),e("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])}else if(p=="VML"){m='<DIV style="position: relative; width: 100%; height: 100%"><v:rect style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" stroked="f" filled="t"><v:fill type="gradient" method="none" angle="0" color="red" color2="red" colors="8519f fuchsia;.25 #8000ff;24903f #0040ff;.5 aqua;41287f #00ff40;.75 #0bed00;57671f yellow"></v:fill></v:rect></DIV>';
n='<DIV style="position: relative; width: 100%; height: 100%"><v:rect style="position: absolute; left: -1px; top: -1px; width: 101%; height: 101%" stroked="f" filled="t"><v:fill type="gradient" method="none" angle="270" color="#FFFFFF" opacity="100%" color2="#CC9A81" o:opacity2="0%"></v:fill></v:rect><v:rect style="position: absolute; left: 0px; top: 0px; width: 100%; height: 101%" stroked="f" filled="t"><v:fill type="gradient" method="none" angle="0" color="#000000" opacity="100%" color2="#CC9A81" o:opacity2="0%"></v:fill></v:rect></DIV>';
k.namespaces.v||k.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML")}i.prototype.setHsv=function(a){q(this,a)};i.prototype.setRgb=function(a){q(this,s(a.r,a.g,a.b),a)};i.prototype.setHex=function(a){q(this,s(parseInt(a.substr(1,2),16),parseInt(a.substr(3,2),16),parseInt(a.substr(5,2),16)),j,a)};i.positionIndicators=function(a,b,c,d){if(c){b.style.left="auto";b.style.right="0px";b.style.top="0px";a.style.top=c.y-a.offsetHeight/2+"px"}if(d){b.style.top=d.y-b.offsetHeight/2+"px";b.style.left=
d.x-b.offsetWidth/2+"px"}};h.ColorPicker=i})(window,window.document);
</script>
<style>
html {
min-height: 100%
}
body {
min-height: 100%;
margin:0;
padding:0;
font: 15px Tahoma;
color:#555;
}
#top{
width:100%;
background: #222;
text-align:center;
height:35px;
line-height:35px;
}
#top a{color:#00FF00;text-decoration:none;}
.logo{
width:200px;
font: 22px/125% Tahoma;
float:left;
line-height:35px;
}
.logo span{font: 12px/125% Tahoma;}
#color-picker{
margin:25px auto;
width:450px;
}
#color-values{
display:block;
list-style:none;
color:#222;
float:left;
margin:0 0 0 15px;
padding: 5px;
text-align:left;
}
#pcr_bg{
height:135px;
}
.picker-wrapper,
.pcr-wrapper {
position: relative;
float: left;
}
.picker-indicator,
.pcr-indicator {
position: absolute;
left: 0;
top: 0;
}
.picker,
.pcr {
cursor: crosshair;
float: left;
}
.cp-default .picker {
width: 200px;
height: 200px;
}
.cp-default .pcr {
width: 30px;
height: 200px;
}
.cp-default .pcr-wrapper {
margin-left: 10px;
}
.cp-default .picker-indicator {
width: 5px;
height: 5px;
border: 2px solid darkblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50);
background-color: white;
}
.cp-default .pcr-indicator {
width: 100%;
height: 10px;
left: -4px;
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter: alpha(opacity=60);
border: 4px solid lightblue;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: white;
}
.box{
box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
-webkit-box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
-moz-box-shadow:5px -11px 35px 5px rgba(0,0,0,0.42);
}
</style>
</head>
<body>
<div id="top">
<div class="logo"></div>
</a></div>
<br>
<br>
<br>
<center>
<div class="box">
<h1>Палитра штмл</h1>
<div id="color-picker" class="cp-default">
<div class="picker-wrapper">
<div id="picker" class="picker"></div>
<div id="picker-indicator" class="picker-indicator"></div>
</div>
<div class="pcr-wrapper">
<div id="pcr" class="pcr"></div>
<div id="pcr-indicator" class="pcr-indicator"></div>
</div>
<ul id="color-values">
<li><label>RGB:</label><span id="rgb"></span></li>
<li><label>HSV:</label><span id="hsv"></span></li>
<li><label>HTML:</label><span id="hex"></span></li>
<li><div id="pcr_bg"></div></li>
</ul>
</div>
</center>
<script type="text/javascript">
cp = ColorPicker(document.getElementById('pcr'), document.getElementById('picker'),
function(hex, hsv, rgb, mousePicker, mousepcr) {
currentColor = hex;
ColorPicker.positionIndicators(
document.getElementById('pcr-indicator'),
document.getElementById('picker-indicator'),
mousepcr, mousePicker);
document.getElementById('hex').innerHTML = hex;
document.getElementById('rgb').innerHTML = 'rgb(' + rgb.r.toFixed() + ',' + rgb.g.toFixed() + ',' + rgb.b.toFixed() + ')';
document.getElementById('hsv').innerHTML = 'hsv(' + hsv.h.toFixed() + ',' + hsv.s.toFixed(2) + ',' + hsv.v.toFixed(2) + ')';
document.getElementById('pcr_bg').style.backgroundColor = hex;
});
cp.setHex('#D4EDFB');
</script>
</body>
</html>
Готовый css редактор теней на блоках
Принцип работы взят отсюда.Очень полезная вещь для сайта. С ней можно спокойно делать в два раза быстрее многие элементы(блоки для страницы). Выглядит это всё как-то так:
подробнее
A код вот:
<html>
<head>
<style>
.box{
box-shadow: 0px 0px 59px 5px #000000;
background-color:#E0FFFF;
border-radius: 12px;
}
</style>
<style>
h2{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<body>
<h2 align="center">Генератор теней CSS</h2>
<div class="box">
<table class="generator">
<div class="box">
<table class="generator">
<tr>
<td>
<td><input type="range" min="-100" max="100" oninput="boxShadow()" title="смещение влево/вправо"/>
<td rowspan="6">
<style contenteditable>box-shadow: none;</style>
<tr>
<td>
<td><input type="range" min="-100" max="100" oninput="boxShadow()" title="смещение вверх/вниз"/>
<tr>
<td>?
<td><input type="range" max="100" value="0" oninput="boxShadow()" title="размытие"/>
<tr>
<td><span>?</span>
<td><input type="range" min="-100" max="100" value="0" oninput="boxShadow()" title="ширина"/>
<tr>
<td>
<td><input type="color" onchange="boxShadow()" placeholder="цвет, например, #000"/>
<tr>
<td>
<td><label title=" тень будет во внутрь"><input type="checkbox" onclick="boxShadow()"/> inset</label>
</table>
<style>
.generator {
width: 100%;
table-layout: fixed;
border-spacing: 0;
text-align: center;
}
.generator td:nth-child(1) {
width: 1em;
padding-left: 7px;
font-size: 150%;
color: #dad871;
vertical-align: top;
background: red;
}
.generator label {
color: #dad871;
}
.generator tr:nth-child(3) td:nth-child(1) {
text-shadow: #dad871 0 0 5px;
color: rgba(0, 0, 0, 0);
}
.generator tr:nth-child(4) td:nth-child(1) span {
transform: scale(1.5, 1.5);
}
.generator tr:nth-child(5) td:nth-child(1) {
background-image: repeating-radial-gradient(circle closest-side, blue, red, yellow, green 40%, green 150%)
}
.generator tr:nth-child(-n+5) td:nth-child(2) input {
width: 100%;
margin: 0;
padding: 0;
-moz-box-sizing: border-box; box-sizing: border-box;
}
.generator td:nth-child(2) {
width: 160px;
padding-right: 7px;
background: green;
}
.generator tr:nth-child(6) td:nth-child(1), .generator tr:nth-child(6) td:nth-child(2) {
padding-bottom: 7px;
}
.generator tr:nth-child(1) td:nth-child(1), .generator tr:nth-child(1) td:nth-child(2) {
padding-top: 7px;
}
.generator td:nth-child(3) {
vertical-align: middle;
}
.generator [contenteditable] {
display: inline-block;
width: auto;
margin: 0;
padding: 20px;
border: none;
color: #3f0309;
font: 90% normal helvetica, sans-serif;
background: #f1f1f1;
white-space: pre-wrap;
text-align: left;
}
[contenteditable]:focus {
border: none;
background: #f1f1f1;
}
</style>
<script>
function boxShadow() {
document.querySelector('.generator style').innerHTML = '.generator style {\n box-shadow: ' + document.querySelector('.generator tr:nth-child(1) input').value + 'px ' + document.querySelector('.generator tr:nth-child(2) input').value + 'px ' + document.querySelector('.generator tr:nth-child(3) input').value + 'px ' + document.querySelector('.generator tr:nth-child(4) input').value + 'px ' + document.querySelector('.generator tr:nth-child(5) input').value + ';\n}';
if (document.querySelector('.generator tr:nth-child(6) input').checked) {
document.querySelector('.generator style').innerHTML = '.generator style {\n box-shadow: ' + document.querySelector('.generator tr:nth-child(1) input').value + 'px ' + document.querySelector('.generator tr:nth-child(2) input').value + 'px ' + document.querySelector('.generator tr:nth-child(3) input').value + 'px ' + document.querySelector('.generator tr:nth-child(4) input').value + 'px ' + document.querySelector('.generator tr:nth-child(5) input').value + ' inset;\n}';
}
}
</script>
</div>
</body>Красивая страница ошибки 404
Например такая: 
Ребят вы не поверите, но кому-то лень писать эту страницу, поэтому я решил сделать её подстраивающаяся под мобильный дизайн и содержащая svg анимацию. Т.к создавать svg мне лень, то я украл позаимствовал svg из этого сайта. Если вы такие же ленивые как и я, вы можете сделать тоже самое, а именно:
подробнее
1. Зайти на 404 страницу сайта
2. Найти на странице тег iframe (там и будет svg)
Ещё примечательно то что при обновление страницы на этом сайте, svg постоянно меняется.
А, чуть не забыл, вот код:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.sup {
box-shadow: 0px 0px 70px 0px #000000;
border-radius:12px;
}
h3{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
h2{
color:red;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<div class="sup">
<h2 align="center">Небольшая ошибочка!</h2>
<div align="center">
<iframe src="https://s.codepen.io/team/codepen/debug/cc6438add208d13d71bda1e65f6616fb" scrolling="no" ></iframe>
<h3>Страница не найдена!</h3>
<h3>Возможно, она была удалена.</h3>
</div>
</body>Визуальный HTML редактор
Если вам нужно быстро и просто установить HTML редактор, то сервис Ckeditor предлагает много различных скриптов для установки редактора.
У меня получилось так:
подробнее
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.editorHtml{
box-shadow: 0px 0px 59px 5px #000000;
background-color:#DCDCDC;
border-radius: 12px;
}
h2{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
background-color: white;
boder-radius:12px;
}
</style>
<script src="https://cdn.ckeditor.com/4.5.7/full/ckeditor.js"></script>
</head>
<body >
<div class="editorHtml">
<h2 align="center">Редактор текста HTML </h2>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
<div class="h15"></div>
<div class="h15"></div>
</div>
</body>
</html>Форма входа
Я не могу обойти стороной этот шаблон т.к без него список плагинов был бы неполным.
подробнее
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
.krug{
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 5px solid green
}
@import url(https://fonts.googleapis.com/css?family=Vibur);
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family:Terminal;
}
.bo{
box-shadow: 0px 0px 57px 0px #000000;
border-radius:7px;
background:orange;
}
body {
background: ;
}
h1 {
color:#228B22;
text-align: center;
font-family: 'Vibur', cursive;
font-size: 65px;
}
.login-form {
box-shadow: 0px 0px 57px 0px green;
width: 350px;
padding: 40px 30px;
background:gold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 14px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
-moz-transform: translateY(-5%);
-ms-transform: translateY(-51%);
-webkit-transform: translateY(-51%);
transform: translateY(-51%);
}
.form-group {
position: relative;
margin-bottom: 9px;
}
.form-control {
width: 100%;
height: 50px;
border: none;
padding: 5px 7px 5px 15px;
background: #fff;
color: #666;
border: 2px solid #ddd;
-moz-border-radius: 7px;
-webkit-border-radius: 12px;
border-radius: 13px;
}
.form-control:focus, .form-control:focus + .fa {
border-color: #10CE88;
color: #10CE88;
}
.form-group .fa {
position: absolute;
right: 15px;
top: 17px;
color: #999;
}
.log-status.wrong-entry {
-moz-animation: wrong-log 0.3s;
-webkit-animation: wrong-log 0.3s;
animation: wrong-log 0.3s;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
border-color: #ed1c45;
color: #ed1c64;
}
.log-btn {
background: green;
dispaly: inline-block;
width: 100%;
font-size: 20px;
height: 60px;
color: #fff;
text-decoration: none;
border: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.link {
text-decoration: none;
color: black;
float: right;
font-size: 14px;
margin-bottom: 6px;
}
.link:hover {
text-decoration: underline;
color: #8C918g;
}
.alert {
display: none;
font-size: 17px;
color: #f01;
float: left;
}
</style>
<script>
function startTime() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
document.getElementById('time').innerHTML =
hours + ":" + minutes + ":" + seconds;
var t = setTimeout(startTime, 1000);
}
</script>
</head>
<body onload="startTime()">
<div class="login-form">
<div class="krug">
<h1 align="center">MY Site</h1>
</div>
<div class="bo">
<p><h3 align="center">Текущее время:</h3><h3 align="center" id="time"></h3></p></div>
<div class="form-group ">
<input type="text" class="form-control" placeholder="Имя" id="UserName">
<i class="fa fa-user"></i>
</div>
<div class="form-group log-status">
<input type="password" class="form-control" placeholder="Пароль" id="password">
<i class="fa fa-lock"></i>
</div>
<span class="alert">Invalid Credentials</span>
<a class="link" href="#">Забыл свой пароль?</a>
<button type="button" class="log-btn" >Войти</button>
</div>
</body>
</html>Верхнее меню для сайта
Мне кажется, что это не сильно полезный плагин т.к существует кучи сервисов с такими щаблонами, но и учиться писать такие штуки тоже надо.
Пишем его css стиль:
подробнее
li {
list-style-type: none;
}
a {
text-decoration: none;
}
body{
padding: 1.25em;
}
#nav {
width: 60em;
font-family: 'Helwetica', sans-serif;
font-weight: 400;
position: absolute;
top: 27%;
left: 56%;
margin-left: -30em;
}
#nav > a{
display: none;
}
#nav li{
position: relative;
}
#nav li a{
color: #E0FFFF ;
display: block;
}
#nav li a:active {
background-color: #c00 !important;
}
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent;
border-bottom: none;
border-top-color: red;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em;
}
#nav > ul {
height: 3.75em;
background-color: gold;
border-radius:12px;
box-shadow: 0px 28px 52px -22px #ff0000;
}
#nav > ul > li {
width: 23%;
height: 100%;
float: left;
}
#nav > ul > li > a {
height: 107%;
font-size: 1.7em;
line-height: 2em;
text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #cc580d;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
}
#nav li ul {
background-color:red;
box-shadow: 0px 0px 36px 5px #ff6200;
border-radius:12px;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 1.25em;
border-top: 1px solid #e15a1f;
padding: 0.75em;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background-color: #e15af;
}
@media only screen and ( max-width: 70.5em ) {
#nav {
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) {
html {
font-size: 75%;
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em;
height: 3.125em;
text-align: left;
text-indent: -9999px;
position: relative;
}
#nav > a:before, #nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 90%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
display: block;
}
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 10;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.953em;
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 5px solid #cc470d;
}
#nav li ul {
position: static;
padding: 1.29em;
padding-top: 0;
}
}
Далее HTML код:
<body>
<nav id="nav" role="navigation">
<ul class="clearfix">
<li><a href="?home">Home</a></li>
<li>
<a href="#" aria-haspopup="true"><span>Blog</span></a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#" Helvetica="true"><span>Контакты</span></a>
<ul>
<li><a href="#">дедушка</a></li>
<li><a href="#">бабушка</a></li>
<li><a href="#">Папа</a></li>
<li><a href="#">Мама</a></li>
</ul>
</li>
<li>
<a href="#" Helvetica="true"><span>Обо мне</span></a>
<ul>
<li><a href="#">Я хороший</a></li>
<li><a href="#">Красивый</a></li>
<li><a href="#">Добрый</a></li>
<li><a href="#">Скромный</a></li>
</ul>
</li>
</nav>
<script>
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>
</body>
</html>Спасибо за внимание
Ну, вот и всё. Спасибо всем тем кто прочитал статью до конца. Ещё раз повторюсь статья не расчитана на аудиторию профессиональных веб-разработчиков.