CSS-Framework

Начал новый проект, CSS-Framework. Надеюсь, будет кому-то полезен :)

Это набор CSS-правил для оформления контента, форм. Стандартные горизонтальные и вертикальные меню. Некий шаблон, с которого можно быстро начать новую html-вёрстку.

Псевдокнопочки на CSS

Всё новое, это хорошо забытое старое, подумал я, читая How to make sexy buttons with CSS.

Технология сдвижных дверей, судя по всему, остаётся актуальной, пока не будет повсеместно введена поддержка CSS3.

Немного упростив вышеупомянутый код, спешу рассказать о сексуальных кнопочках.

Для создания нам понадобиться 1 картинка:

psevdoknopochki-pic-2.gif

Верхняя часть, это фон обычной кнопки, нижняя — нажатой.

Небольшая иллюстрация для наглядности:

psevdoknopochki-pic-1.gif

И совсем чуть-чуть CSS-кода:

a.button {
    background: url("button.gif") no-repeat top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px Arial, Sans-Serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
    outline: none;
}

a.button span {
    background: transparent url("button.gif") no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px;
}

Сам html-код:

<a href="/" class="button"><span>Ok</span></a>

И пример реализации.

Стилевой застой

Вот уже несколько месяцев в рунете не наблюдается ничего нового, что касается css-стилей.

Затих народ, ждёт чего-то. То ли ie7, то ли css3…

Этот блог затевался для публикаций на CSS тематику. Однако, для новичков есть достаточно много ресурсов, статей, примеров. А, для старичков то и рассказать особо нечего, всё умеют, всё знают.

Рунету осталось сделать следующий логический шаг — собрать все накопленные знания в одном месте.

css|box

В тестовом режиме запущена галерея css-сайтов. Будьте снисходительны ко всем ужасающим багам, которые вам посчастливиться найти на сайте.

Следующие сайты на время скрыты в галерее, так как, они не проходят валидацию:

Если вебмастера, которые добавляли сайты в галерею, хотят вернуть их, исправляйте баги, регистрируйтесь на http://cssbox.ru/ и пишите мне — вернём сайты.

microsoft обновляет свою главную страничку

Главная страничка компании Microsoft попыталась перейти на валидную и семантическую вёрстку. Получилось лишь первое.

На сайте присуствуют таблицы, в качестве скелета разметки. Что, не мешает этому сайту быть добавленным на cssvault.com.

С новым годом, перцы веб-дизайна!

Валидных сайтов! Больших премий, в конце месяца! Быстрой загрузки компов, шустрых текстовых редакторов, больше кликов в AdSense, 100 комментариев к каждому вашему посту!

С новым годом! Счастья вам, дорогие веб-девелоперы!

И всем всем, кого я знаю, кто меня знает и кто меня не знает. Всем, кого я не успею поздравить, всем, у кого не будет интернета в этот день, чтобы прочесть этот пост(тьфу-тьфу-тьфу)… Всем моим друзьям – я вас не забываю!

В частности; Андрею Абрамову, Вадиму Макееву(pepelsbey.net), Алексу Маузону(mauzon.com), Савве(edentata.ru), Юрику (webarts.ru), Лехе с дизайнфорума, Степану – админа этого замечательного форума, Лему (probanner.ru), всем девушкам-дизайнерам, Lera, Lisichka… Kropp (kropp.spb.ru), Lexata, Chert — вы самые замечательные на свете! Всем моим заказчикам, бывшим, текущим и будущим!

Вы такие добрые и отзывчивые люди :) Простите, если кого не помянул, шампанское по голове бьёт нещадно и друзья ждут в бильярдной… С новым 2006 годом!

css & seo

Говорят, что, если в ссылке на сайт есть ключевые слова этого сайта, то, это очень здорого помогает в раскрутке.

Зачастую видеть параграф-ссылку совсем неэстетично.

Имеем ссылку:

‹a href="#"›‹em›Много ключевых
слов… очень много… связанных с сайтом‹/em› «Рога и копыта»…‹/a›

И капельку CSS:

a em {
    display: none;
}

В итоге ссылка имеет лаконичный вид, посетители довольны, поисковики и оптимизаторы тоже.

Время революции пришло…

Таким странным заголовком хочу выразить своё удивление по поводу того, как много вопросов я вижу в последнее время на форумах про «блочную» вёрстку.

Вакансии пестрят требованиями — кроссбраузерная, валидная, «дивная» вёрстка.

Похоже, люди заинтересовались всерьез, хотя для многих она остаётся «дивной». Об этом можно судить по вопросам. Таблицы настолько глубоко засели в сознании, что новички продолжают мысленно делить макеты таблицами. В «дивной» вёрстке недостаточно заменить td на div. Нужно думать иначе.

У меня же получилось. Получиться и у вас. Я тоже начинал таблицами. Пол года я верстал именно так. Потом, пол года, я осваивал наработки «дивной» вёрстки. И сделал выбор.

Уже больше года я не делал сайты на таблицах. Это же так сложно! Столько мусора в коде и ненужных проблем… зачем, мне это?

2006 год за спиной, поддержка CSS в современных браузерах достигла очень хорошего уровня. Все карты вам в руки.

Почему тормозим? В чём у вас возникают основные проблемы при изучении CSS?

Супер CSS-ластик

Когда мне надо сделать хороший css-сайт я пишу в таблице стилей:

* {
margin: 0; padding: 0;
}

Этот код убивает вме отступы у всех тэгов. Остаётся их назначить самому, и наслаждаться неизменно превосходным результатом :)