Наверняка все вы, встречали сайты, где основной фон, или же фоны отдельных блоков с содержанием, выполнены в виде клеток. Чаще всего для оформления фона в клеточку используют изображения различных фоновых текстур (паттернов). Мало кто знает, что при создании клеточек, как в школьной тетради, можно обойтись без дополнительных изображений, исключительно средствами CSS. Предлагаю на рассмотрение простейший…
Предлагаю коротенький фрагмент кода CSS, с помощью которого вы легко сможете выстроить миниатюры изображений в стройную сетку, привычный всем макет галереи. Для размещения миниатюр, используем простой неупорядоченный список <ul>, который в зависимости от размера картинок, будет автоматом выстраиваться в идеально расчерченную сетку, с равными отступами между каждой картинкой. HTML <ul> <li><a href=”#”><img src=”http://placehold.it/100×100″></a></li> <li><a href=”#”><img…
Стандартные элементы управления форм, не отличаются хоть каким-нибудь оформлением. Разработчики и веб-дизайнеры используют различные решения чтобы оригинально оформить эти элементы. С полями ввода форм, всё более-менее понятно, а вот при изменении базовых стилей чекбоксов или радиокнопок, у многих возникают затруднения. Предлагаю на ваше рассмотрение ещё одно интересное решение оформления чекбоксов, исключительно средствами CSS, с использованием…
Предлагаю на рассмотрение, готовый набор правил CSS, для создания и последующего размещения в разных углах страницы, разноцветных ленточек, сформированных исключительно средствами CSS3, без использования дополнительных файлов изображений. Для чего вообще нужны эти ленточки? Прежде всего, для акцентирования внимания пользователей на какой-либо важной информации, предельно сжатой и лаконичной. Смотреть Демо HTML Для формирования ленточек, используем блочный…
Самый простой способ развернуть текст вертикально при помощи CSS. Наверняка, многие из вас, встречали на страницах сайтов такую фишку, как развернутый текст вертикально. Понятно что банальный перенос строк с использованием тега <br>, добавляя его после каждой буквы, в данном случае не прокатывает. Как же тогда развернуть текст реально, именно развернуть буквы, так чтобы текст читался…
Готовых решений создания динамичных подписей к картинкам, появляющихся при наведении курсора на тело изображения, существует на сегодняшний день предостаточно. Однажды мы уже рассматривали один замечательный вариант, подробнейшим образом. Все они хороши по своему, какие-то отличаются простотой исполнения, другие наличием различных эффектов появления подписей. В общем, кому оно надо, тот всегда сможет найти для себя подходящий…
Очень часто, на сайтах и блогах можно встретить изображения украшенные разнообразными ленточками, с надписями и без. Что это? Простое украшательство, или же функциональный элемент пользовательского интерфейса? В большинстве случаев всё же, эти красивые ленточки выполняют те или иные полезные функции, выступают в роли подписей к картинкам, заостряют внимание посетителей на размещенных в теле ленты ссылки,…
Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах. Посмотрите на реализацию данного вида приклеенного футера, протестируйте…
Простейшее решение для поворота блочных элементов страницы под любым градусом с помощью CSS3. В примере я использовал этот метод применительно к заголовку первого уровня <h1>. Вы же, запросто можете применить поворот к любому другому блочному элементу (div, blockquote, p, h2, h3, и др.). Для того чтобы реализовать поворот на практике, достаточно в CSS…
Здравствуйте всем! Предлагаю на рассмотрение, ещё один вариант оформления текста, в данном и конкретном случае, начального заголовка <h1>, в стиле 3D, исключительно средствами CSS3, без дополнительных изображений. Небольшой сниппет, готовый набор правил и свойств CSS, с помощью которого, можно легко и просто видоизменить любой шрифт: В свое время, я уже выкладывал…
Приобретая данный курс, вы получаете целостный продукт, в котором есть всё необходимое для изучения и работы с WordPress
