تأثير Akira علي صفحة اتصل بنا
السلام عليكم
اقدم لك اليوم ان شاء الله صفحة اتصل بنا رائعة
تحتوي علي تأثيرات Css علي حقل الاسم والبريد بحيث ينقسم الحقل بشكل رائع
مضاف لها كذلك زر بتأثير Css3 والذي تم شرحة في هذا الدرس
معاينة الصفحة
شكل الصفحة علي الهاتف
لإضافة الصفحة ,,
أولا قم بالذهاب الي التخطيط
ثم اضافة اداة في القائمة الجانبية الخاصة بك
ثم اضف نموذج الاتصال
ثم اذهب الي قالب
ثم تحرير HTML
ابحث عن هذا الكود
ثم اضافة اداة في القائمة الجانبية الخاصة بك
ثم اضف نموذج الاتصال
ثم اذهب الي قالب
ثم تحرير HTML
ابحث عن هذا الكود
]]></b:skin>اضف فوقة هذا الكود
#ContactForm1 {display: none;}
توجة الي لوحة تحكم بلوجر > ثم اضغط علي الصفحات
ثم أضغط علي صفحة جديدة
ثم حول الصفحة من تأليف الي HTML
ثم ضع هذا الكود
<html>
<head></head>
<body>
<center> <!-- البداية -->
<div class="contact-us-page">
<div style="padding-top: 50px;"></div>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<!-- الاسم -->
<!-- id="ContactForm1_contact-form-name" الاسم -->
<span class="input input--akira">
<input class="input__field input__field--akira" type="text" id="ContactForm1_contact-form-name" />
<label class="input__label input__label--akira" for="ContactForm1_contact-form-name">
<span class="input__label-content input__label-content--akira">الاسم</span>
</label>
</span>
<br><p></p>
<!-- البريد -->
<!-- id="ContactForm1_contact-form-email" البريد إلكتروني -->
<span class="input input--akira">
<input class="input__field input__field--akira" type="text" id="ContactForm1_contact-form-email" />
<label class="input__label input__label--akira" for="ContactForm1_contact-form-email">
<span class="input__label-content input__label-content--akira">البريد إلكتروني</span>
</label>
</span>
<br><p></p>
<!-- الرسالة -->
<!-- الرسالة <span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span> -->
<textarea placeholder="رسالة" class="contact-form-email-message1" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" ></textarea>
<br><p></p>
<input class="btnBA2 btn-2 btn-2b" id="ContactForm1_contact-form-submit" type="button" value="إرسال">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
</div>
</div>
</center>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<style>
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
background: #f9f7f6;
color: #404d5b;
font-weight: 500;
font-size: 1.05em;
font-family: droid arabic naskh;
}
.contact-us-page {background: #D4D1D1;}
a {
color: #2fa0ec;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #404d5b;
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.content {
font-size: 150%;
padding: 3em 0;
}
.content h2 {
margin: 0 0 2em;
opacity: 0.1;
}
.content p {
margin: 1em 0;
padding: 5em 0 0 0;
font-size: 0.65em;
}
.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
direction: ltr;
}
.input__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: droid arabic naskh; /* for box shadows to show on iOS */
}
.input__field:focus {
outline: none;
}
.input__label {
display: inline-block;
float: right;
padding: 0 1em;
width: 40%;
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input__label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
text-align:center;
}
.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}
.icon {
color: #ddd;
font-size: 150%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width: 360px; width: 100%; font-size: 17px;}
.contact-form-widget { max-width: 360px;}
.contact-form-email-message1 {
background: #fff;
background-color: #fff;
border: 3px solid #d9d9d9;
border-top: 3px solid #D9D9D9;
box-sizing: border-box;
color: #333;
display: inline-block;
font-family: droid arabic naskh;
font-size: 13px;
margin: 0;
margin-top: 5px;
padding: 2px;
vertical-align: top;
width: 100%;
direction: rtl;
}
/* BloggerAdd.com - إضافات بلوجر */
.btnBA2 {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
z-index: 99999;
}
.btnBA2:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Button 2 */
.btn-2 {
background: #cb4e4e;
color: #fff;
box-shadow: 0 6px #ab3c3c;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/* Button 2a */
.btn-2a {
border-radius: 0 0 5px 5px;
}
.btn-2a:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2a:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2b */
.btn-2b {
border-radius: 0 0 5px 5px;
}
.btn-2b:hover {
box-shadow: 0 8px #ab3c3c;
top: -2px;
}
.btn-2b:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2c */
.btn-2c {
border-radius: 5px;
}
.btn-2c:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2c:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2d */
.btn-2d {
border-radius: 5px;
}
.btn-2d:hover {
box-shadow: 0 8px #ab3c3c;
top: -2px;
}
.btn-2d:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* BloggerAdd.com - إضافات بلوجر */
/* Individual styles */
/* Akira */
.input--akira {
margin-top: 2em;
}
.input__field--akira {
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: block;
padding: 0 1em;
width: 100%;
height: 100%;
background: transparent;
text-align: center;
}
.input__label--akira {
padding: 0;
width: 100%;
background: #696a6e;
color: #cc6055;
cursor: text;
}
.input__label--akira::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2f3238;
-webkit-transform: scale3d(0.97, 0.85, 1);
transform: scale3d(0.97, 0.85, 1);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label-content--akira {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__field--akira:focus + .input__label--akira::before,
.input--filled .input__label--akira::before {
-webkit-transform: scale3d(0.99, 0.95, 1);
transform: scale3d(0.99, 0.95, 1);
}
.input__field--akira:focus + .input__label--akira,
.input--filled .input__label--akira {
cursor: default;
pointer-events: none;
}
.input__field--akira:focus + .input__label--akira .input__label-content--akira,
.input--filled .input__label-content--akira {
-webkit-transform: translate3d(0, -3.5em, 0);
transform: translate3d(0, -3.5em, 0);
}
</style>
<script src="https://googledrive.com/host/0B30379AIS0OdMFlqR25jZ01jVE0/"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
</html>
اي سؤال او دعم او مساعدة ,, انا معاك ان شاء الله في التعليقات ,, السلام عليكم ورحمة الله وبركاته :)
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لاضافة كود حوله اولا بمحول الاكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة محول الأكوادمحول الأكواد الإبتساماتالإبتسامات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.