CSS

 Наши веб страницы выглядят всегда для разных людей не однозначно! Здесь можно описать все фразой, сколько людей, столько и мнений. При этом ее кому-то кажется, что скажем страница перегружена картинками, контентом и тому подобным,  кому-то может не хватать мелочей.  Вот что делать в такой неоднозначной ситуации?
 Ответ весьма прост и он уже давно известен. Необходимо скрывать часть информации, а при необходимости, то есть если у пользователя возникнет желание узнать подробности в виде картинок или комментариев, отображать еще что-то дополнительно. Среди веб-мастеров, веб-верстальщиков такая дополнительная всплывающая информация называется спойлер.

 Еще с детства нас научили читать по срокам, слева направо. Так сложилось исторически, к этому мы привыкли и часто с этим фактором ассоциируется и наше мировосприятие, в том числе и интернет ресурсов. То есть можно утверждать, что строчная "грядка" блоков легко воспринимается, она приятна глаза, она функциональная и естественная. Так вот, не смотря на всю примитивность кажущего в наших глазах, для того чтобы сделать красивые блоки по горизонтали в CSS придется все же потрудиться.
 Именно о том, как же сделать в строчные блоки, то есть по горизонтали по ширине страницы, я и расскажу в этой статье. Кроме того, блоки будет иметь свойство небольшой интерактивности, то есть при наведении на них мышкой чуть приподниматься. Начнем.

  Сколько уже было сказано о привлекательности страниц на сайтах... И вот он, очередной опус, о том, как сделать изменение масштаба, увеличение картинки при наведении на нее мышкой.
 Лично мне такая анимация очень нравится. Я сейчас говорю не о практичности и быстроте загрузки страницы, что является второй стороной медали, а именно о том, как это выглядит. При наведении на картинку она меняет свой масштаб, словно увеличивается? но до определенных размеров. При этом она может увеличиваться без каких-либо границ, то есть как бы в целом, так и в пределах уже заданного блока.
 Разберу тот и другой вариант, с конкретными примерами и описанием ситуации.

 Если вы время от времени верстаете сайты, то уже давно заценили как же все таки хорошо, когда что-то сделано на стилях, а не простыми картинками. Всю гибкость использования именно стилей для оформления сайта я даже и описывать не буду. Не новичку и так понятно, что здесь эти стили для дивов можно перекладывать с "живота на спину" и наоборот.
 Скажем есть у вас блок со свои дивом и стилями, мало того, что можно просто залезть в CSS и откорректировать что-то там, так еще можно и иcпользовать JS, чтобы также через него уже влиять на эти стили и шагать уже "большими" шагами в анимации сайта, в его некой интерактивности и тому подобное. В общем, не буду более излагать понятное, лучше перейду к теме статьи.

Для того чтобы несколько оживить веб ресурсы или привлечь внимание к важному, часто используется анимация. Анимация может реализовываться самыми разными способами. Самое просто это пожалуй гиф картинки, то до настоящего времени используется повсеместно и везде. В этом есть большой плюс, код для оформления анимации весьма прост.

Все остальное несколько сложнее. А это использование либо JS, либо CSS. В конечном счете JS все равно работает через подмену CSS, поэтому можно все сразу же реализовать на стилях. Именно такой пример для меню на CSS и приведу в этой статье.

 В этом примере блок будет менять свое положение и цвет фона при наведении на него мышки. Обычно подобное изменение, то есть вернее сказать применение оператора hover для стилей используется в ссылках. Когда наводим на ссылку, то она меняет свой цвет. Однако можно пойти и дальше, менять не только цвет шрифта, но и градиент для блока и даже перемещать его. Именно такой случай и разберу в настоящей статье, когда будет и меняться градиент, и меняться положение блока.

 Всевозможные анимационные элементы на веб страницах не только развлекают и делают страницу более яркой и заметной, но и порой привлекают внимание к главному, важному.
 И в случае с CSS, все мигания, мерцания и тому подобное как раз и осуществляется за счет изменения стилей. Сами стили можно менять разными способами, будь то скрипт JS или даже без обращения к нему, то есть написанием определенных правил исключительно для CSS. Так как данный раздел сайта именно про CSS, то и изменение бэкграунда (background) будет написано на чистом CSS.

 Давно уже прошло то время, когда сайту простят то, что он выглядит не очень, но при этом весьма информативен или полезен. Сегодня, чтобы ткнуть пальцем в сайт и сказать что он хорош, необходимо не только содержать, но и выглядеть. Тем более, что и оформление не стоит на месте. Сколько уж всевозможных красивых штучек придумано в стилях, поэтому не воспользоваться ими было бы грешно.
 Так вот, так как одной из основных форм предоставления информации были и есть картинки, то хотелось бы оформлять их красиво, с должным описанием. Именно оформлению картинки с описанием с блоком на ней, рядом с ней, я и хочу посвятить эту статью.

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

Вначале пару слов о сценарии...