زمان کنونی: ۱-۸-۱۴۰۰, ۰۵:۴۹ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
چطوری عنوان ها ( تایتل های ) این css راست چین کنم
۱۳-۹-۱۳۹۴, ۱۰:۲۱ عصر
ارسال: #1
چطوری عنوان ها ( تایتل های ) این css راست چین کنم
[b]CSS[/b]

.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: #505050;
    border-style: solid;
    border-width: 0px;
    border-radius: 8px;
    margin: 0 auto;
    height: 290px;
    width: 864px;
}

.accordion > ul > li,
.accordion-title,
.accordion-content,
.accordion-separator {
    float: left;
}

.accordion > ul > li {
    background-color: #1f1f1f;
    margin-right: -700px;
    margin-bottom: -0px;
}

.accordion-select:checked ~ .accordion-separator {
    margin-right: 700px;
    margin-bottom: 0px;
}

.accordion-title,
.accordion-select  {
    background-color: #2d2d2d;
    color: #ffffff;
    width: 40px;
    height: 290px;
    font-size: 15px;
}

.accordion-title span {
    margin-bottom: 20px;
    margin-left: 20px;
}

.accordion-select:hover ~ .accordion-title,
.accordion-select:checked ~ .accordion-title {
    background-color: #3068cc;
}

.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: #3e3e3e;
    color: #f5f2f0;
    height: 234px;
    width: 644px;
    padding: 28px;
}

.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;
}

[b]HTML[/b]

<!DOCTYPE html>
<html>
<head>
<title>CSS Accordion Slider</title>
<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: #505050;
    border-style: solid;
    border-width: 0px;
    border-radius: 8px;
    margin: 0 auto;
    height: 290px;
    width: 864px;
}

.accordion > ul > li,
.accordion-title,
.accordion-content,
.accordion-separator {
    float: left;
}

.accordion > ul > li {
    background-color: #1f1f1f;
    margin-right: -700px;
    margin-bottom: -0px;
}

.accordion-select:checked ~ .accordion-separator {
    margin-right: 700px;
    margin-bottom: 0px;
}

.accordion-title,
.accordion-select  {
    background-color: #2d2d2d;
    color: #ffffff;
    width: 40px;
    height: 290px;
    font-size: 15px;
}

.accordion-title span {
    margin-bottom: 20px;
    margin-left: 20px;
}

.accordion-select:hover ~ .accordion-title,
.accordion-select:checked ~ .accordion-title {
    background-color: #3068cc;
}

.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: #3e3e3e;
    color: #f5f2f0;
    height: 234px;
    width: 644px;
    padding: 28px;
}

.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>

ویرایش شد.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱۳-۹-۱۳۹۴, ۱۱:۲۴ عصر
ارسال: #2
RE: چطوری عنوان ها ( تایتل های ) این css راست چین کنم
بهتر هست که لینک دمو هم قرار بدید
امضاء sasanu
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱۴-۹-۱۳۹۴, ۱۲:۰۹ عصر
ارسال: #3
RE: چطوری عنوان ها ( تایتل های ) این css راست چین کنم
سلام

اگه تو دمو مشخص کنید خیلی بهتره

این کدو به انتهای فایل اضافه کنید

pdivliulh1h2h3h4h5h6div.title h1div.title h2, .componentheadingspanthtdtrinput, .contentpane {
     
text-alignright;

امضاء aaamin
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


دانلود رايگان افزونه هاي جوملا

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


پرش به انجمن:


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