CSS и HTML

WEB. Вёрстка сайтов
CSS и HTML

ЗАГОТОВКИ CSS

Символ рубля - ₽

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


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

Блок или кнопка с градиентной обводкой и радиусом

Все мы знаем свойство border-image, которое позволяет добавлять любые изображения (в том числе градиенты) в качестве границ.

.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}

К сожалению, border-radius не поддерживается в border-image и приходится искать обходные пути, чтобы получить закруглённые границы с градиентом.

Вот трюк, который позволит добиться такого результата. Не требуется сложный код, SVG или несколько элементов! Всего две строки кода CSS с использованием свойства mask

.box {
  border-radius: 50px; /*1*/
  border: 10px solid transparent; /*2*/
  background: linear-gradient(45deg,red,blue) border-box; /*3*/
  mask: /*4*/
    linear-gradient(#000 0 0) padding-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; /*5*/
}

Объяснение

(1)(2): Эти линии тривиальны.
(3): Мы применяем градиент в качестве фона и делаем его началом рамку (по умолчанию это рамка с отступами).
(4): Используя свойство mask, мы применяем два непрозрачных слоя. Нижний слой будет покрывать весь элемент, а верхний — только рамку с отступами (то есть не будет покрывать область рамки).
(5): Мы исключаем верхний слой из нижнего, чтобы была видна только область рамки!

Вот и все!

Теперь вы можете настроить границу, градиент и радиус по своему усмотрению. Единственный недостаток заключается в том, что это скроет содержимое, поэтому мы можем перенести код в псевдоэлемент

.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; 
}

Градиент

Градиенты для текста

Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством -webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Пример 1. Градиентный текст

<p class="gradient-text">Градиентный текст</p>

CSS

@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}

Пример 2. Полосатый текст

<p class="striped-text">Полосатый текст</p>

CSS

.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}

Пример 3. Прозрачный текст

<p class="transparent-text">Прозрачный текст</p>

CSS

.transparent-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: #2E2F45;
  display: table;
  margin: 20px auto;
  color: white;
  border-radius: 5px;
  mix-blend-mode: multiply;
  padding: 5px 10px;
}

Пример 4. Полосатая тень

<p class="striped-shadow">Полосатая тень</p>

CSS

.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 5. Тень «горошек»

<p class="shadow-polka-dot">Тень "горошек"</p>

CSS

.shadow-polka-dot {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -5px -5px 0px #EF7657;
  background: radial-gradient(#9DA8A9 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 6. Градиентные границы

Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image .
За толщину рамки отвечает свойство border: 1px solid;

<div class="gradient-border">Градиентные границы</div>

CSS

.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

Пример 7. Градиентные границы и градиентный текст

<div class="gradient-all">Градиентные границы и текст</div>

CSS

.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}

Движущиеся облака с анимацией на CSS3

Красивый эффект, который накладывает летящие облака на произвольный фон.

Облака - это изображения облаков на прозрачном фоне в формате .png или .webp. Заготовки можно найти в интернете на свой вкус и под задачу - белые летние облака, либо темные грозовые.

HTML


<div class="cloud">

<div class="cloudcontent">

Текст на фоне

</div>

<img src="cloud-01.png" alt="" class="cloud1">

<img src="cloud-02.png" alt="" class="cloud2">

<img src="cloud-03.png" alt="" class="cloud3">

<img src="cloud-04.png" alt="" class="cloud4">

</div>

CSS


.cloud {

overflow: hidden;

position: relative;

width:100%;

padding-bottom: 56.25%;

height: 0;

background: url(mountain.jpg);

background-size: cover;

}

.cloudcontent {

position: relative;

padding:30px;

color: #337AB7;

font-size:22px;

font-weight:bold;

z-index:100;

}

.cloud img {

width: 100%;

left: 0;

top: 0;

position: absolute;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

pointer-events: none;

}

@-webkit-keyframes animCloud {

from {

-webkit-transform: translateX(100%)

}

to {

-webkit-transform: translateX(-100%)

}

}

@-moz-keyframes animCloud {

from {

-moz-transform: translateX(100%)

}

to {

-moz-transform: translateX(-100%)

}

}

@keyframes animCloud {

from {

-webkit-transform: translateX(100%);

-moz-transform: translateX(100%);

-ms-transform: translateX(100%);

-o-transform: translateX(100%);

transform: translateX(100%)

}

to {

-webkit-transform: translateX(-100%);

-moz-transform: translateX(-100%);

-ms-transform: translateX(-100%);

-o-transform: translateX(-100%);

transform: translateX(-100%)

}

}

.cloud1 {

-webkit-animation: animCloud 20s infinite linear;

-moz-animation: animCloud 20s infinite linear;

animation: animCloud 20s infinite linear

}

.cloud2 {

-webkit-animation: animCloud 40s infinite linear;

-moz-animation: animCloud 40s infinite linear;

animation: animCloud 40s infinite linear

}

.cloud3 {

-webkit-animation: animCloud 60s infinite linear;

-moz-animation: animCloud 60s infinite linear;

animation: animCloud 60s infinite linear

}

.cloud4 {

-webkit-animation: animCloud 80s infinite linear;

-moz-animation: animCloud 80s infinite linear;

animation: animCloud 80s infinite linear

}

CSS, CSS3

Кнопка button с эффектом при наведении

<button>Button
  <div class="star-1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-2">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-3">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-4">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-5">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
  <div class="star-6">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg>
  </div>
</button>

Стили CSS

box-sizing:border-box;

margin:0;

padding:0;

}

html,

body {

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color: #212121;

}

button {

position: relative;

padding: 12px 35px;

background: #FFFFFF;

font-size: 17px;

font-weight: 500;

color: #000000;

border: 3px solid #0e3a3a;

border-radius: 8px;

box-shadow: 0 0 0 #fec1958c;

transition: all .3s ease-in-out;

}

.star-1 {

position: absolute;

top: 20%;

left: 20%;

width: 25px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);

}

.star-2 {

position: absolute;

top: 45%;

left: 45%;

width: 15px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);

}

.star-3 {

position: absolute;

top: 40%;

left: 40%;

width: 5px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);

}

.star-4 {

position: absolute;

top: 20%;

left: 40%;

width: 8px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);

}

.star-5 {

position: absolute;

top: 25%;

left: 45%;

width: 15px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);

}

.star-6 {

position: absolute;

top: 5%;

left: 50%;

width: 5px;

height: auto;

filter: drop-shadow(0 0 0 #fffdef);

z-index: -5;

transition: all .8s ease;

}

button:hover {

background: #0e3a3a;

color: #FFFFFF;

box-shadow: 0 0 25px #0e3a3a;

border: 3px solid #FFF;

}

button:hover .star-1 {

position: absolute;

top: -80%;

left: -30%;

width: 25px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

button:hover .star-2 {

position: absolute;

top: -25%;

left: 10%;

width: 15px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

button:hover .star-3 {

position: absolute;

top: 55%;

left: 25%;

width: 5px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

button:hover .star-4 {

position: absolute;

top: 30%;

left: 80%;

width: 8px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

button:hover .star-5 {

position: absolute;

top: 25%;

left: 115%;

width: 15px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

button:hover .star-6 {

position: absolute;

top: 5%;

left: 60%;

width: 5px;

height: auto;

filter: drop-shadow(0 0 10px #fffdef);

z-index: 2;

}

.fil0 {

fill: #FFFDEF

}

CSS

WEB. Вёрстка сайтовCSS и HTML

ЗАГОТОВКИ CSS

Блок или кнопка с градиентной обводкой и радиусом

Градиенты для текста

Движущиеся облака с анимацией на CSS3

Кнопка button с эффектом при наведении

Объяснение

Вот и все!

Пример 1. Градиентный текст

Пример 2. Полосатый текст

Пример 3. Прозрачный текст

Пример 4. Полосатая тень

Пример 5. Тень «горошек»

Пример 6. Градиентные границы

Пример 7. Градиентные границы и градиентный текст

HTML

CSS

Стили CSS

WEB. Вёрстка сайтов
CSS и HTML