Иконка домашней страницы
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
18-03-2016, 15:14
Иконка домашней страницы "Домик" или "home" | CSS - «Учебник CSS»
Рейтинг:
Категория: Учебник CSS

Значок в HTML:

Реализация с помощью background

 

 
.home1 {
height: 3em
; width: 3em; /* подберите свой размер, например, 16px или 32px */ [/i]
background: #2C2C2C; /* подберите свой цвет */ [/i]
background-image:
linear-gradient(transparent 5%, #2C2C2C 5%, #2C2C2C 50%, transparent 50%),
linear-gradient(90deg, #fff 20%, transparent 20%),
linear-gradient(270deg, #fff 20%, transparent 20%),
linear-gradient(225deg, #fff 25%, transparent 25%),
linear-gradient(135deg, #fff 25%, transparent 25%),
linear-gradient(transparent 70%, #fff 70%);
background-position: 80% 0%, 0% 100%, 0% 100%, 0% 0%, 0% 0%, 50% 0%;
background-size: 15% 100%, 100% 50%, 100% 50%, auto, auto, 16% 100%;
background-repeat: no-repeat;
}


 

Реализация с помощью :before и :after. Если px поменять на em, распадется на элементы в Chrome при увеличении (CTRL+).

 

 
.home {
position: relative;
height: 16px; width: 8px;
border: 14px solid #2C2C2C; border-bottom: none;
}
.home:before {
content: "";
position: absolute; top: -30px;
right: -26px; /* 30px - 8px/2 */ [/i]
border-style: solid; border-width: 0 30px 20px; border-color: rgba(0,0,0,0) rgba(0,0,0,0) #2C2C2C;
}
.home:after {
content: "";
position: absolute; top: -30px; left: 13px;
height: 10px;
border: 4px solid #2C2C2C;
}


 

Значок в HTML:

Теги: CSS, #fff transparent 50%, 100%, {content:

Просмотров: 3 236
Комментариев: 0:   18-03-2016, 15:14
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle