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

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


صفحة تسجيل دخول احترافية للمنتديات 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


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

كاتب الموضوعرسالة
The Giant
مؤسس الإبداع العربي 



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

صفحة تسجيل دخول احترافية للمنتديات 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
العمر : 39

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

ماشاء الله تبارك الله
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.a7la-7ekaya.com/
Àťéf Hàmmàď
سوبر الإبداع 

Àťéf Hàmmàď

ذكر
عدد المساهمات : 92696
نقاط النشاط : 102560
السٌّمعَة : 708
بلد العضو : صفحة تسجيل دخول احترافية للمنتديات 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
 مواضيع مماثلة
-
» Javascript تسجيل الدخول بايميل العضو
» تصميم صفحة html
» طلب تصميم صفحة html
» طلب تصميم صفحة HTML
» طلب تصميم صفحة HTML

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