CSS3 эффекты

Обратите внимание!

Все приведенные эффекты работают в браузерах на webkit: Chrome, Safari, Opera.
Для просмотра эффекта наведите на блок курсор мыши

-webkit-filter:
blur(5px)

-webkit-filter:
grayscale(100%)

-webkit-filter:
sepia(80%)

-webkit-filter:
brightness(150%)

-webkit-filter:
contrast(150%)

-webkit-filter:
hue-rotate(90deg)

-webkit-filter:
invert(70%)

-webkit-filter:
saturate(70%)

opacity:
0.2

HTML код блока:

1
2
3
4
<div class="css3_effects blur">
    <p>-webkit-filter:<br> blur(5px)</p>
    <img src="/images/html/css3/tomato.png" alt=""/>
</div>

CSS код блока:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.css3_effects {
    transition: all ease 1s;
    border: 1px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 5px;
    width: 180px;
    text-align: center;
    float: left;
    font:normal 12px monospace;
    margin: 10px;
}
.blur:hover {
    -webkit-filter: blur(5px);
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *