@media screen and # 40; max-width. 960px # 41; # 123;
.
# 125;
У специфікації CSS3 є можливість використовувати медіа-запити. Завдяки цим запитам CSS можна оцінювати деякі технічні характеристики пристроїв відвідувача, і відповідно застосовувати відповідні стилі оформлення. У наведеному вище прикладі можуть бути описані стилі для ситуації коли вікно браузера буде шириною 960 пікселів або менше.
2) background-size
body # 123;
background. url # 40; image.jpg # 41; no-repeat;
background-size. 100%;
# 125;
Ще одним надзвичайно корисним властивістю CSS3 є background-size. Завдяки цій властивості можна масштабувати фонове зображення як завгодно.
3) @ font-face
@ Font-face # 123;
font-family. Blackout;
src. url # 40; "Blackout.ttf" # 41; format # 40; "Truetype" # 41; ;
# 125;
h1 # 123; font-family. Blackout; # 125;
Ви все ще користуєтеся стандартними шрифтами? Тоді ми йдемо до вас! Це жарт звичайно ж, але дійсно «гріх» не скористатися властивістю CSS @ font-face і встановити на своєму сайті ті шрифти, які найкраще підходять до розробленого дизайну і будуть виглядати однаково в різних браузерах і на різних пристроях. Все, що потрібно - знайти або створити шрифт і підчепити його на сторінку за допомогою CSS @ font-face. Також можна скористатися сторонніми сервісами, такими як Google Web Fonts.
4) margin: 0 auto
#container # 123;
margin. 0 auto;
# 125;
Дивно, що досі не розроблено властивостей для центрування блок елемента (div). Тому доводиться вдаватися до хитрощів, ось один з кращих способів як відцентрувати div по відношенню до його батьків.
5) overflow: hidden
container # 123;
overflow. hidden;
# 125;
Буває необхідно щоб розміри блочного елемента залишалися недоторканими, тобто не збільшувалися під дією вмісту: будь то текст або зображення. Вирішується це просто властивістю overflow із значенням hidden. Також у цієї властивості є і інші значення, наприклад можна зробити смугу прокрутки (значення scroll).
6) .clearfix
clearfix. after # 123;
content. "." ;
display. block;
clear. both;
visibility. hidden;
line-height. 0;
height. 0;
# 125;
Для тих ситуацій коли overflow: hidden не працює, можна скористатися методом Clearfix. Назва класу може бути будь-яким, не обов'язково clearfix.
7) color: rgba ()
btn # 123;
color. rgba # 40; 178. 120. 134. 1 # 41; ;
# 125;
Використовуючи RGBa CSS можна надати прозорість кольору, що неможливо при використанні шістнадцяткове значення (#fafcdc). Для створення кольору треба вказати значення складових кольорів: червоного, зеленого і синього, а також виставити альфа параметр. 1 - повністю не прозорий, 0 - повністю прозорий, відповідно 0.5 - прозорий на половину.
8) input [type = "text»]
input # 91; type = "text" # 93; # 123;
width. 200px;
# 125;
При розробці дизайну грамотно застосовуйте css селектори, це дозволить скоротити і оптимізувати код. І в цілому прагнете мінімізувати кількість коду, адже це запорука гарного програмування) Завдяки селектору наведеним вище, вибираються всі поля з типом text і їм задається ширина 200px.
9) transform: rotate (30deg)
title # 123;
-moz-transform. rotate # 40; 15deg # 41; ; / * Для Firefox * /
-ms-transform. rotate # 40; 15deg # 41; ; / * Для IE * /
-webkit-transform. rotate # 40; 15deg # 41; ; / * Для Safari, Chrome, iOS * /
-o-transform. rotate # 40; 15deg # 41; ; / * Для Opera * /
transform. rotate # 40; 15deg # 41; ;
# 125;
Не варто також забувати про анімацію CSS. Навіщо перевантажувати веб-сторінку зайвими скриптами, коли їх можна замінити css анімацією.
a # 123; outline. none; # 125;
Ніщо не може зіпсувати дизайн більше, ніж пунктирні лінії навколо посилання при натисканні. За допомогою outline: none цього можна уникнути.
Щоб залишатися в курсі свіжих статей і уроків підписуйтесь на щотижневу поштову розсилку або на новинну стрічку RSS. Дякуємо!