إضافة Text Input Effect Moving up بشكل رائع

Text Input Effect Moving up

إضافة اداه ادخال النص 

بتأثير يتحرك إلى الاعلى بشكل اكثر من رائع مصمم بتقنية CSS3 والتى تعمل على

تأثير على المشروع التى تعمل عليه هذة الاداه مهمة جداً لتصميم المواقع الذي يوجد بها ادخال
بيانات مثل اسم المستخدم وا كلمة المرور وا الإميل الخ الخ ..

مشاهدة العينة

  تركيب الاداه  

 اولاً كود CSS 

.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em;
    max-width: 350px;
    width: calc(100% - 2em);
    vertical-align: top;
}

.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: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none; /* 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%;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}

.icon {
    color: #ddd;
    font-size: 150%;
}

/* Individual styles */

/* Moving up */

.input--Moving_up {
    margin: 4em 1em 1em;
}

.input__field--Moving_up {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #AFB5BB;/*اللون*/
    font-size: 1.55em;/*حجم الخط*/
}

.input__label--Moving_up {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none;
}

.input__label-content--Moving_up {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--Moving_up::before,
.input__label--Moving_up::after {/*الخط الرمادي العلوي والسفلي*/
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;/*الحجم*/
    background: #6a7989;/*اللون*/
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.input__label--Moving_up::before {
    top: 0;
}

.input__label--Moving_up::after {
    bottom: 0;
}

.input__field--Moving_up:focus + .input__label--Moving_up .input__label-content--Moving_up,
.input--filled .input__label-content--Moving_up {
    -webkit-transform: translate3d(0, -90%, 0);
    transform: translate3d(0, -90%, 0);
}

.input__field--Moving_up:focus + .input__label--Moving_up::before,
.input--filled .input__label--Moving_up::before {
    -webkit-transform: translate3d(0, -0.5em, 0);
    transform: translate3d(0, -0.5em, 0);
}

.input__field--Moving_up:focus + .input__label--Moving_up::after,
.input--filled .input__label--Moving_up::after {
    -webkit-transform: translate3d(0, 0.5em, 0);
    transform: translate3d(0, 0.5em, 0);
}

 يمكنك التعديل على CSS  : 
1- الخط الرمادي العلوي والسفلي متحدد باللون اصفر يمكنك تغير 
الحجم واللون "اختار اللون من قائمة الالوان"
2- اسم الخانة متحدد باللون الاخضر 
3- الاسم التى تكتب داخل الخانة اذا حابب تغير اللون او الحجم الخط متحددين باللون الازرق
4- حجم الخانة متحدد باللون اسود

 ثانياً كود HTML  

<!-- First Name -->
<span class="input input--Moving_up">
<input class="input__field input__field--Moving_up" type="text" id="input-1" />
<label class="input__label input__label--Moving_up" for="input-1">
<span class="input__label-content input__label-content--Moving_up">First Name</span>
</label>
</span>
<!-- END -->

<!-- Last Name -->
<span class="input input--Moving_up">
<input class="input__field input__field--Moving_up" type="text" id="input-2" />
<label class="input__label input__label--Moving_up" for="input-2">
<span class="input__label-content input__label-content--Moving_up">Last Name</span>
</label>
</span>
<!-- END -->

<!-- Email -->
<span class="input input--Moving_up">
<input class="input__field input__field--Moving_up" type="Email" id="input-3" />
<label class="input__label input__label--Moving_up" for="input-3">
<span class="input__label-content input__label-content--Moving_up">Email</span>
</label>
</span>
<!-- END -->

<!-- Usernam -->
<span class="input input--Moving_up">
<input class="input__field input__field--Moving_up" type="Usernam" id="input-3" />
<label class="input__label input__label--Moving_up" for="input-3">
<span class="input__label-content input__label-content--Moving_up">Usernam</span>
</label>
</span>
<!-- END -->

<!-- Password -->
<span class="input input--Moving_up">
<input class="input__field input__field--Moving_up" type="Password" id="input-3" />
<label class="input__label input__label--Moving_up" for="input-3">
<span class="input__label-content input__label-content--Moving_up">Password</span>
</label>
</span>
<!-- END -->

<script src="js/classie.js"></script>

<script src="js/script.js"></script>

لتحميل السورس اداه ادخال النص

الحجم : 19KB | تحميل مباشر

شارك الموضوع

إقرأ أيضًا