Готовые решения для оформления сайта
Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.
Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения на чистом CSS3.
Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]
Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)
Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента, а при помощи border-radius создаются закругления углов. Но возможности этих свойств ограничиваются видом прямоугольника или прямоугольника с закругленными углами, возможность заключить выбранный элемент в круг или овал. Но заключить элемент в многоугольную, не симметричную, очень сложной конфигурации границу при помощи этих свойств у нас не получиться…
Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.
В этой статье представлены несколько различных трансформаций, которые удобно применить ,например, для анонсирования своей продукции или услуг. Неплохо эти варианты будут смотреться и в рекламных блоках. Вариант, представленный ниже, возможно применить в интернет-магазине. Первоначально выводится изображение товара, при наведении курсора появляется краткая информация или параметры.
Приподнимаем заслонку дверного глазка наводя курсор, а под ней находится ссылка на скачивание. Код каждого из представленных ниже глазков одинаков. Разница состоит в том, что для каждого из вариантов используются различные фоновые изображения и значения некоторых свойств. Различия выделены соответственно разными цветами.
Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.
Как обычно, внешнее оформление, размеры, содержимое каждый выбирает сам, здесь задается только описание самого эффекта.
