درخواست کمک برای تبدیل css به ماژول
|
۲۱-۹-۱۳۹۴, ۰۱:۴۵ صبح
ارسال: #1
|
|||
|
|||
درخواست کمک برای تبدیل css به ماژول
سلام
آیا از دوستان کسی هست که بتونه این css رو به ماژول ریسپانسیو تبدیل کنه و به نام خودش منتشر کنه " یه جوری که بشه تو هر قسمت content یه مطلب رو انتخاب کرد گذاشت خیلی خیلی ممممنون میشم اگر کمک کنید قربون دستتون مرسی <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .accordion { -webkit-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6); -moz-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6); box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6); font-family: Arial, Helvetica, sans-serif; border-color: #2e091b; border-style: solid; border-width: 0px; border-radius: 8px; margin: 0 auto; height: 400px; width: 1064px; } .accordion > ul > li, .accordion-title, .accordion-content, .accordion-separator { float: left; } .accordion > ul > li { background-color: #5c1738; margin-right: -900px; margin-bottom: -0px; } .accordion-select:checked ~ .accordion-separator { margin-right: 900px; margin-bottom: 0px; } .accordion-title, .accordion-select { background-color: #7f204e; color: #ffffff; width: 40px; height: 400px; font-size: 15px; } .accordion-title span { margin-bottom: 20px; margin-left: 20px; } .accordion-select:hover ~ .accordion-title, .accordion-select:checked ~ .accordion-title { background-color: #e80974; } .accordion-title span { transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-writing-mode: lr-bt; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); margin-left: 0px; line-height: 40px; } .accordion-content { background-color: #461233; color: #d1a6c5; height: 328px; width: 828px; padding: 36px; } .accordion-title, .accordion-select:checked ~ .accordion-content { margin-right: 1px; margin-bottom: 1px; } /* Do not change following properties, they aren't generated automatically and are common for each slider. */ .accordion { overflow: hidden; } .accordion > ul { margin: 0; padding: 0; list-style: none; width: 101%; } .accordion > ul > li, .accordion-title { position: relative; } .accordion-select { cursor: pointer; position: absolute; opacity: 0; top: 0; left: 0; margin: 0; z-index: 1; } .accordion-title span { display: block; position: absolute; bottom: 0px; width: 100%; white-space: nowrap; } .accordion-content { position: relative; overflow: auto; } .accordion-separator { transition: margin 0.3s ease 0.1s; -o-transition: margin 0.3s ease 0.1s; -moz-transition: margin 0.3s ease 0.1s; -webkit-transition: margin 0.3s ease 0.1s; } </style> </head> <body> <div class="accordion"> <ul> <li> <input type="radio" name="select" class="accordion-select" checked /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> </ul> </div> <div style="text-align:center;margin-top:50px;"> </div> </body> </html> |
|||
|
کاربرانِ درحال بازدید از این موضوع: 1 مهمان