Онлайн-CSS помощьники (часть 1)

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

Вот два неплохих CSS-генератора для работы со шрифтами.  В этих генераторах вы можете наглядно протестировать созданные вами шрифты, а во втором генераторе даже посмотреть как они будут выглядеть в Win XP, Mac, Win Vista.

http://csstypeset.com/

http://csstypeset.com/

http://www.typetester.org/ (далее…)

Закругление углов через CSS

Здраствуйте. В этой статье разговор пойдет о «великом и могучем» CSS третьей версии. Как мы знаем то поддерживается он частично всеми браузерами, но совсем он не поддерживается Interne Explorer.

Эта статья предназначается менее опытным пользователем, или даже начинающим «покорителям» CSS. Итак можно приступить. Первым делом мы попробуем закруглить уголки у блока. Привожу листинг

#box {
  width: 300px;
 height: 150px;
 border: 1px solid #003c7b;
 background: #58a7f6;
 -webkit-border-radius: 10px; /* Отвечает за скругление уголков у Google Chrome и Apple Safari  */
 -moz-border-radius: 10px; /* Mozilla Firefox */
 }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari. Demo смотрим здесь

Эффект отбрасываемой тени:

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            /*Эффекты*/
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
        }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari.

Эффект отбрасываемой тени текстом

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
            /*Эффекты*/
            text-shadow: #fff 3px 3px 3px;
        }
Шпаргалки CSS + HTML5

Рад всех приветствовать на моем  блоге :-).

Это мой первый пост, и вашему вниманию я представляю небольшой набор шпаргалок (или справочников) по CSS. Как показала моя практика, то без них просто не куда не деться, все удержать в голове очень сложно 🙂 .

Первый справочник вы можете скачать по этой ссылке скачать.
В этом справочнике вы найдете описание каждого стилевого свойства. Справочник содержит таблицу браузеров с номерами версий, которые поддерживают то или иное CSS свойство.

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

И третий справочник это справочник HTML5. По строению очень напоминает второй=). Качаем здесь

Всем приятного прочтения, запоминания и напоминания. До скорой встречи