Kredi kartı formunu css ile düzenlemek istiyorum
6
●104
- 29-12-2021, 12:39:05Codepen de buna benzer bir çok örnek var oradan html css js bakabilirsiniz.
Örnek bi tasarım;
https://codepen.io/quinlo/pen/YONMEa - 29-12-2021, 13:06:26denedim bunları hiç biri işlemediaozfen adlı üyeden alıntı: mesajı görüntüle
- 29-12-2021, 23:54:56
- 30-12-2021, 02:17:46tasarım mükemmel ; özelleştirden yapıştırdım olmadı tam olarak nereye atmam gerekiyor css kodlarını ?yilmazahmet adlı üyeden alıntı: mesajı görüntüle
- 30-12-2021, 21:21:36Kullanmadığınızı varsayarak kodu buraya bırakıyorum sayfanıza yeni bir css dosyası olarak ekleyin.yilmazahmet adlı üyeden alıntı: mesajı görüntüle
*, *::before, *::after {box-sizing: border-box;}html, body {min-height: 100%;font-family: 'Open Sans', sans-serif;}body {background: linear-gradient(50deg, #f3c680, rgba(161, 227, 226, 1));}/*-------------------- Buttons --------------------*/.btn {display: block;background: #bded7d;color: #fff;text-decoration: none;margin: 20px0;padding: 15px15px;border-radius: 5px;position: relative;}.btn::after {content: '';position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;transition: all0.2sease-in-out;box-shadow: inset03px0rgba(0, 0, 0, 0), 03px3pxrgba(0, 0, 0, .2);border-radius: 5px;}.btn:hover::after {background: rgba(0, 0, 0, 0.1);box-shadow: inset03px0rgba(0, 0, 0, 0.2);}/*-------------------- Form --------------------*/.formfieldset {border: none;padding: 0;padding: 10px0;position: relative;clear: both;}.formfieldset.fieldset-expiration {float: left;width: 60%;}.formfieldset.fieldset-expiration.select {width: 84px;margin-right: 12px;float: left;}.formfieldset.fieldset-ccv {clear: none;float: right;width: 86px;}.formfieldsetlabel {display: block;text-transform: uppercase;font-size: 11px;color: rgba(0, 0, 0, .6);margin-bottom: 5px;font-weight: bold;font-family: Inconsolata;}.formfieldsetinput, .formfieldset.select {width: 100%;height: 38px;color: #333;padding: 10px;border-radius: 5px;font-size: 15px;outline: none!important;border: 1pxsolidrgba(0, 0, 0, 0.3);box-shadow: inset01px4pxrgba(0, 0, 0, 0.2);}.formfieldsetinput.input-cart-number, .formfieldset.select.input-cart-number {width: 82px;display: inline-block;margin-right: 8px;}.formfieldsetinput.input-cart-number:last-child, .formfieldset.select.input-cart-number:last-child {margin-right: 0;}.formfieldset.select {position: relative;}.formfieldset.select::after {content: '';border-top: 8pxsolid#222;border-left: 4pxsolidtransparent;border-right: 4pxsolidtransparent;position: absolute;z-index: 2;top: 14px;right: 10px;pointer-events: none;}.formfieldset.selectselect {appearance: none;position: absolute;padding: 0;border: none;width: 100%;outline: none!important;top: 6px;left: 6px;background: none;}.formfieldset.selectselect:-moz-focusring {color: transparent;text-shadow: 000#000;}.formbutton {width: 100%;outline: none!important;background: linear-gradient(180deg, #49a09b, #3d8291);text-transform: uppercase;font-weight: bold;border: none;box-shadow: none;text-shadow: 01px2pxrgba(0, 0, 0, 0.2);margin-top: 90px;}.formbutton.fa {margin-right: 6px;}/*-------------------- Checkout --------------------*/.checkout {margin: 150pxauto30px;position: relative;width: 460px;background: white;border-radius: 15px;padding: 160px45px30px;box-shadow: 010px40pxrgba(0, 0, 0, .1);}/*-------------------- Credit Card --------------------*/.credit-card-box {perspective: 1000;width: 400px;height: 280px;position: absolute;top: -112px;left: 50%;transform: translateX(-50%);}.credit-card-box:hover.flip, .credit-card-box.hover.flip {transform: rotateY(180deg);}.credit-card-box.front, .credit-card-box.back {width: 400px;height: 250px;border-radius: 15px;backface-visibility: hidden;background: linear-gradient(135deg, #bd6772, #53223f);position: absolute;color: #fff;font-family: Inconsolata;top: 0;left: 0;text-shadow: 01px1pxrgba(0, 0, 0, 0.3);box-shadow: 01px6pxrgba(0, 0, 0, 0.3);}.credit-card-box.front::before, .credit-card-box.back::before {content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url('http://cdn.flaticon.com/svg/44/44386.svg') no-repeatcenter;background-size: cover;opacity: 0.05;}.credit-card-box.flip {transition: 0.6s;transform-style: preserve-3d;position: relative;}.credit-card-box.logo {position: absolute;top: 9px;right: 20px;width: 60px;}.credit-card-box.logosvg {width: 100%;height: auto;fill: #fff;}.credit-card-box.front {z-index: 2;transform: rotateY(0deg);}.credit-card-box.back {transform: rotateY(180deg);}.credit-card-box.back.logo {top: 185px;}.credit-card-box.chip {position: absolute;width: 60px;height: 45px;top: 20px;left: 20px;background: linear-gradient(135deg, #ddccf00%, #d1e9f544%, #f8ece7100%);border-radius: 8px;}.credit-card-box.chip::before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border: 4pxsolidrgba(128, 128, 128, .1);width: 80%;height: 70%;border-radius: 5px;}.credit-card-box.strip {background: linear-gradient(135deg, #404040, #1a1a1a);position: absolute;width: 100%;height: 50px;top: 30px;left: 0;}.credit-card-box.number {position: absolute;margin: 0auto;top: 103px;left: 19px;font-size: 38px;}.credit-card-boxlabel {font-size: 10px;letter-spacing: 1px;text-shadow: none;text-transform: uppercase;font-weight: normal;opacity: 0.5;display: block;margin-bottom: 3px;}.credit-card-box.card-holder, .credit-card-box.card-expiration-date {position: absolute;margin: 0auto;top: 180px;left: 19px;font-size: 22px;text-transform: capitalize;}.credit-card-box.card-expiration-date {text-align: right;left: auto;right: 20px;}.credit-card-box.ccv {height: 36px;background: #fff;width: 91%;border-radius: 5px;top: 110px;left: 0;right: 0;position: absolute;margin: 0auto;color: #000;text-align: right;padding: 10px;}.credit-card-box.ccvlabel {margin: -25px014px;color: #fff;}.the-most {position: fixed;z-index: 1;bottom: 0;left: 0;width: 50vw;max-width: 200px;padding: 10px;}.the-mostimg {max-width: 100%;}
