css затемнение фона

Как сделать css затемнение фона 5/5 (1)

Всем привет. На связи coderistu.ru

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

Читать далее


как сделать видео фоном сайта или блока

Как сделать видео фоном сайта или блока 5/5 (1)

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

Читать далее


как сделать тень на сайте

Как сделать тень на сайте

Чтобы сделать тень на сайте для текста или какого - либо элемента, необязательно прибегать к помощи Adobe Photoshop. Для этого достаточно использовать css - свойства text - shadow и box - shadow, которые помогут добавить красивую тень куда угодно: к изображениям и фото, к слову, букве, абзацу, блоку или виджету. Тени, сделанные с помощью css, можно комбинировать, создавая красивые переливы и градиенты у объектов, к которым они применяются. Так же можно регулировать прозрачность тени, размах, размытие и смещение по осям X и Y.

Читать далее


Как выровнять div блок по центру документа

Как выровнять блок div по центру страницы 4.5/5 (2)

Казалось бы, тривиальная задача:  выровнять блок <div> по центру страницы с помощью css. Но на первых этапах изучения html и сss может серьезно озадачить начинающего веб - мастера. Сам сталкивался с такой проблемой, когда пытался выровнять <div> на макете сайта, когда только начинал изучать веб - программирование. Что и послужило началом для написания этой статьи.)

Читать далее


как сделать сайт

Как быстро сделать сайт? Инструкция. 5/5 (1)

Как быстро сделать простой, но в тоже самое время полноценный сайт за пару часов? Без использования готовых шаблонов и систем управления контентом?

Для тех, кто только начал знакомиться с азами верстки, эта задача покажется очень сложной, но на самом деле создать небольшой веб - ресурс на несколько страниц можно очень быстро. При этом знаний и опыта программирования на php, javascript или jquery не понадобится, т. к. сайт будет полностью построен на базе html и css.

Читать далее


кликабельная ссылка на телефон

Кликабельная ссылка на телефон на сайте

Согласно статистике, 70% пользователей заходят на сайты с мобильных устройств, поэтому конверсия современной интернет- страницы напрямую зависит от того, насколько она оптимизирована под мобильный трафик.

Если у вас есть сайт - одностраничник, сайт - визитка или интернет - магазин и им неудобно пользоваться на смартфонах и планшетах, то с 90% вероятностью человек уйдёт на другой ресурс, где коэффициент юзабилити гораздо выше.

Читать далее


css ленточка

CSS ленточка

Рано или поздно практически каждый веб-мастер, глядя на свой сайт, приходит к мысли: "А вот в этом месте классно бы смотрелась какая - нибудь красивая ленточка". После чего приступает к реализации задуманной идеи.

Кто-то начинает рисовать ленту в фоторедакторе, а кто-то вспоминает, что быстрее, а главное, удобней, сделать такую ленту посредством css. Почему удобней? Потому что css ленточка быстро редактируется, масшатбируется и изменяется в размерах по мере необходимости.

При этом сам процесс рисования  css ленточки довольно простой и не занимает много времени.

Читать далее


текст появляющийся при наведении на картинку

Текст, появляющийся при наведении курсора на картинку 4/5 (1)

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


подключить bootstrap

Как подключить Bootstrap на сайт 5/5 (2)

Подключить со скачиванием библиотеки

Twitter Bootstrap - универсальный инструментарий, включающий в себя css, html и javascript- библиотеки, с помощью которых можно быстро создавать адаптивные сайты любой степени сложности.

Также Bootstrap станет отличным помощником, если у вас интернет-страница, которая нуждается в апгрейде. Интеграция устаревшего веб-портала с Bootstrap откроет огромные возможности для расширения его функционала, обновления дизайна и улучшения юзабилити.

Читать далее