sir1 512 ارسال شده در آبان 99 گزارش بازنشر ارسال شده در آبان 99 (ویرایش شده) با سلام این امکان وجود داره که pure css زیر را برای باکس دانلود در سایت وردپرس انجام داد؟ https://codepen.io/Rplus/pen/lEDBj کد و اسکرین باکس مورد نظر در سایتم: کد: { $html .='<div class="mrbox">'; $html .='برای دیدن لینک دانلود در سایت ثبت نام و اکانت خود را ویژه کنید <br>'; $html .='<a class="lrm-switch-to--register" href="#0" style="-webkit-box-shadow: inset 0px 1px 0px 0px #2c88f8; background: linear-gradient(to bottom, #e40044 5%, #fe487e 100%); border-radius: 6px; display: inline-block; color: #ffffff; font-size: 14px; font-weight: bold; padding: 6px 24px;">ورود یا ثبـــت نــــام + اکــانت Vip</a>'; $html .='</div>'; } اسکرین و لینک بخش مورد نظر در سایتم: https://en.acgih.ir/?p=31037 ویرایش شده آبان 99 توسط sir1 نقل قول لینک به ارسال
sir1 512 ارسال شده در آبان 99 مالک گزارش بازنشر ارسال شده در آبان 99 با سلام مجدد. این کارو انجام دادم https://codepen.io/acgih/pen/bGeYJVR ولی فقط وقتی width و height را که 200px هستند تغییر میدم افکت کار نمیکنه. میشه راهنمایی کنید که چطور بدون width و height افکت کار کنه و در مبایل و دسکتاپ عرض و ارتفاع اتوماتیک تنظیم بشه و ریسپانسیو باشه؟ نقل قول لینک به ارسال
sir1 512 ارسال شده در آبان 99 مالک گزارش بازنشر ارسال شده در آبان 99 دمو اصلی به صورت زیر است: https://codepen.io/Rplus/pen/lEDBj اخرین باره که این پست بالا میاد. اگر کسی css میدونه لطفا راهنمایی کنه نقل قول لینک به ارسال
asadiy4n 2807 ارسال شده در آبان 99 گزارش بازنشر ارسال شده در آبان 99 سلام همون داخل خودش که میتونستید تبدیل به css کنید <div class="bb"></div> css .bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { width: 200px; height: 200px; margin: auto; background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1); color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .bb::before, .bb::after { content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .bb::before { animation-delay: -4s; } .bb:hover::after, .bb:hover::before { background-color: rgba(255, 0, 0, 0.3); } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } html, body { height: 100%; } body { position: relative; background-color: #0f222b; } *, *::before, *::after { box-sizing: border-box; } 2 نقل قول لینک به ارسال
sir1 512 ارسال شده در آبان 99 مالک گزارش بازنشر ارسال شده در آبان 99 در 3 دقیقه قبل، asadiy4n گفته است : سلام همون داخل خودش که میتونستید تبدیل به css کنید <div class="bb"></div> css .bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { width: 200px; height: 200px; margin: auto; background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1); color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .bb::before, .bb::after { content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .bb::before { animation-delay: -4s; } .bb:hover::after, .bb:hover::before { background-color: rgba(255, 0, 0, 0.3); } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } html, body { height: 100%; } body { position: relative; background-color: #0f222b; } *, *::before, *::after { box-sizing: border-box; } این کد css اصلی است میخام ویرایش بشه و در حالت width:100% کار کنه. نقل قول لینک به ارسال
sir1 512 ارسال شده در آبان 99 مالک گزارش بازنشر ارسال شده در آبان 99 بالاخره درست کردم. فقط یک مورد مونده که اونم فاصله افکت از باکس دانلود است. با قرار دادین margin:-20px به استایل زیر فاصله از جعبه دانلود ایجاد میشه ولی افکت مخفی میشه: .bb span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right,#4a88f8,#4a88f8); animation: animate1 3s linear infinite; margin: -20px; } نمونه کار خودم: https://codepen.io/acgih/pen/yLJKxzX دمو که دارای فاصله هست: https://codepen.io/wendave/pen/rJZRQZ نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .