Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 07:23
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 0



Главная » Файлы » Для веб мастера » Разное Веб мастер

Пару эффектов на CSS3

Пару эффектов  на CSS3 css3, transition, animate, цсс3, ссылка, наведения, эффект
В интернете очень много примеров работы с 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="Кнопка" />


Как то так, и Конечно, других вариантов и решений очень много, я показал лишь те которые сегодня сам написал для сайта заказчика, решил добавить свою работу на сайт.
Пользуйтесь, спрашивайте, учитесь, на пока всё.
Демо
Автор\Источник: ucozon.ru

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2215 | Рейтинг: 4.4/10 | |Категория: Разное Веб мастер | Добавил: STAFF | Дата: 17.04.2012 | Скачали: 0 | Теги: Эффектов, CSS3, пару
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru