Opacity – прозрачность css

Opacity – прозрачность cssСегодня мы продолжаем тему новшеств CSS3. Мы уже рассмотрели:div закругленные края, text-shadow, box-shadow.

Сегодня очередь css прозрачности: opacity.

Это очень простое свойство в силу того, что имеет очень мало параметров.

Синтаксис прозрачности css

opacity: 0.5

opacity принимает значения от 0 до 1 с шагом 0,1.

Для реализации примеров возьмем синий квадрат:

html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
.kvblue{
background:blue;
height:100px;
width:100px;
}

Результат:

Opacity – прозрачность css

Пример: opacity: 0 – элемент полностью прозрачен

html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
6
.kvblue{
background:blue;
height:100px;
width:100px;
opacity:0;
}

Результат:

Opacity – прозрачность css

Пример: opacity:1 – Элемент полностью видим. Это значение по умолчанию.

html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
6
.kvblue{
background:blue;
height:100px;
width:100px;
opacity:1;
}

Результат:

Opacity – прозрачность css

Пример: opacity:0.5 – элемент полупрозрачен

html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
6
.kvblue{
background:blue;
height:100px;
width:100px;
opacity:0.5;
}

Результат:

Opacity – прозрачность css

Как видите, эффект прозрачности с помощью opacity очень легко реализуется. И не требует особых навыков.

На этом все удачи!!!

С уважением Тригуба Сергей!

Интересное — Трансформер попал в аварию

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев9 комментариев
1

а можно сделать, чтобы при наведении прозрачность убиралась?

2

почему-то не работает у меня это все ни в одном из браузеров современных. работает только либо opacity 0 либо opacity 1,если ставишь 0,5, то выглядит, как будто стоит 1

3

может я что-то не так сделал?

Документ без названия

.kvblue

{

background:blue;

height:100px;

width:100px;

opacity:0,5;

}

4

Документ без названия

.kvblue

{

background:blue;

height:100px;

width:100px;

opacity:0,5;

}

5

блин. а хрен с ним

6

точно!)

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет