السلام عليكم
الكثير من المواقع الـWeb2
يكون فيها أطراف مائله
كما في هيدر في هذا الموقع كيف يمكن عملها
9down.com
?
| |
السلام عليكم
الكثير من المواقع الـWeb2
يكون فيها أطراف مائله
كما في هيدر في هذا الموقع كيف يمكن عملها
9down.com
?
هلا اخوي ..
هذي يسموها الـ rounded corners
في العاده تقدر تعملها عن طريقCSS + صور تحدد وضعيتها في الزوايا كخلفيه لطبقه في الي اس اس
بس في طريقه اخرى اكثر احترافيه وهي عن طريق جافا سيكربت ولا تحتاج معها اي صور
http://www.curvycorners.net/
أو
http://www.html.it/articoli/niftycube/index.html
هذا الموقع يظم جمع كل الطرق لعمل الزوايا المقوسه (بالجافا سيكربت او باسي اس اس) مع وضع ميزة كل طريق
http://www.smileycat.com/miaow/archives/000044.php
شكرا أخي -b7-
لكن أنا عندي سكربت أقدر أستعمل
هذي الحركه في الهيدر؟ ولا لكل سكربت طريقة خاصه؟
حبيبي Arabic 101
تقدر تستخدمها بأي مكان تبغاه .. لان الجافا مجرد تسوي له استدعاء في الهيدر فقط والباقي تكتب كود كهذا .. في المكان اللي تبيه . :
http://openrico.org/demos?demo=corner
مكتبة ريكو rico جميلة .. استخدمها .. بسيطه وجميلة من ناحية التصميم ..
لكن لتعلم أن المربعات ذات الاطراف الدائرية .. في ال css و javascript تكون اشكال الحدود في الاطراف حاده وليست ناعمه و غير جميهل كجمال css سأريك موقع جميل جدا ..
http://www.neuroticweb.com/recursos/css-rounded-box/
ماعليك الا أن تضع الالوان .. وهو سوف يعطيك الاكواد ..
أتمنى لك صباح سعيد !
وهذه اضافه وجدا ممتازه وسهلة الفهم
http://www.webreference.com/programm...ers/index.html
شكرا موقع جدا جميل
لكن جربت على سكربت وحالوت أستدعي ملف
لكن CSS
سأحاول على استدعاء ملف الجافا ،
يشرفني ردك في الموضوع
لكن لماذا دائما يوجد ملفين
XHTML
وملف
CSS
أو
جافا؟
وملف الـXHTML
لايوجد فيه غير أسطر لنوع الخطوط إلخ؟
هلا اخي
في الاصل ال css تكتب داخل وسم style
وسم style يكون داخل وسم head ويتم وضع ال css بداخله
مثلا
اذا من المثال السابق ترى وسم style بين وسم head وتضع ال css في هذه المنطقهكود:<html dir="rtl"> <head> <title> عنوان الصفحه </title> <style type="text/css"> هنا يتم وضع خصائص ال css </style> </head> <body> هنا يتم وضع الكود لعرض ال css والافضليه وضعها في div كما سترى في المثال التالي </body> </html>
* الجافا ليس له دخل هنا ابدا
عند وجود ملف html او xhtml ووجود ملف اخر css هذا يعني ان خصائص ال css ليست مكتوبه في نفس الصفحه وانما هي ملف خارجي تقوم باستدعاءه في صفحة العرض بالكود التالي :
الامر هذا يكتب بين وسم <head>كود:<link rel="stylesheet" type="text/css" href="MyStyle.css" id="MyStyle" />
الان ملف ال css الذي يسمى MyStyle.css هو ملف يحتوي فقط على الخصائص تضعه في موقعك
وتضع هذا الامر في الصفحه التي تريد استعمال هذه الخصائص فيها
الفائده : لن تقوم بكتابة ال css في كل صفحه في موقعك مما يكبر حجم الصفحه
تقوم باستدعاءه مره واحده وبعد ذلك سوف يكون في الاصل على جهاز الزائر ولن يتم تحميله مره اخرى فقد قرأ اصلا
اذا الفائده هي السرعه وتقليل الحجم
اذا الملخص :
هناك طريقتين لعرض ال css style
1: اما ان تكتب في نفس الصفحه بين وسمي head داخل وسم style
2: ان تكتب بملف .css وتحفظ على الموقع ويتم استدعاءها بوسم link داخل الصفحه
وهذا مثال للحدود من الصفحه التي ذكرتها لك سابقا
عدلته لك حتى تفهمه اكثر
انسخه وضعه في الـ Notepad واحفظه باسم file.htmlكود:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" dir="rtl"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1256" /> <title>;; TITLE ;;</title> <style type="text/css"> body { background:#e0e0e0; } .raised {background: transparent; width:40%;} .raised h1, .raised p {margin:0 10px;} .raised h1 {font-size:2em; color:#fff;} .raised p {padding-bottom:0.5em;} .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;} .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;} .raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;} .raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;} .raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;} .raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;} .raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;} .raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;} .raised .b1 {margin:0 5px; background:#fff;} .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;} .raised .b3, .raised .b3b {margin:0 2px;} .raised .b4, .raised .b4b {height:2px; margin:0 1px;} .raised .b1b {margin:0 5px; background:#999;} .raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;} </style> </head> <body> <div class="raised"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>مثال</h1> <p>التفاف الحدود في css مع ظهور الحدود بشكل خارجي باكثر من لون</p> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div> <p></p> </body> </html>
لاحظ انه لايوجد لا جافا ولا ملف css خارجي
اخي اعتقد ان موضوعي اللي كتبته من قبل سيوضح لك ابسط الطرق رغم انه يوجد طرق عديدة جدا
http://www.swalif.net/softs/swalif54/softs200743/
الموضوع بسيط جدا اقرا الموضوع سوف يساعدك في امور اخرى ايضا لاني واجهت نفس مشاكلك بالضبط
فيه مواقعك تعطيك الكود جاهز .. والصور جاهزة
بالتوفيق
__________________
ليث الخليلي .. موقعي القديم ( خلفيات شاشة - تحويل - الغاز - تفسير احلام - الشرس ).
الله يعطيكم العافيه
__________________
سبحان الله و الحمد لله و لا إله الا الله و الله أكبر
موضوع شيق ..
__________________
لو أعلم أن لقياك يقتلني ... لأحضرت عند اللقاء أكفاني.
و لو أعلم أن الحلم فيك يجمعني ... لأغمضت طول الدهر أجفاني.
هذا الموقع تحفة ومميز جدا لعمل الحواف الدائرية / http://www.roundedcornr.com/
به الكثير من الخيارات ...
__________________
كتوم في المصنع {...}
ضوابط المشاركة
رد مع اقتباس