Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 19 » Аккордеон на чистом CSS3


12:55
Аккордеон на чистом CSS3

 Аккордеон на чистом CSS3

Сегодня я расскажу вам о еще одной большой вещи, которые можно реализовать с помощью CSS3 - это аккордеон. Я думаю, что аккордеон все еще довольно популярен в Интернете. Это хороший способ сохранить некоторую информацию на странице. Мы будем использовать только CSS3 для достижения этого эффекта, сегодня я расскажу вам, как именно это можно сделать.

ДЕМО              СКАЧАТЬ ИСХОДНИК


 

Шаг 1. HTML Markup

Вот исходный код нашей демо-версии:

index.html

<div class="accordion">

    <span id="tab1"></span>

    <span id="tab2"></span>

    <span id="tab3"></span>

    <span id="tab4"></span>

 

    <div class="tabs">

        <dl class="tab1">

            <dd>

                <a href="#tab1">Tab #1</a>

                <div><p>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.</p></div>

            </dd>

        </dl>

        <dl class="tab2">

            <dd>

                <a href="#tab2">Tab #2</a>

                <div>

                    <p>

                    <iframe width="560" height="315" src="http://www.youtube.com/embed/8o_uw_zwdEs" frameborder="0" allowfullscreen></iframe>

                    </p>

                </div>

            </dd>

        </dl>

        <dl class="tab3">

            <dd>

                <a href="#tab3">Tab #3</a>

                <div><p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.</p></div>

            </dd>

        </dl>

        <dl class="tab4">

            <dd>

                <a href="#tab4">Tab #4</a>

                <div><p><img src="images/icons.jpg" alt="" /></p></div>

            </dd>

        </dl>

    </div>

</div>

 

Мы будем использовать список скрытых объектов службы, а также список пользовательских вкладок, где вы можете разместить все, что вы хотите (любой пользовательский контент HTML). Каждая вкладка иметь собственный идентификатор.

Шаг 2. CSS

Вот CSS стилях наших аккордеона:

CSS / accordion.css

.accordion {

    color: #000000;

    margin: 50px auto;

    position: relative;

    width: 590px;

}

.accordion span {

    display: none

}

.tabs {

    background-color: #FFFFFF;

    overflow: hidden;

}

.tabs dl dd a {

    background-color: #C8CEFF;

    border: 1px solid;

    border-color:#ccc;border-bottom-color:#aaa;

    display: block;

    font-size: 18px;

    line-height: 32px;

    padding: 5px 20px;

    text-decoration: none;

 

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);

    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);

    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);

    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));

    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);

    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);

 

    -moz-transition: 0.3s;

    -ms-transition: 0.3s;

    -o-transition: 0.3s;

    -webkit-transition: 0.3s;

    transition: 0.3s;

}

.tabs dl dd div {

    background-color: #FFF;

    height: 0;

    overflow: hidden;

 

    box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;

    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;

    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;

 

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}

.tabs dl dd div p {

    color: #444444;

    font-size: 13px;

    padding: 15px;

    text-align: justify;

}

.tabs dl dd a:hover {

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

}

.tabs dl dd a:active {

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);

    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));

    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);

}

#tab1:target ~ .tabs .tab1 dd div {

    height: 100px;

}

#tab2:target ~ .tabs .tab2 dd div {

    height: 345px;

}

#tab3:target ~ .tabs .tab3 dd div {

    height: 235px;

}

#tab4:target ~ .tabs .tab4 dd div {

    height: 235px;

}

#tab1:target ~ .tabs .tab1 dd a,

#tab2:target ~ .tabs .tab2 dd a,

#tab3:target ~ .tabs .tab3 dd a,

#tab4:target ~ .tabs .tab4 dd a {

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);

    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));

    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);

    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);

 

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;

}

 

Для того чтобы движения были плавными: я добавил переход на высоту в наших вкладках.


ДЕМО            СКАЧАТЬ ИСХОДНИК


Заключение

Вот и все. Выглядит здорово, не так ли? Если у вас есть любые хорошие идеи, которыми вы хотели бы поделиться, не забудьте ими поделится. Удачи!

Категория: CSS//HTML//JS | Просмотров: 756 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди