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

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


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

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

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

BeLm AsSeM

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

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

تذكير بمساهمة فاتح الموضوع :

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


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


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


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

كاتب الموضوعرسالة
Picasso-Des
سوبر الإبداع 



عدد المساهمات : 10774

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

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



عدد المساهمات : 1130

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

   جزاكم الله خيراً  
 وردة حمراء وردة حمراء وردة حمراء وردة حمراء 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
خادم الاسلام
عضو 

خادم الاسلام

ذكر
السمك
عدد المساهمات : 23
نقاط النشاط : 32
السٌّمعَة : 11
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript - صفحة 2 112
العمر : 37

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript - صفحة 2 Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript - صفحة 2 Emptyالجمعة سبتمبر 14, 2018 2:20 am

ماشاء الله تبارك الله
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.a7la-7ekaya.com/
AL-SHAM5
مؤسس الإبداع العربي 

AL-SHAM5

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

صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript - صفحة 2 Empty
مُساهمةموضوع: رد: صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript   صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript - صفحة 2 Emptyالخميس مايو 14, 2020 10:37 pm

شكرا لك

بوركت ودام عطائك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
صفحة تسجيل دخول احترافية للمنتديات Html | Css | JavaScript
الرجوع الى أعلى الصفحة 
صفحة 2 من اصل 2انتقل الى الصفحة : الصفحة السابقة  1, 2

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