Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="cover"> <div class="text"> <div class="text_inner"> <p>...</p> </div> </div> <button type="button" class="text_more"> <div>Читать далее</div> <div>Скрыть часть</div> </button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.text { display: grid; grid-template-rows: 12em; transition: all 300ms linear; } .text_inner { position: relative; overflow: hidden; } .text.shown { grid-template-rows: 1fr; } .text_inner::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); transition: all 300ms linear; opacity: 1; visibility: visible; } .text.shown .text_inner::after { opacity: 0; visibility: hidden; } .text_more.active div:nth-child(1), .text_more:not(.active) div:nth-child(2) { display: none; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
document.addEventListener('DOMContentLoaded', function(event) { // Показать / Скрыть часть текста [].forEach.call(document.querySelectorAll('.cover'), function(cover) { let text = cover.querySelector('.text'); [].forEach.call(cover.querySelectorAll('.text_more'), function(toggle) { toggle.addEventListener('click', function(e) { e.preventDefault(); if (text.classList.contains('shown')) { text.classList.remove('shown'); toggle.classList.remove('active'); text.scrollIntoView(); } else { text.classList.add('shown'); toggle.classList.add('active'); } }); }); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="box crumbs"> <div class="inner"> <div class="content"> <div class="crumbs_row"> <div class="crumbs_item"> <a href="#">Главная</a> </div> <div class="crumbs_sep">/</div> <div class="crumbs_item"> <a href="#">Родительская</a> </div> <div class="crumbs_sep">/</div> <div class="crumbs_item"> <div>Текущая</div> </div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.crumbs { line-height: 16px; white-space: nowrap; } .crumbs .inner { position: relative; overflow: auto; } .crumbs::after { content: ''; display: block; width: 30px; height: 100%; position: absolute; top: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); } .crumbs .content { height: 36px; /* line-height + 20px */ } .crumbs_row { display: grid; grid-auto-flow: column; padding: 0 20px; height: 16px; /* line-height */ position: absolute; top: 0; left: 0; } .crumbs_item a { display: block; border-bottom: 1px solid transparent; } .crumbs_item a:hover { border-bottom-color: #000; } .crumbs_sep { margin: 0 5px; } /* 1280px - экран после которого контентная часть перестает растягиваться по ширине */ @media (min-width: 1280px) { .crumbs_row { padding: 0 calc((100% - 1160px) / 2); /* 1160px - максимальная ширина контентной частии */ } } |
Если кликнуть по кнопке — эффект будет сохраняться до повторного клика.
НЕ используется CSS псевдокласс :hover т.к. на мобильных устройствах он отрабатывает при клике и элемент переходит в состояние :hover, а выходит из него только после потери фокуса, т.е. клике по другому элементу.
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="burger_button" data-target=".menu"> <div class="burger_lines">Меню</div> </button> <div class="menu"> <div class="menu_item"> <a href="#" class="menu_item_a">Item</a> </div> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
@media (max-width: 1023px) { .head_panel { position: absolute; top: 60px; right: -100vw; width: 80vw; transition: all 300ms linear; opacity: 0; } .head_panel.shown { right: 0; opacity: 1; } .burger_button { position: relative; display: block; width: 28px; height: 28px; padding: 0; overflow: hidden; font-size: 0; text-indent: -9999px; border: none; background: none; } .burger_lines, .burger_lines::before, .burger_lines::after { position: absolute; left: 0; right: 0; width: 100%; height: 2px; background: #141414; transition: all 300ms linear; } .burger_lines { left: 0; top: 13px; } .burger_lines::before, .burger_lines::after { content: ''; display: block; } .burger_lines::before { top: -8px; } .burger_lines::after { bottom: -8px; } .burger_lines.active { background: none; } .burger_lines.active::before { top: 0; transform: rotate(45deg); } .burger_lines.active::after { bottom: 0; transform: rotate(-45deg); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
jQuery(document).ready(function($) { $B = $('body'); // Бургер (function(){ let $trigs = $B.find('.burger_button'); if (!$trigs.length) return; $trigs.each(function (i, e) { let $trig = $(e), $targ = $B.find($trig.data('target')); if (!$targ.length) return false; $trig.on('click', function() { $trig.find('.burger_lines').toggleClass('active'); $targ.toggleClass('shown'); }); }); })(); }); |
|
1 |
<span data-tip="Всплывающая подсказка">Демо</span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
[data-tip] { position: relative; cursor: help; padding: 1px 3px 2px; background: rgba(0, 0, 0, .1); border-bottom: dotted 1px rgba(0, 0, 0, .8); } [data-tip]::before, [data-tip]::after { opacity: 0; visibility: hidden; position: absolute; top: 80%; transition: all 200ms linear; pointer-events: none; } [data-tip]::before { content: ''; display: block; width: 0; height: 0; left: 50%; margin: 0 0 0 -5px; border: solid transparent 5px; border-bottom-color: rgba(0, 0, 0, .8); } [data-tip]::after { content: attr(data-tip); display: inline-block; padding: 3px 6px; left: 0; margin: 10px 0 0 0; color: #fff; font-size: 13px; white-space: nowrap; background: rgba(0, 0, 0, .8); } [data-tip]:hover::after, [data-tip]:hover::before { opacity: 1; visibility: visible; z-index: 2; top: 100%; } |
|
1 2 3 |
<div class="px_bg"> <!-- Контент --> </div> |
|
1 2 3 4 5 |
.px_bg { background-image: url(/image.png); background-position: left 50% bottom 0%; background-size: cover; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
jQuery(document).ready(function($) { // Паралакс фон (function(){ var $win = $(window), $items = $('.px_bg'); if (!$items.length) return false; $items.each(function(i, e) { var $e = $(e), eh = $e.innerHeight(), et = $e.offset().top, eb = et + eh, wh = window.innerHeight, wt = $win.scrollTop(), wb = wt + wh; if (et < wb && eb > wt) { $e.css('background-position', 'left 50% bottom ' + (wb - et) / ((wh + eh) / 100) + '%'); } $win.on('scroll', function() { wt = $win.scrollTop(); wb = wt + wh; if (et < wb && eb > wt) { $e.css('background-position', 'left 50% bottom ' + (wb - et) / ((wh + eh) / 100) + '%'); } }); }); })(); }); |
|
1 2 3 |
<div class="video"> <iframe width="" height="" src="" frameborder="0"></iframe> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.video { height: 0; position: relative; padding-bottom: 56.25%; overflow: hidden; } /*.video embed, .video object,*/ .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
| Назначение | Код | Мнемоника | Символ |
| Символ рубля | ₽ |
₽ | |
| Символ евро | € |
€ |
€ |
| Символ фунта | £ |
£ |
£ |
| Символ иены | ¥ |
¥ |
¥ |
| Символ цента | ¢ |
¢ |
¢ |
| Знак валюты | ¤ |
¤ |
¤ |
| Узкое тире | – |
– |
– |
| Широкое тире | — |
— |
— |
| Влево | ← |
← |
← |
| Вверх | ↑ |
↑ |
↑ |
| Вправо | → |
→ |
→ |
| Вниз | ↓ |
↓ |
↓ |
| Влево-вправо | ↔ |
↔ |
↔ |
| Влево | ◄ |
◄ | |
| Вверх | ▲ |
▲ | |
| Вправо | ► |
► | |
| Вниз | ▼ |
▼ | |
| Угловая скобка влево | 〈 |
⟨ |
〈 |
| Угловая скобка вправо | 〉 |
⟩ |
〉 |
| Одиночная левая угловая скобка | ‹ |
‹ |
‹ |
| Одиночная правая угловая скобка | › |
› |
› |
| Направленная влево двойная угловая кавычка | « |
« |
« |
| Направленная вправо двойная угловая кавычка | » |
» |
» |
| Знак умножения | × |
× |
× |
| Знак деления | ÷ |
÷ |
÷ |
| Знак минус | − |
− |
− |
| Знак плюс-минус | ± |
± |
± |
| Идентично | ≡ |
≡ |
≡ |
| Меньше | < |
< |
< |
| Больше | > |
> |
> |
| Почти равно | ≈ |
≈ |
≈ |
| Не равно | ≠ |
≠ |
≠ |
| Меньше или равно | ≤ |
≤ |
≤ |
| Больше или равно | ≥ |
≥ |
≥ |
| Знак охраны авторского права | © |
© |
© |
| Знак правовой охраны товарного знака | ® |
® |
® |
| Товарный знак | ™ |
™ |
™ |
| Верхний индекс «1» | ¹ |
¹ |
¹ |
| Верхний индекс «2» | ² |
² |
² |
| Верхний индекс «3» | ³ |
³ |
³ |
| Знак градуса | ° |
° |
° |
| Простая дробь «одна вторая» | ½ |
½ |
½ |
| Простая дробь «одна треть» | ⅓ |
⅓ | |
| Простая дробь «одна четверть» | ¼ |
¼ |
¼ |
| Простая дробь «три четверти» | ¾ |
¾ |
¾ |
| Знак номера | № |
№ | |
| Амперсанд | & |
& |
& |
| Бесконечность | ∞ |
∞ |
∞ |
| Маркер списка (буллит) | • |
• |
• |
| Горизонтальное многоточие | … |
… |
… |
| Знак параграфа | § |
§ |
§ |
| Неразрывный пробел |   |
|
|