Spoiler css3 bez jquery

przez Nikołajenko Maksym · Opublikowany Listopad 22, 2013 · Zaktualizowano Sierpień 27, 2020

Treść ukryć

1 Tworzenie struktury dla przyszłego spoilera

2.1 Styl zamyka wszystkie spoilery podczas ładowania

2.2 Styl pozwala otworzyć spoiler, którego pole wyboru jest zaznaczone

Dzisiaj zaczynam publikować przykłady pracy z css3, które mogą być przydatne w nauce. Ostatnio przeszukując internet natknąłem się na taki prosty przykład spojlera stworzonego w css3 i postanowiłem się nim z Wami podzielić.

Zobacz przykład pracy tutaj.

Tworzenie struktury dla przyszłego spoilera

<div class="ac-container">
    <div>
        
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <section class="ac-small">
            <p>Мне очень нравиться учиться с сайтом wp-admin.com.ua, он научил меня делать такие классные спойлеры  </p>
        </section>
        <label for="ac-1">Первая вкладка спойлера</label>
        
    </div>    

<div>    
        <input id="ac-2" name="accordion-2" type="checkbox" />
        <section class="ac-small">
            <p>Вы нажали на вкладку... </p>
        </section>
        <label for="ac-2">Вторая вкладка спойлера</label>
</div>
</div>

<div>

<p>Мне очень нравиться учиться с сайтом wp-admin.com.ua, он научил меня делать такие классные спойлеры </p>

</section>

<label for="ac-1">Первая вкладка спойлера</label>

</div>

<div>

<p>Вы нажали на вкладку... </p>

</section>

<label for="ac-2">Вторая вкладка спойлера</label>

</div>

Oto struktura i gotowe, Myślę dalej, poprawne będzie tworzenie i uwzględnianie stylów dla naszego spoilera. Tak jak powiedziałem, nasze zakładki, Będę pracować na czystym css3 i bez żadnych skryptów.

style spoilerów

.ac-container{
    width: 400px;
    margin: 10px auto 30px auto;
    text-align: left;
}
.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
    background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container input{
    display: none;
}
.ac-container section{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    max-height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
    max-height: 500px; /*auto*/
}

.ac-container{

width: 400px;

margin: 10px auto 30px auto;

text-align: left;

}

.ac-container label{

font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

padding: 5px 20px;

position: relative;

z-index: 20;

display: block;

height: 30px;

cursor: pointer;

color: #777;

text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

line-height: 33px;

font-size: 19px;

background: #ffffff;

background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));

background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

box-shadow:

0px 0px 0px 1px rgba(155,155,155,0.3),

1px 0px 0px 0px rgba(255,255,255,0.9) inset,

0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container label:hover{

background: #fff;

}

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

background: #c6e1ec;

color: #3d7489;

text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);

box-shadow:

0px 0px 0px 1px rgba(155,155,155,0.3),

0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container input{

display: none;

}

.ac-container section{

background: rgba(255, 255, 255, 0.5);

margin-top: -1px;

overflow: hidden;

max-height: 0px;

position: relative;

z-index: 10;

-webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

}

.ac-container section p{

font-style: italic;

color: #777;

line-height: 23px;

font-size: 14px;

padding: 20px;

text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}

.ac-container input:checked ~ section{

-webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;

-moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;

-o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;

-ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;

transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;

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

}

.ac-container input:checked ~ section.ac-small{

max-height: 500px; /*auto*/

}

Rozumieć, jak wszystko działa, musi najpierw zrozumieć, co robi atrybut dla w tagu <etykieta>. Atrybut dla wskazuje relację etykiety Etykieta do żądanego pola wyboru. Ta funkcja umożliwia napisanie znacznika etykieta oddzielnie od wkład, i kiedy klikniesz etykieta nastąpi imitacja kliknięcia samego pola wyboru.

Same style odgrywają w tym kodzie znaczącą i kluczową rolę., które pozwalają na pozostawienie spoilera otwartego lub zamkniętego z innym stanem pola wyboru.

Styl zamyka wszystkie spoilery podczas ładowania

.ac-container section{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    max-height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container section{

background: rgba(255, 255, 255, 0.5);

margin-top: -1px;

overflow: hidden;

max-height: 0px;

position: relative;

z-index: 10;

-webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

-ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;

}

Styl pozwala otworzyć spoiler, którego pole wyboru jest zaznaczone

.ac-container input:checked ~ section.ac-small{
    max-height: 500px; /*auto*/
}

.ac-container input:checked ~ section.ac-small{

max-height: 500px; /*auto*/

}

Sam przykład jest ciekawy., w niedalekiej przyszłości, gdy wszystkie przeglądarki będą dobrze współpracować z CSS3, będzie można z niego korzystać, a tym samym przyspieszyć swoją stronę. Do tej pory testowałem w przeglądarkach FF, Opera, TJ, Chrom, Safari, Yandex i przykład okazały się całkiem znośne, oprócz drobnych szczegółów, Myślę, że możesz zacząć używać.

Dokonaliśmy przeglądu głównych punktów pracy, odnośnie tego przykładu. Jeśli masz pytania lub poprawki, Napisz w komentarzach, podziękowania są również akceptowane. W przypadku CSS i HTML radzę przeczytać stronę htmlbook.ru, służy mi jako świetne odniesienie..

Pracę spoilera można obejrzeć na stronie jsfiddle.net. To kończy mój samouczek css3., sugerować nowe skrypty do recenzji.

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa