hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



محرك بحث بشكل مميز جداً بتقنية CSS3
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: محرك بحث بشكل مميز جداً بتقنية CSS3



تحياتي لجميع رواد اعضاء وزوار منتديات دعم شباب
كالمعتاد في جعبتنا جديد Very Happy
اقدكم لكم كود تصميم جميل لمحرك بحث منتداك
بطريقة مميزة وجذابة

[معاينة مباشرة]

اعجبك ؟ على الاكواد :

هتمل
الكود:
<section class="webdesigntuts-workshop">
    <form action="" method="">           
        <input type="search" placeholder="Search...">               
        <button>Search</button>
    </form>
</section>

سي س س
الكود:

@import url(http://fonts.googleapis.com/css?family=Cabin:400);

.webdesigntuts-workshop {
    background: #151515;
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
    content: '';
    display: block;   
    height: 1px;
    left: 50%;
    margin: 0 0 0 -400px;
    position: absolute;
    width: 800px;
}

.webdesigntuts-workshop:before {
    background: #444;
    background: -webkit-linear-gradient(left, #151515, #444, #151515);
    background: -moz-linear-gradient(left, #151515, #444, #151515);
    background: -o-linear-gradient(left, #151515, #444, #151515);
    background: -ms-linear-gradient(left, #151515, #444, #151515);
    background: linear-gradient(left, #151515, #444, #151515);
    top: 192px;
}

.webdesigntuts-workshop:after {
    background: #000;
    background: -webkit-linear-gradient(left, #151515, #000, #151515);   
    background: -moz-linear-gradient(left, #151515, #000, #151515);   
    background: -o-linear-gradient(left, #151515, #000, #151515);   
    background: -ms-linear-gradient(left, #151515, #000, #151515);   
    background: linear-gradient(left, #151515, #000, #151515);   
    top: 191px;
}

.webdesigntuts-workshop form {
    background: #111;
    background: -webkit-linear-gradient(#1b1b1b, #111);
    background: -moz-linear-gradient(#1b1b1b, #111);
    background: -o-linear-gradient(#1b1b1b, #111);
    background: -ms-linear-gradient(#1b1b1b, #111);
    background: linear-gradient(#1b1b1b, #111);
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #272727;
    display: inline-block;
    font-size: 0px;
    margin: 150px auto 0;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.webdesigntuts-workshop input {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);   
    background: -moz-linear-gradient(#333, #222);   
    background: -o-linear-gradient(#333, #222);   
    background: -ms-linear-gradient(#333, #222);   
    background: linear-gradient(#333, #222);   
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    color: #888;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width: 200px;
}

.ie .webdesigntuts-workshop input {
    line-height: 40px;
}

.webdesigntuts-workshop input::-webkit-input-placeholder {
  color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
  color: #888;
}

.webdesigntuts-workshop input:focus {
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
    color: #efe;
}

.webdesigntuts-workshop input:focus:-moz-placeholder {
    color: #efe;
}

.webdesigntuts-workshop button {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: 80px;
}   

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);   
    background: -moz-linear-gradient(#393939, #292929);   
    background: -o-linear-gradient(#393939, #292929);   
    background: -ms-linear-gradient(#393939, #292929);   
    background: linear-gradient(#393939, #292929);
    color: #5f5;
    outline: none;
}

.webdesigntuts-workshop button:active {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top: 1px;
}

@-webkit-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }   
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

الحقوق محفوظة لكاتب الكود وانا مجرد سارق

نراكم في موضوع جديد ان شاء المولى

في حفظ الرحمن اخوتي

بحث،CSS



كن بالقرب :
follow me @HDagash


التعليقات
لا يوجد حالياً أي تعليق

تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع :: عالم الاكواد :: اكواد الـ html واكواد css موحدة لجميع النسخ-