Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 17:32
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 13
Гостей: 11
Пользователей: 2
sergaw, MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Бордюр картинки цветной через CSS

Бордюр картинки цветной через CSS Бордюр, картинки, цветной, через
Многим кто создает таблицы не хватает знания как указать красиво границы и как в нужном месте убрать бордюр, или придать ему свой отдельный цвет.
Все это делается при помощи стилей Бордюр картинки цветной через CSS.

Первый пример, смотрим скрин эффект работы его.
Создаем 2 стиля, один статический другой будет цветным динамическим, то есть при наведение.
Создаем бордюр отдельный для каждой стороны квадрата:
border-right правый бордюр
border-top Верхний бордюр
border-left Левый
border-bottom нижний
Придаем каждому свой цвет и в итоге получаем разноцветную рамку как показано на картинки анимации
И вот так вот выглядит стиль в сборе:
Code
<style>
.borders IMG {
  border-right: #FFFFFF 2px solid; border-top: #FFFFFF 2px solid; border-left: #FFFFFF 2px solid; border-bottom: #FFFFFF 2px solid;
}
.borders:hover IMG {
  border-right: #0099FF 2px solid; border-top: #FF0000 2px solid; border-left: #00FF00 2px solid; border-bottom: #FF00FF 2px solid;
}
</style>

Имя класса добавляем не в картинку а в ссылку если хотим использовать эффект hover (изменение цвета при наведение) класс так и прописываем как в стиле borders:
Code
<a class="borders" href="http://ucozon.ru"><img src="http://ucozon.ru/avatar/84/awa_admin_ucozon2.gif"></a>

Другой пример:

Если мы хотим просто сделать без изменения при наведение курсора то :
Code
<style>
.borders IMG {
  border-right: #0099FF 2px solid; border-top: #FF0000 2px solid; border-left: #00FF00 2px solid; border-bottom: #FF00FF 2px solid;
}
</style>
и та же кликабельная картинка которая будет все отображать как на примере.
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2331 | Комментарии: 6 | Рейтинг: 1.0/1 | |Категория: Скрипты Разное | Добавил: mdbaner | Дата: 21.10.2011 | Скачали: 0 | Теги: цветной, Картинки, через, бордюр
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 6
4 Kapusha   Дата: 21.10.2011  Время: 19:21   [№ 10826]
Я думаю для таких материалов стоит создать отдельный раздел или категорию.
Например: "Для новичков" "Уроки для новичков" "Юкоз для новичков"

5 mdbaner   Дата: 21.10.2011  Время: 20:18   1 [№ 10827]
Я думаю я так же в своем роде новичке в системе, я не знаю все и вся, и делить под категорию то что более 90% пользователей не знает не следует.
Множество категории на сайте путают пользователей и затрудняют навигацию.

6 Kapusha   Дата: 21.10.2011  Время: 21:26   2 [№ 10828]
Ну да. вы новичок относительно разработчиков юкоза, но вы гуру относительно половины пользователей сайта.
Признаюсь честно, сам иногда путаюсь с категориями) (при добавлении)

1 Smile   Дата: 21.10.2011  Время: 14:37   [№ 10817]
.borders IMG {
Можно было немного укоротить)

2 mdbaner   Дата: 21.10.2011  Время: 15:24   1 [№ 10818]
укорачивайте как пожелаете, а мне нужно разложить так что бы новички поняли.

3 Smile   Дата: 21.10.2011  Время: 17:25   2 [№ 10819]
Извиняюсь, не знал что вариант работы относительно обучающий.


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

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


Поиск


На форуме

1 Продажа рекламные мест ...

2

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

0

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

1

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

9

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

0

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

0

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

51

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

1

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

9

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

2


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


Комментарии



Copyright UcozOn.ru™ © 2008-2016


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