السلام عليكم ورحمة الله وبركاته
مع ظهور css3 أصبح بإمكاننا تصميم مواقع الانترنت بسهولة أكبر وبميزات جديدة
ومن هذه الميزات أنه يمكننا إنشاء خلفيات مع ألوان متدرجة وليس لون واحد فقط
وذلك بدون استخدام صور فبعد اليوم لا عناء مع تقطيع الصور وإنشائها بالفوتوشوب
المتصفحات التي تدعم css 3
على الرابط التالي تجدون جدولاً فيه كامل خصائص css3 والمتصفحات التي تدعم كل خاصية
CSS3 Reference
وكخلاصة للدعم يمكننا أن نقول أن المتصفحات firefox, google chrome, safari بإصداراتها الأخيرة هي الأكثر دعماً
يليها oprea و أخيراً internet explorer ( لكن في إصداره الجديد 10 أصبح يدعمها بشكل كبير )
وفيما يلي مقطع فيديو باللغة العربية لدرس توضيحي عن إنشاء التدرجات
وأيضاً أقدم لكم موقعأً رائعاً جداً ومفيداً للحصول على الكود
حيث أنك ستعمل وكأنك داخل الفوتوشوب ومن ثم انسخ الكود
رابط الموقع:
Ultimate CSS Gradient Generator - ColorZilla.com
مثال كيف تضع الكود:
كود PHP:<style type="text/css"> .x{ background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgog ICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZm ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcG FjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3Rv cC1jb2xvcj0iI2UxZTFlMSIgc3RvcC1vcGFjaXR5PSIxIi8+Ci AgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNm NmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEi IGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZX JhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-8 */ width:100px; height:32px; vertical-align:middle; text-align:center; padding-top:10px; text-shadow:1px 1px 2px white; font-size:18px; font-family:tahoma; -moz-border-radius:5px; border:solid thin gray; { </style> <div class="x">Tahasoft</div>
رد مع اقتباس
