فواصل » css

كود css لتغيير شكل ازرار الموقع

مدهش — Sat, 21 Jan 2012 14:24:29 +0000

السلام عليكم ورحمة الله وبركاته

الكود متوفر له نوعان :

1-لمن يريد تطبيق الكود فقط على الأزرار .
2-لمن يريد تطبيق الكود على الأزرار و الفراغات .

مثال :

الطريقة :

1-افتح لوحة تحكم المنتدى

2-اختر من الستايل اللي تستخدمه “CSS رئيسي”

3-في نهايته يوجد مربعين كبيرين عند الخيار “تعاريف CSS الإضافية/Additional CSS
Definitions”

4- ضع في المربع الثاني الكود التالي :

*لمن اراد التطبيق على الازرار فقط :

رمز Code:

 .button::-moz-focus-inner{
    border:0;
}

.button:focus, .button:hover{
    outline:0;
    border-color:#999;
    -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    cursor:pointer;
    cursor:hand;
}

.button:active{
    background-image:-moz-linear-gradient(top,#cccccc,#ffffff);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC, endColorStr=#FFFFFF)";
}

.button{
    float:none;
    outline:none!important;
    margin:0;padding:0px 6px;
    height:25px;background-color:#f6f6f6;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-image:-moz-linear-gradient(top,#ffffff,#efefef);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
}

* لمن اراد التطبيق على الازرار والفراغات :

رمز Code:

input::-moz-focus-inner{
    border:0;
}

input:focus, input:hover{
    outline:0;
    border-color:#999;
    -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    cursor:pointer;
    cursor:hand;
}

input:active{
    background-image:-moz-linear-gradient(top,#cccccc,#ffffff);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC, endColorStr=#FFFFFF)";
}

input{
    float:none;
    outline:none!important;
    margin:0;padding:0px 6px;
    height:25px;background-color:#f6f6f6;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-image:-moz-linear-gradient(top,#ffffff,#efefef);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
}

تحياتي لكم

جميع صفحاتك انشرها بتقنية css

برستيجً فنآنً — Tue, 10 Jan 2012 15:23:55 +0000

السلام عليكم و رحمة الله و بركاته

[إسم الكود]: إنشر جميع صفحاتك !! بتقنية CSS
[وصف الكود]: يقوم بنشر جميع صفحات موقعك في تويتر و فاسيبوك و قوقل بلس و العديد من خدمات addthis
[توافق الكود]: 3.8 و ما يتبعها
[مثال على الكود]:http://www.tounesna.ce.ms

طريقة التركيب
ضع هذا الكود في آخر قالب الفوتر أو قالب النافبار

كود:

شارك أصحابك

و ضع هذا الكود في تعاريف CSS الإضافية

كود:

.semoo { background: none repeat scroll 0 0 #F9FBFC; border: 1px solid #D7DEE3; border-radius: 8px 8px 8px 8px; color: #7F663A; font-size: 11px; line-height: 20px; padding: 5px 14px; text-align: right; }

و ها هو مثال مصور

بالتوفيق للجميع

هاك لتعديل شكل المرفقات بتقنيه css

برستيجً فنآنً — Tue, 10 Jan 2012 13:03:22 +0000

هاك لتعديل شكل المرفقات بتقنيه CSS

منتج بسيط مع تعديل في قالبي الـ postbit و الـ postbit_legacy .

#—- معلومات المنتج —-#
[ اسم المنتج ] : منتج تحسين شكل المرفقات بخاصية الـ CSS
[ وصف المنتج ] : يقوم المنتج بتحسين شكل المرفقات الإفتراضي بخاصية CSS
[ يتوافق مع اصدار ] : 3.8
[ موقع المبرمج ] :

مثال للمنتج :
صورة لمرفق واحد فقط :

صورة لمرفقات متعددة :

طريقة التركيب :

قم برفع الصوره (icon-dl.png) الى مجلد الصور الرئيسي images.
ومن ثم قم برفع المنتج من لوحة تحكم الادارة .,

بعدها اذهب الى القوالب ..

وقم بعمل الخطوات التالية في كل من:
1. قالب الـ postbit
2. قالب الـ postbit_legacy

ابحث عن :

كود PHP:

  



$vbphrase[attached_files]



$post[otherattachments]

واستبدلها بـالتالي :

كود PHP:

  

$post[otherattachments]

إنتهى .,

التحميل من الموضوع الاصلي من هنا : هاك لتعديل شكل المرفقات بتقنيه css

اذا واجهتكم اي مشاكل بالمنتج بإمكانكم طرحها بهذا الموضوع وراح يتم الرد عليها باذن الله باقرب وقت ممكن ..

العرض المستمر وتدوير المحتوي باستخدام JS,CSS

مدهش — Sat, 07 Jan 2012 19:44:19 +0000

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

لتحميل السكريبت اضغط هنـــــــــا

لإلقاء نظره علي العض المستمر للمحتوي اضغط هنـــــــــــا

أولا قم بوضع النص هنا علي هذا الشكل

[html]

… if you want to become a better coder you need to eat your vegetables?

… it takes more time to code a web page then to make a pizza?

… you should validate your code?

… jQuery is your friend? For real!

… no matter what some people claim, you can’t learn CSS in 3 hours?

[/html]

وقم بإضافة هذا التنسيق

[html] #tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:250px;
font-size:16px;
line-height:120%;
}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* hide the items at first only */
}
[/html]

الفقرات سوف تكون مقسمه وسوف تحفظ في مكان ما علي السيرفير وسوف يتم عرضها بالترتيب عليك ان تقوم بإضافه كود الجافا كويري هذا

[html]
[/html]

وطبعا قم بإضافة هذا الكود الذي يقوم بوظيفة العرض بطريقة عشوائية ودوريه :

[html]
[/html]

اليك الكود كاملا:

[html]
[/html]

وهذا هو التنفيذ عليك بالضغط هنـــــــــا

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

درس عمل اسلايدرعارض الصور المتحركة slideslider

مدهش — Wed, 04 Jan 2012 22:47:36 +0000

هناك الكثير من تقنيات العرض في الجافا سكريبت، ولكن لاحظ هذا الموقع  McKinney وكيفية الحركه عليه بمنتهي السلاسه.
عارض الشرائح - (جي كويري سلايدر):
لمشاهده التنفيذ اضغط هنا

لنبدأ معا في عمل هذا السلايدر أولا علينا إضافة بعض الملامح الأساسيه وهي عملdiv لكل شريحه وتسميتها بإسمها كالتالي:
[html]



Slide 1


Slide 2


Slide 3


Slide 4


Slide 5


Slide 6



[/html]
قمنا بعمل الأن ستة شرائح والتي يمكن ملئها بأي محتوي نريده ولاان نضيف التالي في ملف css :
[html]
#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}
[/html]
هنا، لقد حددنا أبعاد العرض، جنبا إلى جنب مع إخفاء الشرائح الأخرى في بكرة. لقد حددنا أيضا أبعاد البكرة : مع ست شرائح في 900 بكسل لكل منهما ، وحددنا الأبعاد لكافة الشرائح الفردية وقمت بتحريكهم الي اليسار لكي تملأ شاشه السلايدر.
الحركة الأساسية في عارض الصور:
والأن لنضيف بعض أكواد الجي كويري لإضافة تأشير الحركة علي عارض الصور
[html]
$(function() {
    function changeSlide( newSlide ) {
        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1;

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
قمنا بعمل دالة changeSlide () ، التي تقوم بتغير الشريحه. هذه الدالة لعمل فهرس للشريحه بجوار المعرض،
ثانيا قمنا بعمل فحص للتأكد من أن قيمة الشريحه التاليه ليست عالية جدا أو منخفضة لتكون في العارض.
وقمنا ببناء دالة nextSlide () ، الذي يطلق ببساطة changeSlide () لعرض الشريحة التالية في البكرة. ثم قمنا بتحديد وقت العرض مع setTimeout ().
التحريك الي اليمين والي اليسار:
والأن نقوم بعمل أزرار التحريك الي اليمين والي اليسار وزر متابعة العرض
[html]


[/html]
وللتبسيط،لقد قمنا بإضافة علامة المتابعة إلى مصدر HTML.
لنقوم الأن بإضافة التأثيرات الخاصه بهذه اللينكات الداخليه لعرض السابق او التالي
[html]
#slideshow-prev, #slideshow-next {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

#slideshow-prev:hover, #slideshow-next:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-prev {
    left: 0;
    border-right-color: #fff;
}

#slideshow-next {
    right: 0;
    border-left-color: #fff;
}
[/html]
أخيرا، دعونا نبني ملف الجافا سكريبت لدينا:
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNexNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
في هذه الدوال ، قمنا بعمل activeSlideshow إلى false ، مما يؤدي إلى تعطيل الحركة التلقائية للبكرة. وهذا يوفر تجربة أفضل للمستخدم من خلال السماح للمستخدم التحكم بالعرض يدويا. ثمقمنا بعمل تحريك الشريحة السابقة أو التالية باستخدام changeSlide (). ثم قمنا بعمل clearTimeout (). هذا يعمل جنبا إلى جنب مع القيمة activeSlideshow، أي إلغاء التكرار يتدلى من setTimeout.

ثم قمنا بتعريف بعض الرموز لإخفاء وإظهار التنقل من خلال السهم.
لتحريك عارض الصور من أسفل:
وهذا هو الكود الجي كويري
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNextNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( $(this).index() );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
أولا، لقد قمنا بتضمين الرسوم المتحركة الثانية في changeSlide ()، وهذه المرة لتحريك المؤشر النشط في الملاحة، ثم كررنا الخطوة السابقه والفرق الرئيسي هو أننا نريد أن نقله 150px فقط لكل شريحة.

ثم قمنا بعمل  تعطيل الحركة التلقائية، وتحديد activeSlideshow إلى false.، وأضفنا changeSlide ()،
والأن إكتملت الحركة الملاحية لدينا وأصبح عارض الصور جاهز لينول إعجاب الزوار