#secondary ul a:after { content: » «; opacity: 0.1; width: 18px; position: absolute; display: block; float: right; right: 6px; bottom: 15px; height: 18px; background: url(http://apg.cloudmakers.ru/wp-content/themes/apg/icon/forward_24px.svg); background-size: contain; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #secondary ul a:hover:after { opacity: 0.4; }

«Стрелки» в конце ссылки

.entry-content a:after { content: » «; position: absolute; opacity: 0; width: 14px; margin: -2px 0 0 -3px; height: 14px; background: url(http://apg.cloudmakers.ru/wp-content/themes/apg/icon/link_24px.svg); background-size: contain; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } h1.entry-title a:after { content: » «; position: absolute; fill: azure; opacity: 0.1; height: 33px; margin: 3px 0 0 5px; width: 33px; background: url(http://apg.cloudmakers.ru/wp-content/themes/apg/icon/link_24px.svg); background-size: contain; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .entry-content a:hover:after { opacity: 0.2; } h1.entry-title:hover a:after { opacity: 0.4; }

Гиперсылки «Замочки»

  • Design

  • Site

  • Easy

Menu

Разворачивающийся список(тест)

    Menu

  • Design

  • Site

  • Easy

Меню, список категорий

    List

  • Normal

  • Before

  • After

Элементы :до и :после

    List

  • Font

  • Font

  • Font

    List — numbered

    1. Font

    2. Font

    3. Font

Списки

HOVER

Slide String

Блок описания (Move)

HOVER

Slide String

Строка описания (Flip)

HOVER

Slide String

Строка описания (Flip+Move)

HOVER

Slide String

Строка описания (Move)

HOVER

Bottom Slider

Слайд с описанием (низ)

HOVER

Top Slider

Слайд с описанием (верх)

  • Home
  • Example
  • Design

Slide 1

Slide 2

Slide 3

Слайдер

Open window

?

Test window

Mentor Framework, Example, 2015

Всплывающее окно

  • Home
  • Example
  • Design

Меню

Переключатель

+

Tags

Site

Design

Example

Element

Framework

+

Tags

Site

Design

Example

Element

Framework

Облако тегов

+

Tags

Site

Design

Example

Element

Framework

Tags

Site

Design

Example

Element

Framework

Tags

Site

Design

Example

Element

Framework

Теги

Кнопка в стиле Battle net

Кнопка в стиле Google

Italic

Наклонный текст

Color Animation

Цветовая анимация

Spacing

Отступы между буквами

Font

Обычный текст

Flip JS+css, Hover

Flip JS+css, OK!

Вращающийся блок (JS)

Flip css, Hover

Flip css, OK!

Вращающийся блок (CSS)

IMG

Фоновое изображение

Solid Color

Заливка

Gradient

Градиент