Метка: CSS
-
Различные эффекты из CSS3
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string;} .box-shadow (@string) {-webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string;} .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {-webkit-box-shadow:@x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow:@x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow:@x @y @blur @spread rgba(0, 0, 0, @alpha);}…
-
Цветные маркеры списков LI
Чтобы подчеркнуть индивидуальность можно изменить внешний вид маркированных списков. Изменит можно не только форму, цвет или эффекты, но и можно использовать изображение.
-
Простое выпадающее меню
Простейшее меню с выпадающими элементами. Не самое изящное, но самое действенное.
-
Добавляем на сайт шрифт Segoe-UI от Microsoft
После выхода windows 8 плитки и шрифт segoe стал крайне модным и чтобы не утруждать себя поиском, можно его взять с официального сайта. По этому примеру вообще любой шрифт можно либо скачать по ссылкам либо выполнять загрузку с источника.
-
Как сделать свой tooltip подсказку для ссылок
Tooltip — всплывающая подсказка для ссылки, обычно текст ее взят из тега title. Для изменения внешнего вида можно использовать java jquery.
-
Простые вкладки или спойлер на javascript
Пример простейшего спойлера для различных скрытых списков или чего-либо что должно появиться после нажатия на кнопку. Заголовок — кнопка здесь открывается скрытый текст Если требуется сделать несколько независимых спойлеров, то можно использовать нумерацию: Заголовок текст Заголовок 2 текст 2
-
Трехмерный текст css
Самый не затейливый способ сделать трехмерный текст — сделать длинную не однотонную тень. пример трехмерного текста .mystyle{ text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px…
-
Кнопки с подсказками CSS
Украсить сайт или блог можно добавлением как всяких красивых рюшечек, прозрачностей и теней так и заменой банального tooltip на свой. Стилизовать подсказку к кнопке или ссылке можно любыми свойствами css, а вызов подписи осуществлять с помощью jquery. Обычная ссылка выглядит следующим образом: это ссылка это ссылка Для преображения ссылки визуально в кнопку с подписью используем…
-
Добавление своих шрифтов на сайт @font-face
Для использования любого своего шрифта на сайте можно использовать @font-face. Для этого файлы шрифты нужно поместить в какую-либо папку на сервере, например /folder/, и указать пути в файле стилей.
-
Не стандартные шрифты Google Web Fonts
Уже давно google предоставляет возможность использовать свои шрифты на сторонних сайтах. Шрифты самые различные по стилю, есть как латинские, так и с поддержкой кириллицы. Для использования google fonts на своем сайте для начала нужно выбрать подходящий на сайте гугл фонтс. На понравившемся шрифте нажимаем ссылку quick use и проставляем настройки по своему вкусу. Внизу страницы…