معاينة النص بتقنية الjQuery

22‏/07‏/2010





السلام عليكم و رحمة الله و بركاته
 
أخواني الكرام
 
سنبدأ بإذن الله بموضوع مميز  عن تأثيرات ال css

استخدام css لصنع مؤثرات مختلفة على النصوص

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

  وذلك باستخدام التقنيات الوسمية التي توفرها لنا ال css

 و لا ننسى تقنية ال jquery

  راقب الأمثلة أدناه. 














بحيث لو تمعنت جيدا اخي الكريم


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



1- من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم  ثم تصميم اختر تحرير html



2- قم بحفظ نسخة من قالب مدونتك .



3- اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :







]]></b:skin>



- ثم مباشرة قبل الكود السابق قم بنسخ و لصق الكود التالي :





<style type="text/css">

{

    margin:0;

    padding:40px;

    background:#fff;

    font:80% Arial, Helvetica, sans-serif;

    color:#555;

    line-height:180%;

}



h1{

    font-size:180%;

    font-weight:normal;

    color:#555;

}

h2{

    clear:both;

    font-size:160%;

    font-weight:normal;

    color:#555;

    margin:0;

    padding:.5em 0;

}

a{

    text-decoration:none;

    color:#f30;  

}

p{

    clear:both;

    margin:0;

    padding:.5em 0;

}

pre{

    display:block;

    font:100% "Courier New", Courier, monospace;

    padding:10px;

    border:1px solid #bae2f0;

    background:#e3f4f9;  

    margin:.5em 0;

    overflow:auto;

    width:800px;

}



img{border:none;}

ul,li{

    margin:0;

    padding:0;

}

li{

    list-style:none;

    float:left;

    display:inline;

    margin-right:10px;

}







/*  */



#preview{

    position:absolute;

    border:1px solid #ccc;

    background:#333;

    padding:5px;

    display:none;

    color:#fff;

    }



/*  */

</style>





ثم ابحث عن الكود التالي :





</head>




- ثم مباشرة قبل  أو بعد الكود السابق قم بنسخ و لصق الكود التالي :






<script src='http://blogspacetech.googlecode.com/files/main.js' type='text/javascript'/>
 <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>






شرح كيفية الإستخدام



قم بكتابة تدوينتك بالطريقة المعتادة


و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,



أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة






<a href="http://blogspacetech.blogspot.com/" class="screenshot" rel="http://2.bp.blogspot.com/_jFIsHl5gfpM/TEhouklBnCI/AAAAAAAAAKg/cKQp3Q6tPfU/s1600/beta.thumbalizr.com.png">blogspacetech</a>









طبعا لمن يريد المزيد من المعلومات ...


المصدر