Что бы немного развеять скуку сделаю небольшой перевод статьи про всякие CSS3 трюки.
И так приступим.
Используем SVG как иконку.
Так как большинство браузеров поддерживают SVG, то можно понемногу отходить от использования .jpg и .gif. Обратите внимание на использование background-size.
|
1 2 3 4 5 6 7 8 |
.logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(roboteye.svg); background-size: 100px 82px; } |
Закругленный вокруг изображения текст.
Настройка shape-outside позволяет создать геометрическую форму.
|
1 2 3 4 5 |
.shape { width: 300px; float: left; shape-outside: circle(50%); } |
Результат будет следующий
Изменение цвета при наведении.
|
1 2 3 4 5 6 7 8 9 10 |
a { color: #000; -webkit-transition: color 1s ease-in; /*safari and chrome */ -moz-transition: color 1s ease-in; /* firefox */ -o-transition: color 1s ease-in; /* opera */ } a:hover { color: #c00; } |
Пример кода и его работы тут.
Задаем стиль для отсутствующих изображений.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
img { min-height: 50px; } img:before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; } img:after { content: "\f127" " Broken Image of " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 5px; left: 0; width: 100%; text-align: center; } |
В результате если изображение отсутствует пользователь увидит это
Более детальная статья тут.
На сегодня все, хорошего вам дня.