Счастье не в том, чтобы делать всегда, что хочешь, а в том, чтобы всегда хотеть того, что делаешь.Л. Толстой ©

Rammdrum.com - сайт об ударнике Rammstein - Главная

Новости
Будь в курсе
Мини Чат

Рамка для аватара путём html-css

1454 |

(3)

Здравствуйте дорогие читатели, в этой небольшой статье, я хочу показать вам, как благодаря основам html-css возможно поставить рамку для аватара. Согласитесь, что вы неоднократно встречали в интернете, на странице комментарий, пользовательские аватары и небольшую рамку вокруг неё, так давайте посмотрим как это реализуется...

Обычная рамка:

Для начало, нашему изображению мы пропишем нужный нам класс, в нашем случае это class="avatar_ramka"

HTML-Code

Code

В css стилях прописываем, высоту, ширину, отступ в 3 пикселя и саму рамку.

CSS-Code

Code

.avatar_ramka {
  width:60px;
  height:60px;
  padding: 3px;
  border:1px solid #A7A7A7;
}

Прозрачность при наведении стрелкой мыши:

Создаём отдельную ячейку div и задаём ему class="avatar_prozrachost", в эту ячейку помещаем ссылку на анкету пользователя, а в ссылку помещаем адрес аватара пользователя.

HTML-Code

Code

А в css стилях прописываем высоту, ширину, отступ в 3 пикселя, рамку и прозрачность для img картинок.

CSS-Code

Code

.avatar_ramka {
  width:60px;
  height:60px;
  padding: 3px;
  border:1px solid #A7A7A7;
}

.avatar_prozrachost a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

Графическая рамка:

Во-первых, нам понадобиться изображение рамки для аватара в формате png, в которой центральная часть изображение прозрачная.

Во-вторых, создаём ячейку div и задаём ему class="avatar_ramka_img".
В-третьих, в эту ячейку помещаем теги span, которые отвечают за графическую рамку аватара.
В-четвёртых, помещаем само изображение аватара пользователя и задаём ему class="avatar", это делается для того, чтобы допустим аватар пользователя размером в 100x100 пикселей, уменьшился до нужного нам размера, в нашем случаи это 68x68 пикселей.

HTML-Code

Code

А в css стилях прописываем высоту, ширину аватара, абсолютное и относительное позиционирование, элемент блокового уровня и ссылку на рамку аватара.

CSS-Code

Code

.avatar {
  width:68px;
  height:68px;
}

.avatar_ramka_img {
  position: relative;
  display: block;
  height:68px;
  width:68px;}

.avatar_ramka_img span {
  position: absolute;
  display: block;
  height:68px;
  width:68px;
  background: url('ramka_avatar.png') no-repeat center top;
}

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

Источник:
http://www.center-dm.ru
Вольный перевод:
--------------------

Ваша оценка новости

оценка новости3.4голосов: 5

Теги: Аватар, html-css, прозрачность, Рамка

3 | chernoffo пишет: | 07.01.2012 | 17:35 0

класс! а вот такой вопрос,как сделать ошибку 404 у себя на сайте,примерно как у тебя..напишите в лс

Ответ: заходишь в админ панель сайта uCoz => Файловый менеджер и загружаешь туда html страницу такого вида 404.htm (страницу ты сам делаешь у себя на компьютере)

Цитировать