101 خط لمصممي المواقع

السلام عليكم 

اتيت لكم ب 101 خط مجاني 

لرؤية الخطوط من هنا:http://www.webdesignerdepot.com/2014/05/101-essential-free-fonts-for-web-designers/

قوالب responsive(للكمبيوتر والجوال) مجانية وجميلة

الأول

Download: http://w3layouts.com/hostcompare-cloud-hosting-flat-responsive-mobile-website-template

Download: http://w3layouts.com/ascend-ecommerce-responsive-mobile-website-template

Download: http://w3layouts.com/minima-freebiesxpress-mobile-website-template

Download: http://w3layouts.com/organic-corporate-responsive-mobile-website-template

Download: http://w3layouts.com/perth-flat-responsive-design-mobile-website-template

البحث داخل جدول عن طريق الjquery

السلام عليكم ورحمة الله وبركاته
اليوم اتيت لكم بطريقة عمل جدول به خاصية البحث عن طريق الjquery 
مثال على الدرس Table Filter Bootstrap + Jquery - JSFiddle
طبعا الدرس يحتاج انك تعرف BOOTSTRAP 

اذا كنت لاتعرف bootstrap ممكن انك تتعلمه عن طريق http://www.youtube.com/watch?v=-rct0ZvmX5M
او انك تاخذ الكود كامل من ديه الصفحة [HTML 5] الكود كامل لطريقة البحث داخل الجدول عن طريق الjquery - Pastebin.com نسخ لصق

الطريقة انك تضع كود الhtml هذا داخل كود الbootstrap

رمز PHP:

<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>  

وتضع ده الكود داخل الjquery

رمز PHP:

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});  

وبهذا يكون الكود كامل كده
[HTML 5] الكود كامل لطريقة البحث داخل الجدول عن طريق الjquery - Pastebin.com

وللمزيد من الدروس :دوروسانيا

فلاتر على الصور بالCSS3

السلام عليكم اليوم اتيت لكم بفلاتر على الصور بال

CSS3 فقط
هنا امثلة مع الكود تبعها

http://demo.hongkiat.com/css-filter/index.html


ولتحميل الأمثلة

قائمة responsive (تتناسب مع جميع الشاشات بجميع الأحجام)

اليوم اتيت لكم بقائمة تتناسب مع جميع الشاشات بجميع الأحجام (Responsive)

responsive menu

المثال من هنا :Responsive Design with CSS
التحميل من هنا :9lessons Download Scripts
الدرس كامل من هنا:Responsive Web Design for Menu, Image and Advertisements
المصدر موقع رائع ويحوي دروس رائعة من هنا:9lessons Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

مقياس صعوبة كلمة المرور(password)

طريقة الإستخدام :

1-تحمل الإضافة من زر download
2- ننشئ ملف html ونضع فيه الكود التالي:

<script type="text/javascript" src="/js/jquery.complexify.js"></script>

<script type="text/javascript">

  $("#password").complexify(options, callback(valid, complexity){

    alert("Password complexity: " + complexity);

  });

</script>

<input type="text" id="password" />



3-طريقة استخدام الكود هو انشاء input ونغير الid 

<input type="text" id="هنا" /> 

 ونحطه اسم ونحط في كود الجافا سكربت اللي فوق 

  $("#هنا").complexify(options, callback(valid, complexity){

سلايد لعرض الصور بطريقة مميزة

لعرض الصور بطريقة اكثر من ابداع

اليوم أتيت لكم بطريقة لعرض بنظام الألبومات يعني كل صورة غلاف لمجموعة صور رائعة جدا جربها ولن تندم

المصدر من هنا

تأثيرات جبارة للقوائم المنسدلة

اليوم اتيت لكم بتأثيرات جبارة وخطيرة للقوائم المنسدلة جربها وستعجبك إن شاء الله

للتجربة والتحميل من هنا:

تأثير 3D عند سحب السكرول(السحاب)

اليوم اتيت لكم بتأثير عند سحب السحاب جميل و3D جربه وسيعجبك إن شاء الله

للجربة والتحميل من هنا 

كيفية عمل ليبل جميل مثل الذي بالصورة

كيفية عمل مثل الذي بالصورة تابع معي:
أول شي نضيف أكواد الhtml هذه

تأثير جميل جدا للصور

اليوم أتيت لكم بتأثير جميل جدا على الصور للتجربة والتحميل من هنا:

لطريقة الإستخدام والمصدر من هنا دوروسانيا

كود بحث عن طريق الصوت مثل قوقل

اليوم أتيت لكم بكود البحث عن طريق الصوت مثل قوقل تقدر تضيفه الى موقعك

عرض اكثر من رائع عرض الكتب بطريقة ال3d

اليوم جأت لكم بطريقة رائعة جدا لعرض الكتب 3d وللتجربة والتحميل

سلايد الأوراق المتطايرة جميل جداً

سلايد الأوراق المتطايرة 

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

إضافة تجعل الصور في موقعك تتلائم مع جميع الشاشات(make them responsive)

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

تأثير الورق المطوي على الصور تأثير جميل وابداع

تأثير الورق المطوي تأثير جميل جدأ ويضفي جمالا على موقعك 

للتجربة من هنا دوروسانيا      وللتحميل من هنا دوروسانيا

أزرار css3 مميزة وجميلة

السلام عليكم ورحمة الله وبركاته 
انا اليوم جايبلكم ازرار ابداع وحلوة بكل تأثيراتها يعني الزر عند
المرور عليه وعند الضغط وعند التعطيل
وشوفو الصور 

بأحجام مختلفة

كل ماعليك الا ان تحمل الكود من المرفقات وتضع بوتون

رمز PHP:

<button class="small button">زر صغير </button>
<button class="largebutton">زر كبير</button>  

وبألوان مختلفة

تحمل من المرفقات وتضع الكود ده بالhtml

رمز PHP:

<button class="button">Button</button>
<button class="color red button">زر لونه احمر</button>
<button class="color green button">زر لونه اخضر</button>
<button class="color blue button">زر لونه ازرق</button>  

أزرار disabled

رمز PHP:

<button class="button" disabled>Button</button>
<button class="color red button" disabled>زر أحمل</button>
<button class="color green button" disabled>أخضر</button>
<button class="color blue button" disabled>أزرق</button>  

مجموعة أزرار

رمز PHP:

<ul class="button-group">
    <li><button class="button">Button</button></li>
    <li><button class="button">Button</button></li>
    <li><button class="button">Button</button></li>
    <li><button class="button">Button</button></li>
</ul>  

ومن هنا لتجربة الأزرار CSS3 patterned buttons demo - RedTeamDesign
وللتحميل من هنا http://www.mediafire.com/?lrhl38dbeg0jggc