FAQ Обрамляем аватар в рамочку на CSS3 (без изображений)

Администратор · Регистрация: 27.02.2009

А в этом уроке расскажу как обрамить аватарку в рамочку, но уже не используя изображения. Рамочка будет получаться только с помощью CSS3 - что будет работать в последних браузерах, а в IE красота несколько потеряется.

Ищем в шаблоне postbit_legacy код такого плана:

PHP код:



            <if condition="$show['avatar']">

                <div class="smallfont">

                    &nbsp;<br /><a rel="nofollow" href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>

                </div>

            </if>

И заменяем его на этот:

PHP код:



            <if condition="$show['avatar']">

                <div class="avatar">

                    <a rel="nofollow" href="member.php?$session[sessionurl]u=$post[userid]">

                         <img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" />

                    </a>

                </div>

            </if>

Используем сначала обычную границу border, стиля solid (есть и другие стили границы htmlbook.ru - CSS - border)

Пример 1

А в Основная таблица CSS вашего стиля и в Дополнительные определения CSS вставляем (в любое из двух полей) следующий код стилей:

PHP код:



.avatar img {            

    display: block;

    margin: 0 auto;

    padding: 10px;

    background: repeat #EDEFF4;

    border: 1px solid #7C8AA7;

    border-radius: 6px 6px 6px 6px;

    -moz-border-radius: 6px 6px 6px 6px;

    -webkit-border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 4px #4B4B4B;

    }

Пояснения:
Центрируем аватар:

display: block;
margin: 0 auto;

Задний фон аватара:

background: repeat #EDEFF4;

Отступ от аватара до границы рамки:

padding: 10px;

Рамка толщиной 1px стиля solid с цветом #7C8AA7

border: 1px solid #7C8AA7;

Закруглим все края у рамки:

border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;

Добавим тень для рамки:

box-shadow: 0 0 4px #4B4B4B;

Пример 2

Можно добавить в качестве фона - CSS3 градиент (скопировать готовый градиент можно тут Ultimate CSS Gradient Generator - ColorZilla.com) (работает только в последних браузерах).
В этом случае можно получить вот такой вид рамочки:

PHP код:



.avatar img {    

display: block;

margin: 0 auto;

padding: 10px;

border-radius: 6px 6px 6px 6px;

-moz-border-radius: 6px 6px 6px 6px;

-webkit-border-radius: 6px 6px 6px 6px;

border: 2px solid #FFFFFF;

box-shadow: 0 0 4px #0E0E0E;

background: rgb(157,213,58); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */

}

Пример 3

А можно, поменяв в предыдущем коде значения закруглений границ, получить вот такой вид рамки:

PHP код:



border-radius: 0 80px 0 80px;

-moz-border-radius: 0 80px 0 80px;

-webkit-border-radius: 0 80px 0 80px;

Специально для pcvector.ru

Пользователь · Регистрация: 30.05.2013

А у меня вопрос, что нужно сделать что бы чуть чуть отодвинуть рамку от титула
Вот скрин:

Администратор · Регистрация: 27.02.2009

Код HTML:

.avatar{
margin-top:5px;
}

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Обрамляем аватар в рамочку из изображений на форуме	Vector	Галереи, картинки, альбомы, смайлы, иконки и т.п.	11	08.06.2013 16:04
Вопрос Аватар	Fearless	Вопросы по vBulletin 3.х	1	08.02.2012 09:19
FAQ Выезжающее меню на CSS3	noname	HTML, CSS	0	29.03.2011 16:50
FAQ Шахматная доска с помощью CSS3 градиентов	Vector	HTML, CSS	0	11.01.2011 11:54
Инфо Type Folly — простой онлайн редактор CSS3	Vector	HTML, CSS	1	23.10.2010 20:56

Vector #3
7560 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,248 Сказал(а) спасибо: 574 Спасибок 2,673 в 1,898 сообщениях	Re: Обрамляем аватар в рамочку на CSS3 (без изображений) - 30.05.2013, 18:22 Код HTML: .avatar{ margin-top:5px; }