قدمت لنا تقنية لغة CSS3 سى إس إس الإصدار الثالث مزايا وحلولا كثيره وجميلة الشكل ولازالت تقدم لنا الكثير والكثير.
لقد كان المصممون يستخدمون الصور لعمل أشكالا متنوعه ومختلفه فى تصميماتهم للمواقع والمدونات , وكان هذا يعتبر عبئا على وقت تحميل المدونه أو الموقع ويؤثر ايضا على وضع المدونه أو الموقع فى محركات البحث , ولكن مع سى اس اس الإصدار الثالث يمكنك عمل اشكال كثيره وختلفه وبدون الحاجه لوضع صورا , فقط بعض الأكواد البسيطه لتصنع اشكالا جميله .
تستطيع عمل مربع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مستطيل ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل دائره ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل بيضوى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث رأسه لأعلى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث رأسه لأسفل ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث رأسه لليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث رأسه لليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث لأعلى اليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث لأعلى اليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث لأسفل اليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل مثلث لأسفل اليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل سهم تذييل منحنى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شبه منحرف ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل متوازى أضلاع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل نجمه سداسيه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل نجمه خماسيه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل البنتاجون ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل مسدس ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل مثمن ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل قلب ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل علامة اللا نهايه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل مربع ماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل الدرع الماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل المتوازى الماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل الماس المقطوع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل البيضه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل البوكيمون - اكال الجبنه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل فقاعة التحدث ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل انفجار 12 نقطه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل انفجار 8 نقطه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل يين يانج ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل شارة الشريط ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل غزاة الفضاء - سبيس إنفادرز ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
تستطيع عمل شكل شاشة التلفاز ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
فعلا إن العصر القادم للمصممين هو عصر لغة السى إس إس الإصدار الثالث وما يليه من إصدارات تغنينا عن الصور كبيرة الحجم .
لقد كان المصممون يستخدمون الصور لعمل أشكالا متنوعه ومختلفه فى تصميماتهم للمواقع والمدونات , وكان هذا يعتبر عبئا على وقت تحميل المدونه أو الموقع ويؤثر ايضا على وضع المدونه أو الموقع فى محركات البحث , ولكن مع سى اس اس الإصدار الثالث يمكنك عمل اشكال كثيره وختلفه وبدون الحاجه لوضع صورا , فقط بعض الأكواد البسيطه لتصنع اشكالا جميله .
مربع
#square {width: 100px;height: 100px;background: red;}
مستطيل
#rectangle {width: 200px;height: 100px;background: red;}
دائره
#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
شكل بيضوى
#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;}
مثلث لأعلى
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
مثلث لأسفل
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
مثلث لليسار
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
مثلث لليمين
#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
مثلث أعلى اليسار
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
مثلث أعلى اليمين
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
مثلث أسفل اليسار
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
مثلث اسفل اليمين
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
سهم تذييل منحنى
#curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}
شبه منحرف
#trapezoid {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px;}
متوازى أضلاع
#parallelogram {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red;}
نجمه سداسيه
#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
نجمه خماسيه
#star-five {margin: 50px 0;position: relative;display: block;color: red;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);}#star-five:before {border-bottom: 80px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);}#star-five:after {position: absolute;display: block;color: red; top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);content: '';}
شكل البنتاجون
#pentagon {position: relative;width: 54px;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}
شكل مسدس
#hexagon {width: 100px;height: 55px;background: red;position: relative;}#hexagon:before {content: "";position: absolute;top: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;}#hexagon:after {content: "";position: absolute;bottom: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid red;}
شكل مثمن
#octagon {width: 100px;height: 100px;background: red;position: relative;}#octagon:before {content: "";position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;width: 42px;height: 0;}#octagon:after {content: "";position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;width: 42px;height: 0;}
قلب
#heart {position: relative;width: 100px;height: 90px;}#heart:before, #heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;}#heart:after {left: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin :100% 100%;}
شكل علامة اللا نهايه
#infinity {position: relative;width: 212px;height: 100px;}#infinity:before, #infinity:after {content: "";position: absolute;top: 0;left: 0;width: 60px;height: 60px;border: 20px solid red;-moz-border-radius: 50px 50px 0 50px;border-radius: 50px 50px 0 50px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#infinity:after {left: auto;right: 0;-moz-border-radius: 50px 50px 50px 0;border-radius: 50px 50px 50px 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
مربع ماسى
#diamond {width: 0;height: 0;border: 50px solid transparent;border-bottom-color: red;position: relative;top: -50px;}#diamond:after {content: '';position: absolute;left: -50px;top: 50px;width: 0;height: 0;border: 50px solid transparent;border-top-color: red;}
الدرع الماسى
#diamond-shield {width: 0;height: 0;border: 50px solid transparent;border-bottom: 20px solid red;position: relative;top: -50px;}#diamond-shield:after {content: '';position: absolute;left: -50px;top: 20px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}
المتوازى الماسى
#diamond-narrow {width: 0;height: 0;border: 50px solid transparent;border-bottom: 70px solid red;position: relative;top: -50px;}#diamond-narrow:after {content: '';position: absolute;left: -50px;top: 70px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}
الماس المقطوع
#cut-diamond {border-style: solid;border-color: transparent transparent red transparent;border-width: 0 25px 25px 25px;height: 0;width: 50px;position: relative;margin: 20px 0 50px 0;}#cut-diamond:after {content: "";position: absolute;top: 25px;left: -25px;width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 70px 50px 0 50px;}
البيضه
#egg {display:block;width: 126px;height: 180px;background-color: red;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
البوكيمون - اكال الجبنه
#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;}
فقاعة التحدث
#talkbubble {width: 120px;height: 80px;background: red;position: relative;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}#talkbubble:before {content:"";position: absolute;right: 100%;top: 26px;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;}
انفجار 12 نقطه
#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;}#burst-12:before, #burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;}#burst-12:before {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);}#burst-12:after {-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);}
انفجار 8 نقطه
#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20eg);}#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);}
يين يانج
#yin-yang {width: 96px;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;}#yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius:100%;width: 12px;height: 12px;}
شارة الشريط
#badge-ribbon {position: relative;background: red;height: 100px;width: 100px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}#badge-ribbon:before, #badge-ribbon:after {content: '';position: absolute;border-bottom: 70px solid red;border-left: 40px solid transparent;border-right: 40px solid transparent;top: 70px;left: -10px;-webkit-transform: rotate(-140deg);-moz-transform: rotate(-140deg);-ms-transform: rotate(-140deg);-o-transform: rotate(-140deg);}#badge-ribbon:after {left: auto;right: -10px;-webkit-transform: rotate(140deg);-moz-transform: rotate(140deg);-ms-transform: rotate(140deg);-o-transform: rotate(140deg);}
غزاة الفضاء - سبيس إنفادرز
#space-invader{box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red;background: red;width: 1em;height: 1em;overflow: hidden;margin: 50px 0 70px 65px;}
شاشة التلفاز
#tv {position: relative;width: 200px;height: 150px;margin: 20px 0;background: red;border-radius: 50% / 10%;color: white;text-align: center;text-indent: .1em;}#tv:before {content: '';position: absolute;top: 10%;bottom: 10%;right: -5%;left: -5%;background: inherit;border-radius: 5% / 50%;}
فعلا إن العصر القادم للمصممين هو عصر لغة السى إس إس الإصدار الثالث وما يليه من إصدارات تغنينا عن الصور كبيرة الحجم .
موضوع رائع اخ ياسو شكرا لك وفي تقدم مستمر ان شاء الله اخي
ردحذفشكرا ,,, مستمرون بدعمكم
حذفشكرا على الموضوع الرائع ، لقد أعجبني حقا تم إضافته إلى المفضلة :)
ردحذفشكرا افدنى الموضوع جدا
ردحذفهو ده برنامج مثلا يا ياسر ولا مجرد اكواد :)
ردحذفhttp://bit.ly/VdRmsf