Главная » Записи с тегом "css"

СSS-Sprit.es – генератор спрайтов

Для тех кто не в курсе, css-спрайты – это одна комбинированная картинка, из которой потом выбираются нужные изображения с помощью CSS.

Использовать спрайты нам рекомендует Google Page Speed, так как это должно ускорять скорость загрузки сайта. Вот пример спрайта с главной страницы гугла:

Теперь перейдем к тому, как создавать такие спрайты самому.
Первая возможность это Photoshop, этот вариант работает практически в любом случае. Необходимо создать новый документ, вставить в него все картинки и сохранить. Затем придется с помощью разметки или линейки замерить размеры отдельных картинок и составить html/css-код.
Второй вариант – использовать онлайн генератор, например СSS-Sprit.es. Необходимо выбрать нужные картинки и нажать на кнопку upload. В итоге, сайт выдаст нам готовый спрайт в форматах jpg, png и gif, а так же готовый html и css код. Удобно.

Прочесть новость целиком »

Онлайн сервисы | Один комментарий

Print.css – стиль для печатной версий сайта

Теги: css

Я заметил на многих сайтах (~~в том числе и на моем блоге~~ уже появился) отсутствует отдельный стиль для печати. То есть, если кто-то захочет распечатать какой-либо материал с сайта (например, отпечатать эту статью), то на бумаге он будет выглядеть почти так же как и в сети, вместе с кучей ненужной информацией, фоновой картинкой и лишними изображениями. С боковой панелью, с категориями, с облаком тегов и прочими ссылками и кнопочками, которые будут не интересны на бумаге. А на картриджах для домашнего принтера, все таки стоит экономить, так как цены для некоторых моделей очень даже кусаются =)

Так вот, для того чтобы это исправить, создадим отдельный css файл и назывем его print.css. Пропишем путь к этому файлу в header страницы:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

С его помощью мы спрячем все не нужные блоки, кнопочки, панельки и т.д. Делаем это с помощью css-параметра display, которому задаем значение none.
Например:

#sidebar {
display:none;
}

Так же можно изменить размеры текста на нормальные/стандартные, там где они были слишком большими. Изменить, а лучше совсем убрать выделяющийся цвет ссылок, убрать их подчеркивание и т.д.
Для того чтобы просмотреть как сайт будет выглядеть в отпечатанном виде, достаточно выбрать «предварительный просмотр» в меню браузера.

Надеюсь эти советы помогут Вам в созданий печатной версий Вашего сайта =)

Советы | Комментарии (3) »

Бесплатные шаблоны от CSSTemplatesMarket

Теги: css, template, xhtml, Шаблоны

CSSTemplatesMarket – предоставляет нам, помимо платных шаблонов, 14 качественных бесплатных XHTML/CSS шаблонов. Регистрация, для скачивания файлов, не требуется.

Шаблоны | Комментарии (5) »

Интересное из сети

Теги: brushes, css, jquery, photoshop, блоггинг, кисти, текстуры

Давно не делал подборок ссылок, пробежался по RSS ленте, по блогам и собрал некоторые интересные вещи за последнее время:

1. Текстуры мятой бумаги, многие сейчас используют для дизайна своих блогов (красивый пример это webdesignerwall.com):

текстуры мятой бумаги

Текстуры на Bittbox и на Spoongraphics

2. Spacegallery – jQuery plugin – Довольно таки милая мини-галерейка на jQuery, правда для себя не нашел применения, но выглядит интересно.

space gallery on jquery

3. Отличная подборка из 10 рукописных шрифтов, жаль, что как всегда без поддержки кириллицы.

4. BrushKing – Еще один новый ресурс, где собираются кисти для photoshop’a.

кисти для фотошопа

5. На Vandelaydesign сделали подборку из 45 уроков Photoshop по созданию стильных обоин разных направлений (гранж,вектор, абстракция, минимализм, ретро и др.).

уроки photoshop

6. При оформлении сайтов, очень часто нужны блоки с закругленными углами. На vremenno.net постарались собрать самые разные варианты реализаций и получился обьемный пост: 38 статей о создании закругленных углов на сайтах

rounded corners css