- صفحه اصلي قالب گراف
- انجمن
- آپلود سنتر
- تبليغات
- ورود
- عضويت
- خوراک
- نقشه
- تماس با ما
- ارسال پيام به مدير در انجمن ghalebgraph@gmail.com\09394943902
با عرض سلام خدمت تمامی کاربران سیب گراف عزیز
امروز یک عدد قالب عضویت رو برای شما دوستان و کاربران عزیز آپلود کردم که قابل استفاده در تمامی سیستم های وبلاگدهی می بشه
نکات در مورد قالب :
1) تمامی قالب رو خودم برای اولین کارم طراحی کردم
2) قالب 100% اختصاصی می باشد و مخصوص کاربران قالب گراف و س.گ می باشد
3) روی گزینه میخوام عضو شم در انواع نقاط کلیک کنید مثلا یک بار وسطش - بار دیگه کنار هاش چیز جالبی براتون گذاشتم
خب دیگه دمو کد هم اینجاست
دمــــــــــو
کد با لینک مستقیم از سایت رز آپ:
اینجا کلیک کنید
امروز یک عدد قالب عضویت رو برای شما دوستان و کاربران عزیز آپلود کردم که قابل استفاده در تمامی سیستم های وبلاگدهی می بشه
نکات در مورد قالب :
1) تمامی قالب رو خودم برای اولین کارم طراحی کردم
2) قالب 100% اختصاصی می باشد و مخصوص کاربران قالب گراف و س.گ می باشد
3) روی گزینه میخوام عضو شم در انواع نقاط کلیک کنید مثلا یک بار وسطش - بار دیگه کنار هاش چیز جالبی براتون گذاشتم
خب دیگه دمو کد هم اینجاست
دمــــــــــو
کد با لینک مستقیم از سایت رز آپ:
اینجا کلیک کنید
کد:
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container {
font-family:'B Yekan';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
فرم عضویت و ورود برای وب و سایتتقدیم به کاربران سیب گراف
نام و نام خانوادگی
ایمیل
رمز عبور
تکرار رمز عبور
سوال امنیتی: اسم شهر شما چیست؟
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
html, body {
width: 100%;
height: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: "B Yekan";
font-size: 18px;
-webkit-perspective: 1000px;
perspective: 1000px;
background-color: #f5f5f5;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.description {
margin-top: 50px;
text-align: center;
color: #999;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.description a {
color: #4A9DF6;
text-decoration: none;
}
.btn.is-open ~ .description {
opacity: 0;
}
.btn {
display: block;
position: relative;
width: 200px;
height: 80px;
-webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-align: center;
}
.btn-front {
position: absolute;
display: block;
width: 100%;
height: 100%;
line-height: 80px;
background-color: #F44336;
color: #fff;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-front:hover {
background-color: #f77066;
}
.btn.is-open .btn-front {
pointer-events: none;
line-height: 160px;
}
.btn-back {
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
color: #222;
-webkit-transform: translateZ(-2px) rotateX(180deg);
transform: translateZ(-2px) rotateX(180deg);
overflow: hidden;
-webkit-transition: box-shadow 0.8s ease;
transition: box-shadow 0.8s ease;
}
.btn-back p {
margin-top: 27px;
margin-bottom: 25px;
}
.btn-back button {
padding: 12px 20px;
width: 30%;
margin: 0 5px;
background-color: transparent;
border: 0;
border-radius: 2px;
font-size: 1em;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease;
transition: background 0.15s ease;
}
.btn-back button:focus {
outline: 0;
}
.btn-back button.yes {
background-color: #2196F3;
color: #fff;
}
.btn-back button.yes:hover {
background-color: #51adf6;
}
.btn-back button.no {
color: #2196F3;
}
.btn-back button.no:hover {
background-color: #ddd;
}
.btn.is-open .btn-back {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
-webkit-transform: translateZ(-2px) rotateY(180deg);
transform: translateZ(-2px) rotateY(180deg);
}
.btn.is-open {
width: 400px;
height: 160px;
}
.btn[data-direction="top"].is-open {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.btn[data-direction="right"].is-open {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.btn[data-direction="bottom"].is-open {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.btn[data-direction="left"].is-open {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
آیا مطمئن هستید؟
بی خیال
بله
!!! میخوام عضو شم
روی گوشه ها و وسط گزینه قرمز کلیک کنید تا یک چیز باحال ببینید- طراحی و کدنویسی از پیانوش امینی فرد
var btn = document.querySelector('.btn');
var btnFront = btn.querySelector('.btn-front'), btnYes = btn.querySelector('.btn-back .yes'), btnNo = btn.querySelector('.btn-back .no');
btnFront.addEventListener('click', function (event) {
var mx = event.clientX - btn.offsetLeft, my = event.clientY - btn.offsetTop;
var w = btn.offsetWidth, h = btn.offsetHeight;
var directions = [
{
id: 'top',
x: w / 2,
y: 0
},
{
id: 'right',
x: w,
y: h / 2
},
{
id: 'bottom',
x: w / 2,
y: h
},
{
id: 'left',
x: 0,
y: h / 2
}
];
directions.sort(function (a, b) {
return distance(mx, my, a.x, a.y) - distance(mx, my, b.x, b.y);
});
btn.setAttribute('data-direction', directions.shift().id);
btn.classList.add('is-open');
});
btnYes.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
btnNo.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
function distance(x1, y1, x2, y2) {
var dx = x1 - x2;
var dy = y1 - y2;
return Math.sqrt(dx * dx + dy * dy);
}
//# sourceURL=pen.js
Design & Coding By: Pianoosh Amini Fard
امضاي کاربر :
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
.
.
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
بَـــــــــــنـــــــــــد هــــــــــ :
.
.
.
 تشکر شده: |
1 کاربر از 4hossein7 به خاطر اين مطلب مفيد تشکر کرده اند: amir2by2 / |
نقل قول از 4hossein7
خیلی خوب دمت گرم
قربونت داداش خیلی خوب دمت گرم
امضاي کاربر :
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
.
.
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
بَـــــــــــنـــــــــــد هــــــــــ :
.
.
.
نقل قول از behnam2000
عالی
خوشاحالم که خوشتون اومد عالی
امضاي کاربر :
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
.
.
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
بَـــــــــــنـــــــــــد هــــــــــ :
.
.
.
از این قالبا برای سرویس های وبلاگدهی هم میشه استفاده کرد؟
اپه میشه بگید چه جوری میتونم استفاده کنم ممنوون
اپه میشه بگید چه جوری میتونم استفاده کنم ممنوون
عالی
امضاي کاربر :
الان پهتر شد!!!
کد:
<html class="">
<head>
<script src="//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/sevilayha/pen/IdGKH">
<link rel="stylesheet prefetch" href="http://fonts.googleapis.com/css?family=Roboto">
<style class="cp-pen-styles">* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container {
font-family:'B Yekan';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}</style>
</head><body>
<div class="container">
<h2>فرم عضویت و ورود برای وب و سایت<small>تقدیم به کاربران قالب گراف و سیب گراف</small></h2>
<form>
<div class="group">
<input type="text" required dir="ltr">
<span class="highlight"></span>
<span class="bar"></span>
<label>نام و نام خانوادگی</label>
</div>
<div class="group">
<input type="mail" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>ایمیل</label>
</div>
<div class="group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>رمز عبور</label>
</div>
<div class="group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>تکرار رمز عبور</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>سوال امنیتی: اسم شهر شما چیست؟</label>
</div>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
html, body {
width: 100%;
height: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: "B Yekan";
font-size: 18px;
-webkit-perspective: 1000px;
perspective: 1000px;
background-color: #f5f5f5;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.description {
margin-top: 50px;
text-align: center;
color: #999;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.description a {
color: #4A9DF6;
text-decoration: none;
}
.btn.is-open ~ .description {
opacity: 0;
}
.btn {
display: block;
position: relative;
width: 200px;
height: 80px;
-webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-align: center;
}
.btn-front {
position: absolute;
display: block;
width: 100%;
height: 100%;
line-height: 80px;
background-color: #F44336;
color: #fff;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-front:hover {
background-color: #f77066;
}
.btn.is-open .btn-front {
pointer-events: none;
line-height: 160px;
}
.btn-back {
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
color: #222;
-webkit-transform: translateZ(-2px) rotateX(180deg);
transform: translateZ(-2px) rotateX(180deg);
overflow: hidden;
-webkit-transition: box-shadow 0.8s ease;
transition: box-shadow 0.8s ease;
}
.btn-back p {
margin-top: 27px;
margin-bottom: 25px;
}
.btn-back button {
padding: 12px 20px;
width: 30%;
margin: 0 5px;
background-color: transparent;
border: 0;
border-radius: 2px;
font-size: 1em;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease;
transition: background 0.15s ease;
}
.btn-back button:focus {
outline: 0;
}
.btn-back button.yes {
background-color: #2196F3;
color: #fff;
}
.btn-back button.yes:hover {
background-color: #51adf6;
}
.btn-back button.no {
color: #2196F3;
}
.btn-back button.no:hover {
background-color: #ddd;
}
.btn.is-open .btn-back {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
-webkit-transform: translateZ(-2px) rotateY(180deg);
transform: translateZ(-2px) rotateY(180deg);
}
.btn.is-open {
width: 400px;
height: 160px;
}
.btn[data-direction="top"].is-open {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.btn[data-direction="right"].is-open {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.btn[data-direction="bottom"].is-open {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.btn[data-direction="left"].is-open {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="btn" data-direction="right">
<div class="btn-back">
<p>آیا مطمئن هستید؟</p>
<button class="no">بی خیال</button>
<button class="yes">بله</button>
</div>
<div class="btn-front">!!! میخوام عضو شم </div>
</div>
<p class="description">روی گوشه ها و وسط گزینه قرمز کلیک کنید تا یک چیز باحال ببینید- <a href="http://Pianoosh-me.rozblo.com/" target="_blank">طراحی و کدنویسی از پیانوش امینی فرد</a></p>
<script src="New folder (5)/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js.download"></script>
<script>
var btn = document.querySelector('.btn');
var btnFront = btn.querySelector('.btn-front'), btnYes = btn.querySelector('.btn-back .yes'), btnNo = btn.querySelector('.btn-back .no');
btnFront.addEventListener('click', function (event) {
var mx = event.clientX - btn.offsetLeft, my = event.clientY - btn.offsetTop;
var w = btn.offsetWidth, h = btn.offsetHeight;
var directions = [
{
id: 'top',
x: w / 2,
y: 0
},
{
id: 'right',
x: w,
y: h / 2
},
{
id: 'bottom',
x: w / 2,
y: h
},
{
id: 'left',
x: 0,
y: h / 2
}
];
directions.sort(function (a, b) {
return distance(mx, my, a.x, a.y) - distance(mx, my, b.x, b.y);
});
btn.setAttribute('data-direction', directions.shift().id);
btn.classList.add('is-open');
});
btnYes.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
btnNo.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
function distance(x1, y1, x2, y2) {
var dx = x1 - x2;
var dy = y1 - y2;
return Math.sqrt(dx * dx + dy * dy);
}
//# sourceURL=pen.js
</script>
</div>
</html>
</form>
<p class="footer">
Design & Coding By: <a href="#" target="_blank"></a> <a href="http://pianoosh-me.rozblog.com" target="_blank">Pianoosh Amini Fard</a>
</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html> امضاي کاربر :
savalan دوستی که هیچ موقع فراموش نمیشود!!
savalan دوستی که هیچ موقع فراموش نمیشود!!
نقل قول از arash_1001tarh
الان پهتر شد!!!
داداش از این کد میشه تو سرویس های وبلاگدهی استفاده کرد ؟
الان پهتر شد!!!
کد:
<html class="">
<head>
<SCRIPT src="/js/forum.js" type="text/javascript"></SCRIPT>
<script src="//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/sevilayha/pen/IdGKH">
<link rel="stylesheet prefetch" href="http://fonts.googleapis.com/css?family=Roboto">
<style class="cp-pen-styles">* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container {
font-family:'B Yekan';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}</style>
</head><body>
<div class="container">
<h2>فرم عضویت و ورود برای وب و سایت<small>تقدیم به کاربران قالب گراف و سیب گراف</small></h2>
<form>
<div class="group">
<input type="text" required dir="ltr">
<span class="highlight"></span>
<span class="bar"></span>
<label>نام و نام خانوادگی</label>
</div>
<div class="group">
<input type="mail" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>ایمیل</label>
</div>
<div class="group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>رمز عبور</label>
</div>
<div class="group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>تکرار رمز عبور</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>سوال امنیتی: اسم شهر شما چیست؟</label>
</div>
<html><head>
<SCRIPT src="/js/forum.js" type="text/javascript"></SCRIPT><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
html, body {
width: 100%;
height: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: "B Yekan";
font-size: 18px;
-webkit-perspective: 1000px;
perspective: 1000px;
background-color: #f5f5f5;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.description {
margin-top: 50px;
text-align: center;
color: #999;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.description a {
color: #4A9DF6;
text-decoration: none;
}
.btn.is-open ~ .description {
opacity: 0;
}
.btn {
display: block;
position: relative;
width: 200px;
height: 80px;
-webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-align: center;
}
.btn-front {
position: absolute;
display: block;
width: 100%;
height: 100%;
line-height: 80px;
background-color: #F44336;
color: #fff;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-front:hover {
background-color: #f77066;
}
.btn.is-open .btn-front {
pointer-events: none;
line-height: 160px;
}
.btn-back {
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
color: #222;
-webkit-transform: translateZ(-2px) rotateX(180deg);
transform: translateZ(-2px) rotateX(180deg);
overflow: hidden;
-webkit-transition: box-shadow 0.8s ease;
transition: box-shadow 0.8s ease;
}
.btn-back p {
margin-top: 27px;
margin-bottom: 25px;
}
.btn-back button {
padding: 12px 20px;
width: 30%;
margin: 0 5px;
background-color: transparent;
border: 0;
border-radius: 2px;
font-size: 1em;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 0.15s ease;
transition: background 0.15s ease;
}
.btn-back button:focus {
outline: 0;
}
.btn-back button.yes {
background-color: #2196F3;
color: #fff;
}
.btn-back button.yes:hover {
background-color: #51adf6;
}
.btn-back button.no {
color: #2196F3;
}
.btn-back button.no:hover {
background-color: #ddd;
}
.btn.is-open .btn-back {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
-webkit-transform: translateZ(-2px) rotateY(180deg);
transform: translateZ(-2px) rotateY(180deg);
}
.btn.is-open {
width: 400px;
height: 160px;
}
.btn[data-direction="top"].is-open {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.btn[data-direction="right"].is-open {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.btn[data-direction="bottom"].is-open {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.btn[data-direction="left"].is-open {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="btn" data-direction="right">
<div class="btn-back">
<p>آیا مطمئن هستید؟</p>
<button class="no">بی خیال</button>
<button class="yes">بله</button>
</div>
<div class="btn-front">!!! میخوام عضو شم </div>
</div>
<p class="description">روی گوشه ها و وسط گزینه قرمز کلیک کنید تا یک چیز باحال ببینید- <a href="http://Pianoosh-me.rozblo.com/" target="_blank">طراحی و کدنویسی از پیانوش امینی فرد</a></p>
<script src="New folder (5)/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js.download"></script>
<script>
var btn = document.querySelector('.btn');
var btnFront = btn.querySelector('.btn-front'), btnYes = btn.querySelector('.btn-back .yes'), btnNo = btn.querySelector('.btn-back .no');
btnFront.addEventListener('click', function (event) {
var mx = event.clientX - btn.offsetLeft, my = event.clientY - btn.offsetTop;
var w = btn.offsetWidth, h = btn.offsetHeight;
var directions = [
{
id: 'top',
x: w / 2,
y: 0
},
{
id: 'right',
x: w,
y: h / 2
},
{
id: 'bottom',
x: w / 2,
y: h
},
{
id: 'left',
x: 0,
y: h / 2
}
];
directions.sort(function (a, b) {
return distance(mx, my, a.x, a.y) - distance(mx, my, b.x, b.y);
});
btn.setAttribute('data-direction', directions.shift().id);
btn.classList.add('is-open');
});
btnYes.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
btnNo.addEventListener('click', function (event) {
btn.classList.remove('is-open');
});
function distance(x1, y1, x2, y2) {
var dx = x1 - x2;
var dy = y1 - y2;
return Math.sqrt(dx * dx + dy * dy);
}
//# sourceURL=pen.js
</script>
</div>
</html>
</form>
<p class="footer">
Design & Coding By: <a href="#" target="_blank"></a> <a href="http://pianoosh-me.rozblog.com" target="_blank">Pianoosh Amini Fard</a>
</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html>نقل قول از justhadi
از این قالبا برای سرویس های وبلاگدهی هم میشه استفاده کرد؟
اپه میشه بگید چه جوری میتونم استفاده کنم ممنوون
بله میشه استفاده کرد
از این قالبا برای سرویس های وبلاگدهی هم میشه استفاده کرد؟
اپه میشه بگید چه جوری میتونم استفاده کنم ممنوون
امضاي کاربر :
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
.
.
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
بَـــــــــــنـــــــــــد هــــــــــ :
.
.
.
نقل قول از mobin2000
عالی
خوشحالم که خوشتون اومدعالی
تـــــــــــــــــــــــــــشــــــــــــــــــــــــــکـــــــــــــــــــــــــــــــــــر
امضاي کاربر :
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
.
.
طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.
تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.
اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.
بَـــــــــــنـــــــــــد هــــــــــ :
.
.
.
