Правила форума Гаранты форума
Размещение рекламы AMX-X компилятор

Здравствуйте, гость Вход | Регистрация

Наши новости:

14-дек
Добавлена поддержка utf8mb4
24-апр
Telegram группа
10-апр
Обновление PHP
11-апр
Раздача читов

> Правила раздела

Внимание! Перед тем, как опубликовать свой первый пост или тему в данном разделе, прошу прочитать данные правила.

Раздел "Оформление и веб-дизайн" не является местом для продажи или предоставление услуг связанных с созданием графики. Для этого есть раздел Продам.

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

[CSS] Logo Half Life
Статус пользователя damilurg
сообщение 14.6.2014, 16:42
Сообщение #1


Иконка группы

Стаж: 13 лет

Сообщений: 1191
Благодарностей: 1297
Полезность: 1230

Чего-то делать стало нечего, смотрю я на ярлык халфы, думаю: "Запустить, или нет?". Ну и решил сделать значок халфы на ксс. Получилось :)
Half Life logo
Код
<html>
<head>
<style>
body, html {font: 13px/20px Arial;color: #fb7e14;}
.userblock { float: left; margin-top: 10px; min-width: 95px;  position: relative;}
.userblock .content{width:60px;height: 60px;border: 3px solid #fb7e14;overflow: hidden;border-radius: 150px;text-align: center;vertical-align: baseline;background-color: #fff;z-index: 200;position: relative;box-shadow: inset 2px 2px 3px 1px #37200b;font:53px Arial;}
</style>
</head>
<body>
<div class="userblock">                        
        <div class="content">
            λ
        </div>                    
    </div>
</body>
</html>
Half Life 2 logo
Код
<html>
<head>
<style>
body, html {font: 13px/20px Arial;color: #fb7e14;}
.userblock { float: left; margin-top: 10px; min-width: 95px;  position: relative;}
.userblock .notifications{ position: absolute; z-index: 100; border-radius: 25px; left: 27px;}
.userblock .notifications, .userblock .notifications *{background-color: #fb7e14; background: #fb7e14; border-color: #fb7e14; box-shadow: none;}
.userblock .notifications::before{background-color: red;width: 28px;display: inline-block;content: " ";position: relative;}
.userblock .notifications::after{content:"v";color: #fb7e14;font-weight: bold;font-size: 64px;position: absolute;top:18px;left: 13px;}
.userblock .noties{ text-decoration: none; border-radius: 25px;padding: 0px;}
.userblock .noties i{ font-weight: bold;  color: #fff; font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 14px;font-weight: bold; }
.userblock .content{width:60px;height: 60px;border: 3px solid #fb7e14;overflow: hidden;border-radius: 150px;text-align: center;vertical-align: baseline;background-color: #fff;z-index: 200;position: relative;box-shadow: inset 2px 2px 3px 1px #37200b;font:53px Arial;}
</style>
</head>
<body>
<div class="userblock">
    <div class="notifications"><span class="noties"><i>2</i></span></div>                            
        <div class="content">
            λ
        </div>                    
    </div>
</body>
</html>
Результат
Прикрепленное изображение Прикрепленное изображение

Пользуемся на здоровье :)
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 2 раз
   Цитировать сообщение
« Предыдущая тема · Оформление и веб-дизайн · Следующая тема »
 
  Ответить в данную темуНачать новую тему
 
0 пользователей и 1 гостей читают эту тему:
Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный
Сообщить другу · Версия для печати

Powered By Invision Power Board  © 2005-2026 
Counter Strike Support Community