Jump to content
  • 0

Png изображение и раскройка по классам


P0jar
 Share

Question

Решал практикум на htmlbook. Вот это задание. Полез в ответы за подсмотром решения и наткнулся на одну очень интересную вещь. То решение я перенёс на codepan: 

http://codepen.io/pojar/pen/dMEbdZ 

Разметка, позиционирование расчётное, это понятно. Суть вопроса: там есть у каждой такой иконки два class: icon и класс соц. сети.

Вот цельная картинка иконок.

 social_icons.png

Вот этот png применяется в решении один раз прямо ко всем подобным элементом с классом icon как background. Далее происходит обращение по классам к конкретному значку. Но как это происходит? Ведь это цельное изображение. С псевдоклассом :hover ситуация идентичная. В коде нету никаких таких объявлений, однако к нужной иконке он работает.

Как это вообще происходит, объясните, пожалуйста. Png как и SVG хранит внутри какой-то код, где все иконки внутри уже разбиты на предопределённые классы и псевдоклассы? 

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 2

.icon - дает всем это изображение

.fb, .mail - дает позицию каждой иконки (:hover аналогично)

Например, ширина .icon = 30px*30px. Дополнительный класс .twitter сообщает, что твоя позиция иконки -

background-position: -30px -30px;

То есть по Х - отойди вправо на -30 пикселей, а по Y - вниз на -30 пикселей, а всё остальное скрыто, так как область 30*30 пкс. Для остальных классов .fb, .mail мы орудуем только значением background-position.

http://joxi.ru/brR8kNluQRN7p2 - что размыто, то скрывается.

Edited by kattiperk
Link to comment
Share on other sites

  • 0
В 16.05.2016 в 13:30, kattiperk сказал:

То есть по Х - отойди вправо на -30 пикселей, а по Y - вниз на -30 пикселей, а всё остальное скрыто, так как область 30*30 пкс.

Спасибо, вроде, разобрался. Весьма хитроумный способ.

Неясно только одно: почему при icon 30x30 всё изображение не сжимается, а остаётся видна только конкретная иконка? Свойство таких png изображений? Ведь иконки  явно выглядят раскроенными в редакторе, только что слитные все. 

 

Link to comment
Share on other sites

  • 1
2 часа назад, P0jar сказал:

Неясно только одно: почему при icon 30x30 всё изображение не сжимается, а остаётся видна только конкретная иконка?

Манипуляция происходит не с изображением, а с контейнером, у которого изображение - фон.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy