Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
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) + '%'); } }); }); })(); }); |
Сетка на основе float блоков (12 колонок). Аналог сетки BootStrap 3
для тех кому нужна только сетка.
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
/* Version: 1.1 *******************************************************************************/ @charset 'utf-8'; /* *******************************************************************************/ .row:after { content: ''; display: block; width: 100%; height: 0; margin: 0; padding: 0; float: none; clear: both; border: none; background: none; } .row { position: relative; margin: 0 auto; } .row > div { position: relative; float: left; display: inline-block; width: 100%; } /* *******************************************************************************/ .row > .xx-0 { width: 0 } .row > .xx-1 { width: 8.333333333% } .row > .xx-2 { width: 16.66666667% } .row > .xx-3 { width: 25% } .row > .xx-4 { width: 33.33333333% } .row > .xx-5 { width: 41.66666667% } .row > .xx-6 { width: 50% } .row > .xx-7 { width: 58.33333333% } .row > .xx-8 { width: 66.66666667% } .row > .xx-9 { width: 75% } .row > .xx-10 { width: 83.33333333% } .row > .xx-11 { width: 91.66666667% } .row > .xx-12 { width: 100% } .row > .xx-of-1 { margin-left: 8.333333333% } .row > .xx-of-2 { margin-left: 16.66666667% } .row > .xx-of-3 { margin-left: 25% } .row > .xx-of-4 { margin-left: 33.33333333% } .row > .xx-of-5 { margin-left: 41.66666667% } .row > .xx-of-6 { margin-left: 50% } .row > .xx-of-7 { margin-left: 58.33333333% } .row > .xx-of-8 { margin-left: 66.66666667% } .row > .xx-of-9 { margin-left: 75% } .row > .xx-of-10 { margin-left: 83.33333333% } .row > .xx-of-11 { margin-left: 91.66666667% } @media (min-width: 375px) { .row > .xs-0 { width: 0 } .row > .xs-1 { width: 8.333333333% } .row > .xs-2 { width: 16.66666667% } .row > .xs-3 { width: 25% } .row > .xs-4 { width: 33.33333333% } .row > .xs-5 { width: 41.66666667% } .row > .xs-6 { width: 50% } .row > .xs-7 { width: 58.33333333% } .row > .xs-8 { width: 66.66666667% } .row > .xs-9 { width: 75% } .row > .xs-10 { width: 83.33333333% } .row > .xs-11 { width: 91.66666667% } .row > .xs-12 { width: 100% } .row > .xs-of-0 { margin-left: 0% } .row > .xs-of-1 { margin-left: 8.333333333% } .row > .xs-of-2 { margin-left: 16.66666667% } .row > .xs-of-3 { margin-left: 25% } .row > .xs-of-4 { margin-left: 33.33333333% } .row > .xs-of-5 { margin-left: 41.66666667% } .row > .xs-of-6 { margin-left: 50% } .row > .xs-of-7 { margin-left: 58.33333333% } .row > .xs-of-8 { margin-left: 66.66666667% } .row > .xs-of-9 { margin-left: 75% } .row > .xs-of-10 { margin-left: 83.33333333% } .row > .xs-of-11 { margin-left: 91.66666667% } } @media (min-width: 1024px) { .row > .sm-0 { width: 0 } .row > .sm-1 { width: 8.333333333% } .row > .sm-2 { width: 16.66666667% } .row > .sm-3 { width: 25% } .row > .sm-4 { width: 33.33333333% } .row > .sm-5 { width: 41.66666667% } .row > .sm-6 { width: 50% } .row > .sm-7 { width: 58.33333333% } .row > .sm-8 { width: 66.66666667% } .row > .sm-9 { width: 75% } .row > .sm-10 { width: 83.33333333% } .row > .sm-11 { width: 91.66666667% } .row > .sm-12 { width: 100% } .row > .sm-of-0 { margin-left: 0% } .row > .sm-of-1 { margin-left: 8.333333333% } .row > .sm-of-2 { margin-left: 16.66666667% } .row > .sm-of-3 { margin-left: 25% } .row > .sm-of-4 { margin-left: 33.33333333% } .row > .sm-of-5 { margin-left: 41.66666667% } .row > .sm-of-6 { margin-left: 50% } .row > .sm-of-7 { margin-left: 58.33333333% } .row > .sm-of-8 { margin-left: 66.66666667% } .row > .sm-of-9 { margin-left: 75% } .row > .sm-of-10 { margin-left: 83.33333333% } .row > .sm-of-11 { margin-left: 91.66666667% } } @media (min-width: 1280px) { .row > .md-0 { width: 0 } .row > .md-1 { width: 8.333333333% } .row > .md-2 { width: 16.66666667% } .row > .md-3 { width: 25% } .row > .md-4 { width: 33.33333333% } .row > .md-5 { width: 41.66666667% } .row > .md-6 { width: 50% } .row > .md-7 { width: 58.33333333% } .row > .md-8 { width: 66.66666667% } .row > .md-9 { width: 75% } .row > .md-10 { width: 83.33333333% } .row > .md-11 { width: 91.66666667% } .row > .md-12 { width: 100% } .row > .md-of-0 { margin-left: 0% } .row > .md-of-1 { margin-left: 8.333333333% } .row > .md-of-2 { margin-left: 16.66666667% } .row > .md-of-3 { margin-left: 25% } .row > .md-of-4 { margin-left: 33.33333333% } .row > .md-of-5 { margin-left: 41.66666667% } .row > .md-of-6 { margin-left: 50% } .row > .md-of-7 { margin-left: 58.33333333% } .row > .md-of-8 { margin-left: 66.66666667% } .row > .md-of-9 { margin-left: 75% } .row > .md-of-10 { margin-left: 83.33333333% } .row > .md-of-11 { margin-left: 91.66666667% } } @media (min-width: 1440px) { .row > .bg-0 { width: 0 } .row > .bg-1 { width: 8.333333333% } .row > .bg-2 { width: 16.66666667% } .row > .bg-3 { width: 25% } .row > .bg-4 { width: 33.33333333% } .row > .bg-5 { width: 41.66666667% } .row > .bg-6 { width: 50% } .row > .bg-7 { width: 58.33333333% } .row > .bg-8 { width: 66.66666667% } .row > .bg-9 { width: 75% } .row > .bg-10 { width: 83.33333333% } .row > .bg-11 { width: 91.66666667% } .row > .bg-12 { width: 100% } .row > .bg-of-0 { margin-left: 0% } .row > .bg-of-1 { margin-left: 8.333333333% } .row > .bg-of-2 { margin-left: 16.66666667% } .row > .bg-of-3 { margin-left: 25% } .row > .bg-of-4 { margin-left: 33.33333333% } .row > .bg-of-5 { margin-left: 41.66666667% } .row > .bg-of-6 { margin-left: 50% } .row > .bg-of-7 { margin-left: 58.33333333% } .row > .bg-of-8 { margin-left: 66.66666667% } .row > .bg-of-9 { margin-left: 75% } .row > .bg-of-10 { margin-left: 83.33333333% } .row > .bg-of-11 { margin-left: 91.66666667% } } @media (min-width: 1600px) { .row > .lg-0 { width: 0 } .row > .lg-1 { width: 8.333333333% } .row > .lg-2 { width: 16.66666667% } .row > .lg-3 { width: 25% } .row > .lg-4 { width: 33.33333333% } .row > .lg-5 { width: 41.66666667% } .row > .lg-6 { width: 50% } .row > .lg-7 { width: 58.33333333% } .row > .lg-8 { width: 66.66666667% } .row > .lg-9 { width: 75% } .row > .lg-10 { width: 83.33333333% } .row > .lg-11 { width: 91.66666667% } .row > .lg-12 { width: 100% } .row > .lg-of-0 { margin-left: 0% } .row > .lg-of-1 { margin-left: 8.333333333% } .row > .lg-of-2 { margin-left: 16.66666667% } .row > .lg-of-3 { margin-left: 25% } .row > .lg-of-4 { margin-left: 33.33333333% } .row > .lg-of-5 { margin-left: 41.66666667% } .row > .lg-of-6 { margin-left: 50% } .row > .lg-of-7 { margin-left: 58.33333333% } .row > .lg-of-8 { margin-left: 66.66666667% } .row > .lg-of-9 { margin-left: 75% } .row > .lg-of-10 { margin-left: 83.33333333% } .row > .lg-of-11 { margin-left: 91.66666667% } } |
Моя версия сброса и нормализации стилей. Минимум, необходимый для каждого проекта.
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 |
/* Version: 2.2; */ @charset 'utf-8'; /* Reset *******************************************************************************/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr,button,input,select,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,video{display:block}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}blockquote,q{quotes:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:normal;text-transform:none}input[type="search"]{-webkit-appearance:textfield;}input[type="search"]:-webkit-search-cancel-button,input[type="search"]:-webkit-search-decoration{-webkit-appearance:none}svg:not(:root){overflow:hidden} html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-overflow-scrolling:touch; overflow-scrolling:touch; } /* Animation *******************************************************************************/ a, button { transition: all 300ms linear; } /* Structure *******************************************************************************/ .outer {} .box { width: 100%; margin: 0 auto; } .inner { position: relative; } .clearfix:after, .clearfix:before { content: ''; display: block; width: 100%; height: 0; margin: 0; padding: 0; float: none; clear: both; border: none; background: none; } /* Typography *******************************************************************************/ p { line-height: 1.5; } a { color: inherit; text-decoration: none; } b { font-weight: 600; } b b, strong { font-weight: 700; } i { font-style: italic; } ol, ul { padding-left: 20px; line-height: 1.5; } ul { list-style: disc; } ol { list-style: decimal; } small { font-size: 80%; } big { font-size: 120%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } p + p, p + ul, ul + p, p + ol, ol + p { margin-top: 1em; } /* Forms *******************************************************************************/ fieldset { border: 1px solid silver; } label { cursor: pointer; display: block; margin: 10px 0; } input, textarea, select { width: 100%; height: 40px; padding: 0 10px; background: #fff; line-height: 38px; border: 1px solid #ddd; } textarea { padding: 10px; overflow: auto; min-height: 125px; line-height: 1.1; resize: vertical; vertical-align: top; } input:focus, textarea:focus, select:focus { outline: 0; } input[type="radio"], input[type="checkbox"] { display: inline-block; width: auto; height: auto; padding: 0; line-height: 1; } button { position: relative; cursor: pointer; display: inline-block; height: 40px; padding: 0 20px; color: #444; text-align: center; text-decoration: none; white-space: nowrap; background: none; box-sizing: border-box; appearance: button; } button:focus { outline: none; } input:disabled, button:disabled { cursor: default; } [placeholder]:focus::-webkit-input-placeholder { color: transparent; } [placeholder]:focus:-ms-input-placeholder { color: transparent; } [placeholder]:focus::-moz-placeholder { color: transparent; } /* Other *******************************************************************************/ img, svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; } table { width: 100%; border-collapse: collapse; border-spacing: 0; vertical-align: top; } |
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%; } |