|
Список интересных CSS-свойств, и примеры их применения
|
|
| Radiance |
Дата: Понедельник, 01.06.2015, 19:02 | Сообщение # 1
|
Боец
Сообщений: 209
Статус: Offline
|
Привет всем.
Посещая профильные форумы типо stackoverflow часто натыкаюсь на достаточно интересные вопросы, на которые дают достаточно извращенные ответы, что не есть гуд. Очень даже не гуд.
Дабы оградить вас от велосипедостроительной отрасли, решил привести список некоторых интересных свойств CSS, которые помогут сделать дизайн более интересным и динамичным, а так же избавить от кучи велосипедов и костылей, реализуемых через JS.
Итак, погнали.
1. Реализация Sticky-элементов.
Sticky-элемент - элемент на странице, который, грубо говоря, имеет фиксированное положение на экране, и остается в том же самом месте при скроллинге страницы.
Раньше подобные фишки реализовались с помощью громоздких JS-плагинов, что было ну просто ужас как печально. Тот же jQuery мог обновляться намного чаще, чем некоторые плагины, из-за этого выходили траблы с их использованием. Один может обновиться сразу с jQuery, другой - через пол года. В итоге верстальщику оставалось только плакать и жрать цианид.
Но теперь, собственно, можно не беспокоиться.
В CSS к свойству position добавился вариант fixed. Именно position:fixed помогает реализовывать Sticky-элементы без лишнего геморроя
Пример реализации Sticky-элемента через position:fixed
2. RGBA-модель
Выражаясь топорно RGBA-модель предполагает модель смешивания в нужных пропорциях красного зелёного и синего цветов, для получения нужного оттенка.
Это нам позволяет подбирать оттенки цветов настолько точно, что теперь можно не париться за косяки с отображением цветов на разных экранах.
Но мы забыли про букву "A". А вот она у нас отвечает за прозрачность элемента. Принцип работы схож со свойтвом opacity, но есть огромное отличие: opacity наследуется всему блоку, в rgba модели прозрачность наследуется только одному элементу.
Пример
3.Изменение цвета выделенного текста
Как то задрюкало уже это синее выделение, да? И при определенной цветовой гамме смотрится так еще...
Ну а теперь можно это изменить.
Стоит просто задать стили псевдоэлементу ::selection стили фона и цвета текста и, вуаля. Готово.
Пример.
Пока что всё, ибо что-то еще рассматривать лень 
Если понравится, и будет интересно что-то еще - запилю еще темку.
Сенкс за внимание.
Радик камбек :D
|
|
|
|
|
| Radiance |
Дата: Понедельник, 01.06.2015, 19:05 | Сообщение # 2
|
Боец
Сообщений: 209
Статус: Offline
|
Например, можно будет рассмотреть реализацию анимации через CSS. Достаточно интересная штука, если честно.
Радик камбек :D
|
|
|
|
|
| Bluetooth |
Дата: Четверг, 04.06.2015, 22:45 | Сообщение # 3
|
Бывалый
Сообщений: 400
Статус: Offline
|
Что я только тут узнал это про ::selection , бесполезное свойство
|
|
|
|
|
| Radiance |
Дата: Пятница, 05.06.2015, 10:48 | Сообщение # 4
|
Боец
Сообщений: 209
Статус: Offline
|
Bluetooth, да не скажи. Польза есть во всём.
Рано или поздно приходится прибегать ко всему.
Радик камбек :D
|
|
|
|
|
