منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript
 

 صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript

اذهب الى الأسفل 
انتقل الى الصفحة : 1, 2  الصفحة التالية
كاتب الموضوعرسالة
BeLm AsSeM
عضو خبير 

BeLm AsSeM

ذكر
عدد المساهمات : 750
نقاط النشاط : 940
السٌّمعَة : 124
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Algeri10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأحد فبراير 26, 2017 10:05 pm

السلام عليكم ورحمة الله وبركاته
أقدم لكم حصريا صفحة من برمجتي لتسجيل الدخول السريع بالمنتدى
مكودة بتقنيات Html و Css و JavaScript


المعاينة :
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript VhuhF9z
https://i.servimg.com/u/f58/19/63/13/28/belm10.gif


نأتي لطريقة التركيب :


1 - نتوجه إلى التومبيلات > قالب الهيدر :
وداخل وسم :
الكود:
<head>

نضع التالي :
الكود:
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

وفي نفس القالب نبحث عن وسم ونضع أسفله :
الكود:
  <!-- BEGIN switch_user_logged_out -->
  <div class="assem">
                        <a href="#" id="user-btn">
                            <div class="menu-icon">
                                <i class="fa fa-user-times" aria-hidden="true"></i>
                            </div>
                        </a>
        </div>
        <div id="overlay" class="overlay" style="overflow: hidden; outline: none; width: 0%; right: -20px; display: block;">
        <i id="close-btn" class="fa fa-close"></i>
        <div class="login-page">
            <div class="container">
                <h2>الدخول للموقع</h2>
                <div class="user-login">
                    <form action="/login.forum?redirect=/" method="post" name="form_login">
                        <div class="input-f">
                            <input type="text" name="username" placeholder="اسم المستخدم" required>
                        </div>
                        <div class="input-f">
                            <input type="password" name="password" placeholder="كلمة المرور" required>
                        </div>
                        <div class="input-f">
                            <input type="submit" name="login" value="الدخول">
                        </div>
                    </form>
                </div>
                <div class="register">
                    <button type="button" class="frgt" onclick="location.href='/profile?mode=sendpassword'">نسيت كلمة المرور</button>
                    <a href="/register">أو يمكنك تسجيل حساب جديد من هنا</a>
                </div>
            </div>
        </div>
        </div> 
              <!-- END switch_user_logged_out -->

الآن نتجه إلى ورقة css ونضع الأكواد التالية ( يمكنكم وضعها أيضا في قالب الهيدر ) :

الكود:
    /*
Code by Belm assem
www.fb.com/belm.assem
all copyright reserved
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-family: 'Droid Arabic Kufi';
}
.assem{
    position: fixed;
    top: 15px;
    right:15px;
    animation: assem 4s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes assem {
                from {
                    -webkit-transform: none;
                    transform: none;
                }
                    79.5% {
                    -webkit-transform: none;
                    transform: none;
                }
                80% {
                    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
                    transform: skewX(-12.5deg) skewY(-12.5deg);
                }
                84% {
                    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
                    transform: skewX(6.25deg) skewY(6.25deg);
                }

                88% {
                    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
                    transform: skewX(-3.125deg) skewY(-3.125deg);
                }

                91% {
                    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
                    transform: skewX(1.5625deg) skewY(1.5625deg);
                }

                94% {
                    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
                    transform: skewX(-0.78125deg) skewY(-0.78125deg);
                }

                96.5% {
                    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
                    transform: skewX(0.390625deg) skewY(0.390625deg);
                }

                to {
                    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                }
            }
.assem a{
    color:#fff;
    font-size: 16px;
}
.assem i{
    background-color:crimson;
    padding: 20px;
    border-radius: 50%;
    line-height: 17px;
    width:57px;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
}
.overlay{
    display: none;
    position: absolute;
    top:0;
    right:0;
    z-index: 9999;
    background-color: #7fd4b1;
    width:100%;
    height:100%;
}
#close-btn{
    color: #fff;
    position: absolute;
    z-index: 200;
    top: 10px;
    left: 10px;
    font-size: 40px;
    cursor: pointer;
    transition: all 0.3s linear;
}
#close-btn:hover{
    transform: rotate(180deg);
    -webkiy-transform: rotate(180deg);
}
.login-page{
    text-align: center;
}
.container{
    margin-top: 40px; 
}
.container h2{
    margin-bottom: 30px;
    font-size:18px;
}
.input-f{
    position: relative
}
.input-f input[type="text"],.input-f input[type="password"]{
    background: transparent;
    width: 350px;
    padding: 16px 0px;
    border:0;
    border-bottom: 1px solid #435160;
    font-family: 'Droid Arabic Kufi';
}
.input-f input[type="submit"]{
    background-color: #59b991;
    width:350px;
    height:40px;
    border:0;
    border-radius:3px;
    cursor:pointer;
    transition: background 0.4s ease-in-out;
    margin-top: 30px;
    color: white;
    font-family: Droid Arabic Kufi;
}
.input-f input[type="submit"]:hover{
    background-color: #f7c50d; 
}
.register{
    margin-top: 30px;
}
.register a{
    color:#fff;
    text-decoration: none;
    font-size: 16px;
}
.register button{
    border:0;
    padding: 6px 12px;
    display: inline-block;
    cursor: pointer;
}
.frgt{
    background-color: darkcyan;
    color:#fff;
    border-radius: 3px;
    transition: all 0.3s linear;
}
.frgt:hover{
    background-color:crimson;
}

و آخر خطوة نذهب إلى العناصر الإضافية ثم إدارة أكواد JavaScript ونضع الكود التالي :
الكود:
$(function(){
  $("#user-btn").click(function(){
      $("#overlay").animate({width:'100%',right:'0px'});
      $(".overlay").css('display', 'block');
    $('body').addClass('stop-scrolling');
  });
    $("#close-btn").click(function(){
      $(".overlay").animate({width:'0%',right:'-20px'});
      $('body').removeClass('stop-scrolling');
  });
});

كما في الصورة :

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript S10
https://i.servimg.com/u/f58/19/63/13/28/s10.png


وفي الأخير مبروك عليكم
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript VhuhF9z
https://i.servimg.com/u/f58/19/63/13/28/belm10.gif


و إن شاء الله سيتم تطوير الكود في المستقبل ليشمل أيضا بيانات الأعضاء أي بعد الدخول
تحياتي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
El Desha El Hlawany1
عضو خبير 

El Desha El Hlawany1

ذكر
القوس
عدد المساهمات : 778
نقاط النشاط : 900
السٌّمعَة : 51
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Egypt10
العمر : 23

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأحد فبراير 26, 2017 10:32 pm

يعطيك العافية على العطاء
واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://egyptian-cafe.123.st/
BeLm AsSeM
عضو خبير 

BeLm AsSeM

ذكر
عدد المساهمات : 750
نقاط النشاط : 940
السٌّمعَة : 124
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Algeri10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالثلاثاء فبراير 28, 2017 12:10 am

شكرا لمرورك أخي @El Desha El Hlawany1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126351
نقاط النشاط : 142037
السٌّمعَة : 2980
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Saudi-10
العمر : 34
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Yoo_ao11

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 2:49 am

قالب جميل ومتميز من حضرت سموك
ماشاء الله تبارك الله
واصل ياعبقري دائما مميز بما تطرحه
دمت بخير تم تقيمك


صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Img_2010
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
منصورة
سوبر الإبداع 

منصورة

انثى
الدلو
عدد المساهمات : 13970
نقاط النشاط : 16963
السٌّمعَة : 51
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Algeri10
العمر : 57

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 3:09 am

ما شاء الله جميل

يعطيك العافيه
تسلم الايادى
تقبل مروري وتقديري

تحية مع الشكر


كل القلوب إلى الحبيب تميل
ومعي بهذا شاهد ودليل
اما الدليل إذا ذكرت محمداً
صارت دموع العارفين تسيل
هذا رسول الله نبراس الهدى
هذا لكل العالمين نبيا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.manssora.com/
Mr.Mohammed
سوبر الإبداع 

Mr.Mohammed

ذكر
عدد المساهمات : 9672
نقاط النشاط : 10585
السٌّمعَة : 173
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Saudi-10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 8:05 pm

ما شاء الله متألق دائما تسلم يدك على هالجمال
وفقت ياغالي واتمنى ان نرى المزيد والمزيد من شخص مبدع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://tatwer3araby.ahlamontada.com
Mar Wan
سوبر الإبداع 

Mar Wan

ذكر
العقرب
عدد المساهمات : 9450
نقاط النشاط : 11720
السٌّمعَة : 185
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Morocc10
العمر : 19

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 8:08 pm

قالب رائئع ♥
بجد ابدعت ~ واصل تألقك ♥
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
sami-sami
سوبر الإبداع 

sami-sami

ذكر
عدد المساهمات : 8720
نقاط النشاط : 9560
السٌّمعَة : 48
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Sudan10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 8:11 pm

تسلم الايادى قالب جميل وعمل رائع  تحياتي يا بطل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Algeri10
العمر : 19

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالأربعاء مارس 01, 2017 8:23 pm

يعطيك العافية
عمل رائع لك جزيل الشكر


صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
BeLm AsSeM
عضو خبير 

BeLm AsSeM

ذكر
عدد المساهمات : 750
نقاط النشاط : 940
السٌّمعَة : 124
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Algeri10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالجمعة مارس 03, 2017 4:38 pm

شكرا لكم جميعا
أسعدني مروركم
الرجوع الى أعلى الصفحة اذهب الى الأسفل
raadgassm
عضو 

raadgassm

ذكر
عدد المساهمات : 54
نقاط النشاط : 75
السٌّمعَة : 11
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Syria10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالجمعة مارس 03, 2017 5:34 pm

قالب جميل
سلمت الايادي التي خطت وابدعت
تحياتي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Lebano10
العمر : 34

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالثلاثاء مارس 21, 2017 2:19 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Derraz Boujemaa
عضو ذهبي 

Derraz Boujemaa

ذكر
عدد المساهمات : 3399
نقاط النشاط : 6145
السٌّمعَة : 121
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Morocc10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالإثنين ديسمبر 11, 2017 3:20 pm

يعطيك العافيه طرح رائع وانت دائما رائع في طرحك .
أنتظر جديدك بكل الشوق والود ,,,
تقبل مروري المتواضع


صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript OhiHHcI
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10774
نقاط النشاط : 11116
السٌّمعَة : 136
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Ioao10
العمر : 36

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالسبت يونيو 16, 2018 11:36 pm

يعطيكم العافية على الطرح صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript 837876428
كل الاحترام صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Ioao10

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Emptyالإثنين يوليو 23, 2018 9:50 am

   جزاكم الله خيراً  
 وردة حمراء وردة حمراء وردة حمراء وردة حمراء 


سبحان الله والحمدلله ولا إله إلا الله 
 
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
 
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 2انتقل الى الصفحة : 1, 2  الصفحة التالية

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: التقنيات المتقدمة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020