В интернете очень много примеров работы с css3, но сегодня я писал для одного сайта пару простых эффектов, и делюсь с вами.
Пожалуй начнем с картинок:
Добавляем красивы эффект с border'ом на картинку, пишем код css3:
Code
#stf img{
width: 150px;
height: 150px;
border: 2px solid rgba(0, 0, 0, .50);
cursor: pointer;
transition: border 0.3s ease-in-out;
-webkit-transition: border 0.3s ease-in-out;
-moz-transition: border 0.3s ease-in-out;
-o-transition: border 0.3s ease-in-out;
}
#stf img:hover{
border: 2px solid rgba(255, 255, 255, .95);
}
В html:
Code
<div id="stf">
<img src="//php.ucozon.ru/u/images.php?im=2&t=jpg" alt="jpg">
</div>
-Делаем эффект прозрачности, css3:
Code
#stf img{
width: 150px;
height: 150px;
border: 2px solid rgba(0, 0, 0, .50);
cursor: pointer;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
opacity: .7;
filter: alpha(opacity=70);
}
#stf img:hover{
border: 2px solid rgb(255, 255, 255);
opacity: 1;
filter: alpha(opacity=100);
}
Эффекты с ссылками:
-функция hover:
Code
#stfa a{
text-decoration: none;
color: rgba(255, 255, 255, .3);
transition: color .2s linear;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
}
#stfa a:hover{
color: rgba(255, 255, 255, .90);
}
в html:
Code
<div id="stfa">
<a href="#">Ссылка</a>
</div>
или тоже самое, только с border'ом:
Code
#stfa a{
text-decoration: none;
color: rgba(255, 255, 255, .90);
transition: border .4s linear;
-webkit-transition: border .4s linear;
-moz-transition: border .4s linear;
}
#stfa a:hover{
color: rgba(255, 255, 255, .90);
border-bottom: 1px solid rgba(255, 255, 255, .90);
}
Работа с кнопками:
Ну тут уже все понятно, наверное, показывать на разных вариантах не буду, сами уже догадывайтесь почему.
Вот например та же функция hover, но теперь с кнопкой:
Code
input[type=button]{
background: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .50);
color: rgba(0, 0, 0, .50);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
cursor: pointer;
padding: 5px;
transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
}
input[type=button]:hover{
background: rgba(0, 0, 0, .50);
border: 1px solid rgba(255, 255, 255, .89);
color: rgb(255, 255, 255);
}
Кнопка:
Code
<input type="button" value="Кнопка" />
Как то так, и Конечно, других вариантов и решений очень много, я показал лишь те которые сегодня сам написал для сайта заказчика, решил добавить свою работу на сайт.
Пользуйтесь, спрашивайте, учитесь, на пока всё.
Демо
Меню сайта
Меню сайта
