ازارا بتقنية 3d css مميزة جداً
| إدارة الموقع | | المشاركات : 7659
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
|
موضوع: ازارا بتقنية 3d css مميزة جداً |
السلام عليكم ورحمة الله وبركاته كيف الحال ؟ ان شاء الله الكل التمام . اقدم لكم اليوم ، ازرار مميزة بتقنية css معاينة مباشرة الكود HTML - الكود:
-
<nav class="container"> <ul> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Work</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </nav> والاهم CSS - الكود:
-
.container { margin: 100px auto; width: 500px; text-align: center; }
.nav-item { padding: 3px; background: rgba(0, 0, 0, 0.01); border-radius: 4px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15); }
.nav-link { display: block; line-height: 27px; width: 100px; font-size: 12px; color: white; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); background: #7e929b; border: 1px solid; border-color: #c2ccd1 #9cacb2 #91a2aa; border-color: #c2ccd1 rgba(255, 255, 255, 0.1) #91a2aa; border-radius: 3px; background-image: -webkit-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%); background-image: -moz-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%); background-image: -o-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%); background-image: linear-gradient(to bottom, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%); }
.nav-link:hover { background: #a8bdc7; border-color: #e3eaed #d3dee3 #cedadf; background-image: -webkit-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%); background-image: -moz-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%); background-image: -o-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%); background-image: linear-gradient(to bottom, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%); }
.nav-link:active { padding: 1px; background: #8c9da5; border: 0; background-image: -webkit-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%); background-image: -moz-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%); background-image: -o-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%); background-image: linear-gradient(to bottom, #5f7681 0%, #8c9da5 45%, #9dabb1 100%); }
مبروك للجميع واي سؤال انا موجود ان شاء الله دعم شباب - تصفح ممتع |
|