CRE-ARTs
  • Авторизация

    ПАНЕЛЬ УПРАВЛЕНИЯ

    ! Гость (это Вы)

    • Регистрация
    • Забыл пароль?


    Рекомендуем пройти регистрацию, для удобства в использовании материалов.
  • Регистрация Забыл пароль?
Макет OTRADA
Макет OTRADA
Наш креативщик
CRE-ARTs.ru – ВЕБ-ДИЗАЙН И РАЗРАБОТКА САЙТОВ
На CRE-ARTs представленны лучшие шаблоны и скрипты,
собранные с различных источников в одном месте.
Наша почта: info@realarts.ru или art-creative@yandex.ru
  • Главная
  • Новости
  • Портфолио
  • Скрипты для uCoz
    • + Все скрипты
    • Разные скрипты
    • Мини - Чаты
    • Скрипты меню
    • Скрипты поиска
    • Статистика
    • Информеры и модули
    • Мини профили
    • Вид материалов и комментариев
    • Форма входа/регистрация
    • Персональные страницы
    • Переключатели и кнопки
    • Для форума
    • Коллекция слайдеров
  • Шаблоны для сайта
    • Шаблоны для uCoz
    • Шаблоны для форумов
    • HTML Шаблоны
    • Разные страницы
    • Студия S-ARTs
    • Студия elCreativo
    • Студия DCOReARTs
    • Студия SP-ARTs
    • Студия CENTROARTs
    • Студия RealARTs
    • Шаблоны разных CMS
  • Раздел дизайна
    • PSD исходники
    • PSD макеты
    • Верстка макетов
    • Статьи о Веб-Дизайне
  • Статьи
    • Статьи вебмастеру
    • Учебник SEO
    • Справочник ВебМастера
    • Руководство по раскрутке сайтов
    • Разное
  • Отзывы
  • Наши контакты
  • Правообладателям
  • Правила сайта
  • О нас
Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.
17 Марта 2014 Подробнее
Свернуть

Прямой эфир

  • artCreative
    Пользователь: artCreative
    В раздел по теме: Вид материалов как на Pinterest
    Посмотрите источник тут
    или аналогичный пост тут

  • artCreative
    Пользователь: artCreative
    В раздел по теме: Ссылка на источник при копировании текста
    Проверим, в ближайшее время исправим
  • muxa
    Пользователь: muxa
    В раздел по теме: Ссылка на источник при копировании текста
    Не работает
  • muxa
    Пользователь: muxa
    В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
    Все работает класс
  • muxa
    Пользователь: muxa
    В раздел по теме: Всплывающее меню на чистом CSS
    Не работает
  • muxa
    Пользователь: muxa
    В раздел по теме: Шаблон Фотошоп-Мастер
    Там ничего не работает.Тупо скачал и удалил.
  • vovany
    Пользователь: vovany
    В раздел по теме: Уникальная страница технических работ для uCoz
    только что вот заметил, что некорректно отображаются надписи под отсчетом...
Свернуть

Статистика


Всего в онлайне: 1
Юзеров: 1
Пользователей: 0
Пользователи
Гости сайта
  • Онлайн
  • Кто был
  • СЧ
[Статистика недоступна]


  
Всего пользователей: 1492 +0
Всего материалов [?]: 1434 + -
Новости: 12
Комментарии: 325
Статьи: 667
Файлы: 430
Полный список
Свернуть

Список категорий

  • Главная
  • Новости
  • Скрипты для uCOZ
    • + Все скрипты
    • Разные скрипты
    • Мини - Чаты
    • Скрипты меню
    • Скрипты поиска
    • Статистика
    • Информеры и модули
    • Мини профили
    • Вид материалов и комментариев
    • Форма входа/регистрация
    • Персональные страницы
    • Переключатели и кнопки
    • Для форума
    • Коллекция слайдеров
  • Шаблоны для сайтов
    • Шаблоны для uCoz
    • Шаблоны для форумов
    • HTML Шаблоны
    • Разные страницы
    • Студия S-ARTs
    • Студия elCreativo
    • Студия DCOReARTs
    • Студия SP-ARTs
    • Студия CENTROARTs
    • Студия RealARTs
    • Шаблоны разных CMS
  • Рубрики
    • Статьи вебмастеру
    • Учебник SEO
    • Справочник ВебМастера
    • Руководство по раскрутке сайтов
    • Разное
  • Дизайн
    • PSD исходники
    • PSD макеты
    • Верстка макетов
    • Статьи о Веб-Дизайне
  • Портфолио

  • Группа ВКонтакте
  • Группа в Facebook
  • Группа в twitter

  • Для посетителей...
    • О нас
    • Наши баннеры
    • Правила сайта
    • Правообладателям
    • Отзывы
Свернуть

Опечатка

E-mail отправителя *:
Тема письма:
Текст сообщения *:

Если Вы обнаружили опечатку в тексте, выделите текст с ошибкой
и нажмите на кнопку
Опечатка
Свернуть

Вместе с нами

  • Cre-ARTs - всё самое необходимое
  • Cre-ARTs - всё самое необходимое

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Мини профили » Мини-профиль на CSS3

Мини-профиль на CSS3

  • Опубликовал: artCreative™
  • Категория: Мини профили
  • Дата: 18 Июня 2025 в 21:55
0 голосов
  • 1
  • 2
  • 3
  • 4
  • 5
Своего рода уникальный и оригинальный мини профиль - визитка 
В то место где хотим видеть, ставим код:
Код
<div class="user">  
  <img src="$_AVATAR$">  
  <h5>$_USERNAME$<small>$_GROUP_NAME$</small></h5>  
  <ul>  
  <li><a href="http://stock-exchange.ucoz.com/">Ставим свой пункт</a></li>  
  <li><a href="http://stock-exchange.ucoz.com/">Ставим свой пункт</a></li>  
  <li><a href="http://stock-exchange.ucoz.com/">Ставим свой пункт</a></li>  
  <li class="sep">$_REG_TIME$</li>  
  </ul>  
</div>

В таблицу стилей добавляем:
Код
.user {  
  position: relative;  
  height: 32px;  
  padding: 8px 12px 8px 8px;  
  display: inline-block;  
  vertical-align: baseline;  
  zoom: 1;  
  *display: inline;  
  *vertical-align: auto;  
  }  
  .user img {  
  float: left;  
  width: 32px;  
  height: 32px;  
  margin-right: 8px;  
  }  
  .user h5 {  
  float: left;  
  line-height: 16px;  
  font-size: 12px;  
  font-weight: bold;  
  color: #fff;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);  
  }  
  .user h5 small {  
  display: block;  
  font-size: 9px;  
  font-weight: bold;  
  text-transform: uppercase;  
  color: rgba(0, 0, 0, 0.6);  
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);  
  *color: #364168;  
  }  
  .user:hover ul {  
  visibility: visible;  
  opacity: 1;  
  padding: 4px 0 6px;  
  }  
  .user ul {  
  visibility: hidden;  
  opacity: 0;  
  position: absolute;  
  bottom: 100%;  
  left: 0;  
  right: 0;  
  border: 1px solid;  
  border-color: #777 #6c6c6c #666;  
  border-radius: 5px;  
  -webkit-transition-property: opacity, padding, visibility;  
  -moz-transition-property: opacity, padding, visibility;  
  -ms-transition-property: opacity, padding, visibility;  
  -o-transition-property: opacity, padding, visibility;  
  transition-property: opacity, padding, visibility;  
  -webkit-transition: 0.2s ease-out;  
  -moz-transition: 0.2s ease-out;  
  -ms-transition: 0.2s ease-out;  
  -o-transition: 0.2s ease-out;  
  transition: 0.2s ease-out;  
  background-color: #d9e3fa;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef3fe), color-stop(100%, #d9e3fa));  
  background-image: -webkit-linear-gradient(top, #eef3fe, #d9e3fa);  
  background-image: -moz-linear-gradient(top, #eef3fe, #d9e3fa);  
  background-image: -ms-linear-gradient(top, #eef3fe, #d9e3fa);  
  background-image: -o-linear-gradient(top, #eef3fe, #d9e3fa);  
  background-image: linear-gradient(top, #eef3fe, #d9e3fa);  
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);  
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);  
  }  
  .user ul:before, .user ul:after, .user li:first-child:after {  
  display: block;  
  content: '';  
  width: 0;  
  height: 0;  
  position: absolute;  
  left: 15px;  
  border: 7px outset transparent;  
  }  
  .user ul:before {  
  border-top: 7px solid #555;  
  bottom: -14px;  
  }  
  .user li:first-child:after {  
  border-top: 7px solid #fff;  
  bottom: -13px;  
  }  
  .user ul:after {  
  border-top: 7px solid #d9e3fa;  
  bottom: -12px;  
  }  
  .user li {  
  padding: 0 12px;  
  font-size: 11px;  
  color: #838ca2;  
  text-shadow: 0 1px #fff;  
  }  
  .user li.sep {  
  border-top: 1px solid #b4bbce;  
  padding-top: 4px;  
  margin-top: 4px;  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);  
  }  
  .user li a {  
  display: block;  
  position: relative;  
  margin: 0 -13px;  
  padding: 0 20px 0 12px;  
  color: #313a4f;  
  border: 1px solid transparent;  
  }  
  .user li a:hover {  
  color: #fff;  
  text-decoration: none;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);  
  border-color: #5a70b0 #495d98 #42558a;  
  background-color: #5a70b0;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7688bd), color-stop(100%, #4e64a3));  
  background-image: -webkit-linear-gradient(top, #7688bd, #4e64a3);  
  background-image: -moz-linear-gradient(top, #7688bd, #4e64a3);  
  background-image: -ms-linear-gradient(top, #7688bd, #4e64a3);  
  background-image: -o-linear-gradient(top, #7688bd, #4e64a3);  
  background-image: linear-gradient(top, #7688bd, #4e64a3);  
  }  
  .user li a:hover:after {  
  display: block;  
  }  
  .user li a:after {  
  display: none;  
  content: '';  
  width: 0;  
  height: 0;  
  position: absolute;  
  top: 50%;  
  right: 5px;  
  margin-top: -4px;  
  border: 4px solid transparent;  
  border-left-color: #9facd1;  
  border-left-color: rgba(255, 255, 255, 0.4);  
  }


Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

  • Ссылка на источник материала


Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 917 « Назад

Теги материала: Мини-Профиль, на, css3

Похожие материалы:
  • Меню в стиле лава-лампы на CSS3
  • Подписи к изображениям с визуальными эффектами на CSS3
  • Форма входа на CSS3
  • Простое и эффектное выпадающее меню на jQuery и CSS3
  • Выпадающее меню на CSS3

Комментарии пользователей


Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.
  • Главная
  • Sitemap
  • Палитра Web цветов
RealARTs
Дизайн полностью создан и принадлежит сайту "Cre-ARTs.ru".
Все размещенные материалы, принадлежат их владельцам и предоставляются
исключительно в ознакомительных целях. Администрация ответственности
за содержание материала не несет и убытки не возмещает. Хостинг от uCoz
CRE-ARTs
  • Анализ интернет сайта