Домой / Для сайта

Для сайта

Галерея на CSS

Галерея на CSS

Здравствуйте, друзья! Сегодня я хочу показать вам пример создания галереи изображений на чистом CSS, без использования каких-либо скриптов. Реализована галерея таким образом, что при загрузке страницы мы видим галерею с изображениями размером 300х400, которые используются для предпросмотра. После клика на изображение — открывается его увеличенная копия размером 800х600. Из этого вытекает, что для создания галереи нам нужно по два изображения на один элемент галереи. ... Читать далее »

Прикольный ховер-эффект для изображения на CSS

Прикольный ховер эффект для изображения на CSS

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений. В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы. Изменить иконку лупы которая появляется при наведении на изображение на любую другую очень просто! Для этого необходимо в классе .gallery a:before изменить ссылку фона в свойстве background на адрес другой иконки. Для ... Читать далее »

Выезжающее меню с помощью CSS и jQuery

Выезжающее меню с помощью CSS и jQuery

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery. Меню выезжает сверху при нажатии на «кнопку» расположенную по центру в самом верху. После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой. Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить ... Читать далее »

Плавная навигация «Go To» на одностраничном сайте

Плавная навигация "Go To" на одностраничном сайте

Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут. Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как ... Читать далее »

Падающий снег для сайта на HTML5 Canvas

Падающий снег для сайта на HTML5 Canvas

Предлагаю вашему вниманию эффект падающего снега, который реализован с помощью Canvas.  В данной реализации эффекта падающего снега есть один интересный плюс — снег отлетает от курсора мыши. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Галерея с эффектом размытия фона (blur effect)

Галерея с эффектом цветового размытия фона (blur effect)

Пример создания галереи с очень интересным эффектом. При наведении на изображение меняется фон, в зависимости от выбранного изображения. На фоне мы видим размытое изображения из галереи, на которое мы навели курсором мышки. Если из CSS кода убрать: Мы получим не размытый, а изображение из галереи на которое мы навели мышкой, но в полном размере и без эффекта размытия. Как видите, таким ... Читать далее »

Hover-эффект трансформации текста SkewY

Эффект трансформации текста SkewY

Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. ... Читать далее »

Всплывающее и распадающееся на кусочки модальное (popup) окно

Всплывающее и распадающееся на кусочки модальное (popup) окно

Отличный пример создания оригинального и необычного модального окна для вашего сайта. Данный пример реализован с помощью CSS, jQuery и библиотеки TweenMax.min.js. Важно! Не забудьте обязательно подключить библиотеку jQuery и TweenMax. Использование данного примера ограничивается практически только вашей фантазией. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Плавная навигация на странице

Плавная навигация на странице

Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока. Пример ссылки в меню на якорь блока: где #defaults это id блока div «О нас». Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML ... Читать далее »

Выезжающая панель для сайта на jQuery и CSS

Выезжающая панель для сайта на jQuery и CSS

Если вы искали как сделать выезжающую панель для сайта, тогда данный пример для вас! При клике по кнопке панель выезжает с правой стороны веб-станицы, а закрывается при нажатии на любую область страницы, кроме окна выдвигающейся панели или при нажатии на иконку закрытия в вернем углу. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »