آذر ۱۴, ۱۳۹۷ Mostafa بدون دیدگاه

اگر دنبال برنامه نویس برای ساخت افزونه ،قالب،سایت،برنامه ویندوز،اپلیکیشین اندروید،ربات تلگرام و.... هستید ،سفارش برنامه نویسی را مطالعه نمایید.

توجه : درخواست افزونه ،قالب، اسکریپت و نرم افزار و ... و سوالات و مشکلات خود را در انجمن ارسال نمایید

در این ترفند نمونه کد برچسب پاپ آپ برای فرم های HTML را برای شما دوستان عزیز قرار می دهم که می توانید با این ترفند زیبایی خاصی به فرم های صفحات وب خود بیافزایید.

نمونه فرم :




کد CSS :

form div.pctrickslabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
  font: 16px;
  position: relative;
}

form div.pctrickslabel input[type="text"], form div.pctrickslabel textarea{
  width: 320px;
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}

form div.pctrickslabel textarea{
  height: 200px;
}

form div.pctrickslabel 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 pctrickslabel 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.pctrickslabel > *:focus{ /* when user focuses on child element inside div.pctrickslabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}

form div.pctrickslabel > *:focus + label{ /* label style when user focuses on child element inside div.pctrickslabel */
  opacity: 1;
  z-index:100;
  top: -35px; /* Post top position of label on focus relative to pctrickslabel container */
  -ms-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

 

کد HTML :

<form>
  <div class="pctrickslabel">
    <input id="name" placeholder="نام" type="text">
    <label for="name">نام</label>
  </div>

  <div class="pctrickslabel">
    <input id="email" placeholder="پست الکترونیکی" type="text">
    <label for="email">پست الکترونیکی</label>
  </div>

  <div class="pctrickslabel">
    <textarea id="message" placeholder="پیام"></textarea>
    <label for="message">پیام</label>
  </div>
</form>

 


برچسب ها
نظرات

توجه : لطفاً فقط نظرات خود را از این طریق ارسال نمایید و سوالات و مشکلات خود را در انجمن سایت مطرح نمایید.