Иконка домашней страницы "Домик" или "home" | CSS

Значок в HTML:

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

<style> 
.home1 {
  height: 3em; width: 3em; /* подберите свой размер, например, 16px или 32px */ 
  background: #2C2C2C; /* подберите свой цвет */ 
  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;
}
</style>

<div class="home1"></div>

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

<style> 
.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 */ 
  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;
}
</style>

<div class="home"></div>
в f t
наверх ↑

22 комментария:

К М Г
Ещё есть всякие символы, которые можно увеличить, добавить к ним тени; к примеру, ⌂ ✉ ☏ .

О них вы писали, но на практике мало кто использует :)
DmytroSlyusar
Можно и вот так ) http://one-div.com/
NMitra
Картинки распознаются всеми даже самыми древними браузерами. К тому же сайт стараются сделать в одном дизайнерском стиле. Но. Ранее чтобы фон сделать прозрачным, в Фотошопе создавали соответствующую картинку. Теперь же достаточно прописать одну строку в CSS. И так будет во всем. К туже же в адаптивном дизайне выигрывает последний.

Да, мне тоже понравились иконки оттуда.
Yehor Plotnisky
Здравствуйте, NMitra, прошу вашей помощи. Вот код изображения в шапке. Нужно чтобы это изображение стало ссылкой. То есть при нажатии на него можно было бы перейти по ссылке. Заранее спасибо.

div.-headerobject{display:block;left:0;margin-left:-5px;position:absolute;top:10px;width:398px;height:115px;href='http://4idroid.com'target='_blank'; background-image:url('images/header-object.png')
NMitra
Здравствуйте,
<a href=""><img src=""/></a>
Yehor Plotnisky
Это понятно, но как внедрить этот код в мой? Спасибо.
NMitra
А у вас вместо кода что-то неразумное.
Yehor Plotnisky
Просто это код Wordpress из Style.css
Yehor Plotnisky
Более подробный код

div.art-headerobject{display:block;left:0;margin-left:-5px;position:absolute;top:10px;width:398px;height:115px;href='http://4idroid.com'target='_blank'; background-image:url('images/header-object.png')}
NMitra
Этого не должно быть

href='http://4idroid.com'target='_blank';

в CSS не должны быть элементы HTML. Ссылка ведёт на ваш сайт?
Yehor Plotnisky
Да
Yehor Plotnisky
Простите за наглость, другой вопрос. У меня есть несколько изображений кнопок социальных сетей, я сделал виджет "Мы в Социалках". Но картинки выравниваются по левому краю. Как сделать чтобы они выводились по центру виджета? Вот это код. Огромное спасибо за ответы.





Yehor Plotnisky






Извините, что так написал, но в комментах пишет "Ваш код HTML не может быть принят: Недопустимый тег: IMG"
Yehor Plotnisky
Вообще код не публикует
NMitra
Воспользуйтесь формочкой http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html , посмотрите эту статью http://shpargalkablog.ru/2012/03/div-po-centru-html.html
Yehor Plotnisky
Наталья, это снова я. Самому решить вопрос не удалось. Нужно, чтобы 3 эти картинки выравнивались по центру виджета. Вот это код. Очень рассчитываю на Вашу помощь. Благодарю.

<a href='http://twitter.com/' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png" title='twitter'/></a>

<a href='http://facebook.com/' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" title='facebook'/></a>

<a href='https://plus.google.com/' target='_blank'><img alt='google plus' src="http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png" title='google plus'/></a>
NMitra
Какой адрес сайта? Нужно смотреть на код в целом.
Yehor Plotnisky
windows-phone-os.blogspot.com вот там справа стоят кнопки соц. сетей, нужно их как-нибудь по центру виджета сделать
NMitra
#HTML2 div {
text-align: center;
}
Yehor Plotnisky
посмотрите как теперь, что я неправильно сделал? Может, не так вставить?
NMitra
Комментарий 19 - это CSS. Добавьте его согласно http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css

И уберите из body
Yehor Plotnisky
Спасибо