CSS и HTML / ЗАГОТОВКИ CSS

Заметка создана: 28 января 2024 г.
Символ рубля - ₽ 

Стили для полос прокрутки


body::-webkit-scrollbar {
  width: 11px;    /* ширина scrollbar */
}
body::-webkit-scrollbar-track { background: #CCBFAF; /* цвет дорожки */ }
body::-webkit-scrollbar-thumb { background-color: #764E2B; /* цвет плашки */ border-radius: 20px; /* закругления плашки */ border: 1px solid #CCBFAF; /* padding вокруг плашки */ } .modal-body::-webkit-scrollbar { width: 11px; }
.modal-body::-webkit-scrollbar-thumb { background: #CCBFAF; }
.modal-body::-webkit-scrollbar-track { background-color: #764E2B; /* цвет плашки */ border-radius: 20px; /* закругления плашки */ border: 1px solid #CCBFAF; /* padding вокруг плашки */ }
 .flex {
display: flex;
flex-direction: column;
justify-content: center;
}
.flex {
display: inline-flex !important;
justify-content: center;
flex-direction: column;
@primary-color: #112233;
background-color: darken(@primary-color, 10%);
background-color: lighten(@primary-color, 10%);
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
      transition: all 0.2s linear;

.background {
    background-position: 50% 50%;
    background-repeat: no-repeat !important;
    background-size: 100%;
    background-size: cover !important
}
Трансформации
-webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
   -moz-transform: rotate(15deg); /* Для Firefox */
    -ms-transform: rotate(15deg); /* Для IE */
     -o-transform: rotate(15deg); /* Для Opera */
      transform: rotate(15deg);
-webkit-transform: scale(1.5,1.3);
   -moz-transform: scale(1.5,1.3);
    -ms-transform: scale(1.5,1.3);
     -o-transform: scale(1.5,1.3);
      transform: scale(1.5,1.3);
 
-webkit-transform:scale(1.1,1.1);
   -moz-transform:scale(1.1,1.1);
      transform:scale(1.1,1.1);
-webkit-transform: translate(42px, 18px);
   -moz-transform: translate(42px, 18px);
      transform: translate(42px, 18px);
required="true"
rel="nofollow"
target="_blank"
<!--noindex--> <!--//noindex-->
Закругление углов для блоков
-webkit-border-radius: 4px;
   -moz-border-radius: 4px;
      border-radius: 4px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
      border-radius: 50%;
-webkit-border-radius: 100px / 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;

Тени

-webkit-box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);
   -moz-box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);
      box-shadow: 1px 1px 15px hsla(0, 0%, 0%, 0.2);

-webkit-box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);
   -moz-box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);
        box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.3);
-webkit-box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15);
   -moz-box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15);
        box-shadow: 0px 0px 5px 5px hsla(0, 0%, 0%, 0.15);

box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);

Стили для placeholder

::-webkit-input-placeholder{color:#777;font-size:13px;}
::-moz-placeholder{color:#777;font-size:13px;}
::-ms-input-placeholder{color:#777;font-size:13px;}
::-ms-input-placeholder{color:#777;font-size:13px;}

word-break: normal | break-all | keep-all; //перенос строк внутри слов, которые не помещаются по ширине в заданную область.
word-wrap: normal | break-word | inherit; //переносить или нет длинные слова, которые не помещаются по ширине в заданную область

Стили для списков


/* Partial list of types */
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;
list-style-type: custom-counter-style;
list-style-type: "-";

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

text-decoration: none | underline
 

position: relative;
position: absolute;
position: fixed;
content: ";
 
margin: 15px auto;
margin-top: 15px
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;

padding-top: 15px
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;

border:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;

Стили для шрифта


font-size: .9em;
font-weight: 600;
font-style: normal | italic | oblique;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-variant: normal | small-caps;

text-transform: uppercase;
text-align: center | justify | left | right | inherit;
text-decoration: underline | none;
text-decoration-color: #dedede;
text-decoration-style: solid | double | dotted | dashed | wavy;
text-transform: capitalize | lowercase | uppercase | none;
text-overflow: clip | ellipsis;
text-shadow: 1px 1px 2px black, 0 0 1em red;

line-height:1.1em;

Заливки фона


background:#fff;
background-color:#fff;
background-size:100%;

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

vertical-align:middle;
 
/*===== BUTTON =====*/
button {
background:transparent;
border:0
}
.btn {
text-align: center;
font-weight: 500;
font-size: 11px;
padding: 10px 35px;
text-transform: uppercase;
letter-spacing: 1px;
vertical-align: top;
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
position: relative;
text-decoration:none;
}
.btn,
.btn.btn-transparent:hover {
background-color: @primary-color;
color: #fff;
}
.btn:hover {
opacity: 1;
text-decoration: none;
color: #fff;
background-color: @primary-color;
box-shadow: 0 5px 20px -10px @primary-color;
}
.btn.btn-transparent {
background: transparent;
border: 1px solid @primary-color;
color: @primary-color;
}
.btn-secondary,
.btn-secondary.btn-transparent:hover {
background-color: @secondary-color;
color: #fff;
border-color: @secondary-color;
}
.btn-secondary:hover {
opacity: 1;
text-decoration: none;
color: #fff;
background-color: @secondary-color;
box-shadow: 0 5px 20px -10px @secondary-color;
border-color: @secondary-color;
}
.btn-secondary.btn-transparent {
border: 1px solid @secondary-color;
color: @secondary-color;
}
.btn-third,
.btn-third.btn-transparent:hover {
background-color: @third-color;
color: #fff;
border-color: @third-color;
}
.btn-third:hover {
opacity: 1;
text-decoration: none;
color: #fff;
background-color: @third-color;
box-shadow: 0 5px 20px -10px @third-color;
border-color: @third-color;
}
.btn-third.btn-transparent {
border: 1px solid @third-color;
color: @third-color;
}
.btn-fifth,
.btn-fifth.btn-transparent:hover {
background-color: #bbb;
border-color: @fifth-color;
}
.btn-fifth.btn-transparent {
border: 1px solid #bbb;
color: #bbb;
}
.btn-fifth:hover {
opacity: 1;
text-decoration: none;
color: #fff;
background-color: #bbb;
box-shadow: 0 5px 20px -10px #bbb;
border-color: @fifth-color;
}
.btn-sm {
padding: 5px 15px !important;
letter-spacing: 0;
}
.in { opacity: 1 !important; }
h1:before {content: "";display: block;height: 2px;background: #fff;width: 100%;position: absolute;bottom: 0;}
html {position: relative; min-height: 100%;}
.section-parallax-background, .section-background {background-attachment: fixed !important; background-position: 50% 0; background-repeat: no-repeat; background-size: cover !important;}
.mobile .section-parallax-background {background-attachment: scroll !important;}
.section-background {background-attachment: scroll !important;}
.section-relative {position: relative;}
.section-fixed-size {overflow: hidden;}
.section-full-height {height: 100vh;}
.section-bg-adapted {background-attachment: scroll; background-position: 50% 0; background-repeat: no-repeat; background-size: cover;}
.section--gray {background-color: #444444;}
.section--light-gray {background-color: #f0f0f0;}
.section--dark-gray {background-color: #3c3c3c;}
.section-container {padding: 0; position: relative; z-index: 3;}
CSS