P30-ART


ارسال موضوع ارسال پاسخ
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
کد تماس با ما کاملا حرفه ای
نویسنده پیام
کاربر فعال
***

ارسال‌ها: 63
تاریخ عضویت: فروردین 1393
اعتبار: 3
وضعیت : آفلاین
جنسیت:
سپاس ها 20
سپاس شده 51 بار در 26 ارسال
ارسال: #1
کد تماس با ما کاملا حرفه ای
[size=13px][size=13px]امروز هم با یکی دیگر از کد حرفه ای در خدمت کاربران عزیز هستیم این کد تماس با ما کاملا حرفه ای بوده و دارای امکانی بسیار جالب است که میتوانید در دمو مشاهده کنید البته لازم به ذکر است که کاربر می تواند به سلیقه خود در جای های مختلف قالب خود استفاده کند مثلا در قسمت تماس با ما و یا در قسمت نظرات و ... امیدوارم قابل رضایت شما عزیزان باشد .
 
[size=13px][تصویر:  webca.ir-tamas.jpg]
کد:
<style> form div.dynamiclabel{ /* div container for each form field with pop up label */ display: block; margin: 30px; font: 16px; position: relative; } form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{ width: 320px; padding: 10px; border: 1px solid #c3c3c3; border-radius: 7px; } form div.dynamiclabel textarea{ height: 200px; } form div.dynamiclabel label{ /* pop up label style */ position: absolute; left: 0; background: lightyellow; border: 1px solid yellow; border-radius: 2px; padding: 3px 10px; box-shadow: 4px 1px 5px gray; font-weight: bold; -webkit-backface-visibility: hidden; top: 10px; /* initial top position of label relative to dynamiclabel container */ -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */ -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; z-index: -1; } form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */ border: 1px solid #45bcd2; box-shadow: 0 0 8px 2px #98d865; } form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */ opacity: 1; z-index:100; top: -35px; /* Post top position of label on focus relative to dynamiclabel container */ -ms-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } </style> <form> <div class="dynamiclabel"> <input id="name" placeholder="Name" type="text"> <label for="name">Name</label> </div> <div class="dynamiclabel"> <input id="email" placeholder="Email Address" type="text"> <label for="email">Email Address</label> </div> <div class="dynamiclabel"> <textarea id="feedback" placeholder="www.webca.ir"></textarea> <label for="feedback">متن پیام </label> </div> </form>

 

02-23-1393 04:47 ب.ظ
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Amir Rezaei ، ARASHDMA ، admin ، sajjad ، shokolati
ارسال موضوع ارسال پاسخ


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان