| Сталкер | Дата: Суббота, 25.03.2017, 16:08 | Сообщение # 2 |
 Старейшина
Сообщений: 1050
Награды: 25
Репутация: 19
Статус: Offline
| Спойлер изначально закрыт
Код <details> <summary>Открыть спойлер</summary> <pre>появляющаяся информация</pre> <p>появляющийся объект </details>
Спойлер изначально открыт
Код <details open> <summary>Закрыть спойлер</summary> <pre>исчезающая информация</pre> <p>исчезающий текст </details> |
|
| |
| Сталкер | Дата: Суббота, 21.10.2017, 10:08 | Сообщение # 3 |
|
Старейшина
Сообщений: 1050
Награды: 25
Репутация: 19
Статус: Offline
| Accordion меню на чистом CSS
HTML разметка
Само меню будет находиться в с классом ac-container. Внутри каждого раздела разместим checkbox и , который будет привязан к input по соответствующему ID.
Код <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" checked /> <label for="ac-1">О нас</label> <article> <p>Какой нибудь замечательный текст... </p> </article> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" /> <label for="ac-2">Услуги</label> <article> <p>Какой нибудь замечательный текст...</p> </article> </div> <div> <input id="ac-3" name="accordion-1" type="checkbox" /> <label for="ac-3">Портфолио</label> <article> <p>Какой нибудь замечательный текст...</p> </article> </div> <div> <input id="ac-4" name="accordion-1" type="checkbox" /> <label for="ac-4">Контакты</label> <article> <p>Какой нибудь замечательный текст...</p> </article> </div> </section>
CSS стили
Укажем ширину основного блока и размести его по центру страницы
Код
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
}
Простилизуем
. C помощью него мы будем симулировать нажатие на input. Добавим относительное позиционирование и z-index. Для красоты отображения укажем градиент:
Код
.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: -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;
}
При нажатом input добавим стиль для соотвествующего выделенного
при открытом блоке меню:
Код
.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);
}
С помощью псевдо-класса :after добавим иконки стрелочек вверх и вниз для label при наведении
Код
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(http://netcribe.com/example/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {
background-image: url(http://netcribe.com/example/arrow_up.png);
}
Прячем input и стилизуем article:
.Код ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
height 100px;
}
.ac-container article 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);
}
Обидно только, что для article необходимо указывать фиксированную высоту. Если параметр height будет auto то анимация не будет работать.
источник: https://m.habrahabr.ru/post/174029/
|
|
| |
| Сталкер | Дата: Суббота, 21.10.2017, 10:14 | Сообщение # 4 |
|
Старейшина
Сообщений: 1050
Награды: 25
Репутация: 19
Статус: Offline
| Простой вертикальный CSS3 аккордеон
1. CSSКод .accordion { background-color: #eee; border: 1px solid #ccc; width: 600px; padding: 10px; margin: 50px auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 #999; -webkit-box-shadow: 0 1px 0 #999; box-shadow: 0 1px 0 #999; }.accordion section { border-bottom: 1px solid #ccc; margin: 5px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background-image: -webkit-linear-gradient(top, #fff, #eee); background-image: -moz-linear-gradient(top, #fff, #eee); background-image: -ms-linear-gradient(top, #fff, #eee); background-image: -o-linear-gradient(top, #fff, #eee); background-image: linear-gradient(top, #fff, #eee); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }.accordion h2, .accordion p { margin: 0; }.accordion p { padding: 10px; }.accordion h2 a { display: block; position: relative; font: 14px/1 'Trebuchet MS', 'Lucida Sans'; padding: 10px; color: #333; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }.accordion h2 a:hover { background: #fff; }.accordion h2 + div { height: 0; overflow: hidden; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; }.accordion :target h2 a:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -3px; border-top: 5px solid #333; border-left: 5px solid transparent; border-right: 5px solid transparent; }.accordion :target h2 + div { height: 200px; }
2. HTMLКод <div class="accordion"> <section id="one"> <h2><a href="#one">Заголовок 1</a></h2> <div> <p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p> </div> </section> <section id="two"> <h2><a href="#two">Заголовок 2</a></h2> <div> <p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p> </div> </section> <section id="three"> <h2><a href="#three">Заголовок 3</a></h2> <div> <p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p> </div> </section> <section id="four"> <h2><a href="#four">Заголовок 4</a></h2> <div> <p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p> </div> </section> <section id="five"> <h2><a href="#five">Заголовок 5</a></h2> <div> <p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p> </div> </section></div>
источник: http://jemand.ru/prostoj-vertikalnyj-css3-akkordeon/
пример: http://jemand.ru/examples/prostoj-vertikalnyj-css3-akkordeon.html
|
|
| |
| Ворон | Дата: Суббота, 13.01.2018, 10:08 | Сообщение # 5 |
 Завсегдатай
Сообщений: 302
Награды: 1
Репутация: 0
Статус: Offline
| Автоматическое перенаправление на другой URL
эта часть вставляется в head:
Код
<script language="JavaScript">
<!--
// время паузы перед перенаправлением в секундах
// 0 = 0 секунд
// 5000 = 5 секунд
// 10000 = 10 секунд
pause_time = 5000;
// URL - куда идет перенаправление
transfer_location = "http://www.новый_адрес.com";
function transfer() {
if (document.images)
setTimeout('location.replace("'+transfer_location+'");',pause_time);
else
setTimeout('location.href = transfer_location;',pause_time);
}
// -->
</script>
эта строка дописывается к body:
|
|
| |
| Сталкер | Дата: Вторник, 10.04.2018, 16:13 | Сообщение # 6 |
|
Старейшина
Сообщений: 1050
Награды: 25
Репутация: 19
Статус: Offline
| тряска окна браузера
Веселый скрипт. При нажатии на кнопку окно браузера начинает трястись.
эта часть вставляется в head:
Код
<script language="JavaScript1.2">
<!-- Begin
function shake(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
}
}
}
}
// End -->
</script>
эта часть вставляется в body:
Код
<form>
<input type="button" onClick="shake(2)" value="потряси!!!">
</form>
|
|
| |
| Сталкер | Дата: Вторник, 10.04.2018, 16:15 | Сообщение # 7 |
|
Старейшина
Сообщений: 1050
Награды: 25
Репутация: 19
Статус: Offline
| показывает, сколько времени Вы провели на странице сайта
эта часть вставляется в head:
Код
<script language="Javascript">
<!-- Begin
pageOpen = new Date();
function bye() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
if (time == 1) {
time = (time + " секунд");
}
else {
time = (time + " секунды");
}
alert('Вы пробыли на сайте ' + time + ' В следующий раз оставайтесь дольше!');
}
// End -->
</script>
эта строка дописывается к body:
|
|
| |
