Домівка > CSS > 25 неймовірно корисних CSS трюків про які ти повинен знати

25 неймовірно корисних CSS трюків про які ти повинен знати

25 неймовірно корисних CSS трюків про які ти повинен знати

1. Зміна кольору підсвітки тексту

Ти можливо не знав цього раніше! За допомогою CSS ти можеш контролювати кольори виділеного тексту принаймні для браузерів які підтримують веб-стандарти – такі як Safari або Firefox.

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}

2. Запобігання стрибків колеса прокрутки (scrollbar) у Firefox

Firefox зазвичай ховає вертикальну прокрутку, якщо розмір контенту менший ніж видиме вікно, але це можна виправити використовуючи простий CSS трюк.

html{ overflow-y:scroll; }

3. Розриви сторінок під час друку (Print Page Breaks)

В той час як більшість інтернет користувачів надають перевагу читанню контенту online, деякі користувачі можуть захотіти роздрукувати твою статтю. За допомогою CSS ти можеш контролювати розрив сторінок в середині контенту – просто додай цей CSS клас до твоєї таблиці стилів і додай цей клас до будь-якого тегу який ти б хотів друкувати з нової сторінки.

.page-break{ page-break-before:always; }

4. Використання !important

Досвідчені CSS кодери зазвичай знайомі з цим, але новачки часто не знають про CSS правило!important. Додаючи !important до своїх CSS правил ти можеш збільшити їх перевагу над наступними правилами, так як в прикладі знизу, колір фону буде синім, а не червоним.

.page { background-color:blue !important;   background-color:red;}

5. Заміна тексту малюнком

Це класний SEO трюк який дозволяє тобі показувати користувачам красиві малюнки замість нудного тексту, але пошукові роботи бачитимуть лише текст. (magentoua: Треба бути обережним з цим трюком оскільки за подібні хитрощі Google може понизити видачу вашого сайту, оскіль розцінить це як шахрайство.)

.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}

6. Кросбраузерна мінімальна висота

Internet Explorer 6 (і нижче) не розуміє властивості min-height, але є CSS трюк, який дозволяє це виправити.

#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

7. Підсвітка посилань, які відкриються у новому вікні.

Цей кусочок CSS коду підсвічуватиме посилання, які відкриваються у новому вікні, так щоб користувач знав заздалегідь, що вікно відкриється в новій закладці або вікні.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}

8. Стайлінг впорядкованого списку (ordered list)

Стайльте числа впорядкованого списку по іншому ніж елементи списку. Тобто числа списку можна зробити одним шрифтом (Georgia), а текст іншим (Arial).

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

9. “Буквиця” за допомогою CSS

Буквиця

Приклад "Буквиці"

Ти можеш створити ефект “Буквиці” такий як в журналах та газетах за допомогою псевдо-елементу :first-letter.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

10. Прозорість, яка працює у всіх браузерах (opacity)

Хоча CSS3 стандарти включають властивість opacity, але не всі браузери її підтримують. Для вирішення цієї проблеми можна використати цей CSS трюк.

.transparent_class {filter: alpha(opacity='60');
opacity: .6;
moz-opacity: 0.6;
-khtml-opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

11. Центрування по вертикалі за допомогою line-height

Якщо ти використовуєш контейнер з фіксованою висотою і тобі потрібно поцентрувати текст по вертикалі використовуй властивість line-height для того, щоб зробити це ідеально.

.some_container { line-height:30px;}

12. Шаблон з фіксованою шириною відцентрований по середні.

Якщо ти використовуєш шаблон з фіксованою шириною і тобі потрібно поцентрувати його по середині, а не зліва екрану.

body{
text-align: center;
}
#container {
width:1000px;
margin:0 auto;
text-align: left;
}

13. Забираємо вертикальну прокрутку в textarea в Internet Explorer.

Internet Explorer додає вертикальну прокрутку до поля вводу textarea незважаючи на висоту контенту в ній. Ти це можеш виправити за допомогою простого CSS трюку.

textarea{
overflow:auto;
}

14. Забираємо границі з активних посилань (Remove active link borders)

Деякі браузери такі як Firefox і IE додають точечний контур границі посилання коли користувач клікає на неї. Це корисна особливість яка дозволяє користувачу знати яке посилання він клікає або яке є в фокусі. Але інколи потрібно позбутися цього, для цього використовуй наступний CSS.

a:active, a:focus{ outline:none; }

15. Запобігання зникнення елементів в IE.

Інколи IE поводиться специфічно і змушує деякі елементи зникати, які з’являються коли ти пробуєш їх виділити. Це зв’язано з плаваючими елементами (float). Це можна виправити додаванням position: relative; до елементів які зникають.

16. Специфічні іконки в залежності від атрибутів

CSS атрибути селекторів дуже потужні і дають багато можливостей контролювати стилі різних елементів. Наприклад ти можеш додавати іконку в залежності від href атрибуту тегу так щоб користувач знав куди веде посилання на малюнок, pdf, doc file etc.

a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

17. Вказівні курсори CSS.

Цей тренд з’явився недавно. Всі елементи інтерфейсу на веб-сторінці які можуть клікнутись користувачем будуть мати такий самий курсор як у гіперпосилання. CSS для цього.

input[type=submit],label,select,.pointer { cursor:pointer; }

18. Увесь текст з великої букви (Capitalize Text)

Цей спосіб особливо корисний коли потрібно заголовок статті на веб-сторінці зробити так щоб всі слова були написані великими буквами.

h2 { text-transform: capitalize;}

19. Текс написаний малими великими буквами

Це одна з менш корисних CSS властивостей. Вона перетворює всі букви з тексту в великі, але всі букви після першої будуть трохи меншими.

h2 { font-variant:small-caps; }

20. Підсвічуємо поля вводу тексту

Цей CSS трюк дозволяє тобі підсвітити поле вводу яке є у фокусі. Правда цей трюк не працює в IE6.

input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}

21. Забираємо бордер з малюнків

Зазвичай посилання, які містять малюнок, мають огидний синій бордер, який дуже спотворює їх. Тому краще забрати бордер зі всіх посилань з малюнками, а де він буде потрібен – прописати його за допомогою CSS класів.

a img{ border:none; }

22. Створюємо форму використовуючи label замість таблиць.

форма

Форма на основі label

Часи коли таблиці використовувалися для верстки форм відійшли в минуле. CSS дозволяє робити це за допомогою label тегів. Ось приклад HTML і CSS коду для форми без табличок.

<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Password</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
p label{
width:100px;
float:left;
margin-right:10px;
text-align:rightright;}

23. Задаємо правильний розмір базового фонту

Якщо на body тег властивості font-size задати 62,5% то це призведе до того що 1em буде рівний 10px, а це значно спростить процес обчислення з em в px.

body{ font-size:62.5%; }

24. Підсвітка тегів Acronym і Abbr

acronym і abbr теги дають важливу інформацію для користувачів, браузерів і пошукових систем про акроніми і абревіатури, але більшість браузерів, крім Firefox не виділяють їх. Ось CSS трюк, щоб підсвітити їх для усіх браузерів.

acronym, abbr{
border-bottom:1px dotted #333;
cursor:help;
}

25. CSS Reset Еріка Меєра (Eric Meyer)

Цей шматок CSS коду ресетає дефолтові стилі різних браузерів, щоб ваш CSS стиль був однаковим у всіх браузерах.

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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Першоджерело

Advertisements
Категорії:CSS Позначки:,
  1. WOG
    Грудень 25, 2009 о 13:48

    Дякую цікава стаття. Де що знаю, а де що черпнув нового для себе. І хочу зауважити що CSS Reset дуже і дуже корисна штука. Якщо його використовувати і писати правильні стилі то навіть не потрібно буде писати хаки для IE6, IE7. Перевірено на власному досвіді. Дякую автору.

  1. Березень 1, 2010 о 12:38
  2. Квітень 19, 2010 о 09:13
  3. Вересень 24, 2010 о 07:54
  4. Травень 9, 2011 о 08:07
  5. Березень 2, 2012 о 21:57

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: