С новым 2014 годом

Уважаемые подписчики, если вы еще живы :) и готовы получать интересные (я надеюсь) статьи и информацию от меня, то ждите новый gtalk.kz в новом 2014 году.

Css препроцессоры часть 1

что такое css препроцессоры

Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.

Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.

Возвращение ножа и паровоза. Работа с графикой для веба

Именно так называется мастер-класс от Вадима Макеева. Все нижеописанное явилось причиной размещения данного анонса на моем блоге. Собственно рекомендую, всем тем, кто задавал вопросы по верстке и работе с фотошопом. ;)

Сниппеты для Stylus

Здесь вы сможете найти полезные сниппеты для css препроцессора stylus. (подробнее о самом препроцессоре здесь) Большинство из них ориентированы на кроссбраузерность. Все браузеры, которые поддерживают те или иные свойства, можно посмотреть на caniuse

Все сниппеты можно добавить в отдельно созданный файл, например, config.styl и через @import 'config' добавить в основной файл stylus.


Содержание по сниппетам:

Stylus border-radius

border-radius()
	-moz-border-radius arguments /* Firefox */
	-webkit-border-radius arguments /* Chrome, Safari */
	-khtml-border-radius arguments /* KHTML */
	border-radius arguments /* Css 3*/
	behavior unquote('url(pie/PIE.htc)') /* для поддержки плохих IE */

Для того чтобы border-radius поддерживался в IE можно использовать PIE.htc (подробности здесь), либо другую альтернативу.

Stylus box-shadow

box-shadow()
	-moz-border-shadow arguments /* Firefox */
	-webkit-border-shadow arguments /* Chrome, Safari */
	border-shadow arguments /* Css 3*/

Stylus transition

transition()
	-webkit-transition arguments /* Chrome, Safari */
	-moz-transition arguments /* Firefox */
	-o-transition arguments /* Opera */
	-ms-transition arguments /* IE новые */
	transition arguments /* Css 3*/

Stylus opacity

opacity(n)
    -ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+n*100+')"') /* IE */
    filter unquote('alpha(opacity='+n*100+')')
    -moz-opacity n /* Firefox */
    -khtml-opacity n /* KHTML */
    opacity n /* Css 3*/

Центрирование сайта

Для тех кто не знает как отцентрировать сайт, напоминаю:

1.  К примеру, разметка следующая:

<body>
  <div id="page-wrap">
    <!-- здесь html вашего сайта -->
  </div>
</body>

2. Добавим css:

#wrap {
width: 960px; /* ширина вашего сайта */
margin: 0 auto;  /* выравнивание по центру отступы по бокам auto, сверху и снизу по вкусу: например, margin: 10px auto 30px; */
}

Анимированная загрузка на css

Данная анимация сделана с использованием css 3, поэтому если вы хотите более обширную поддержку браузерами, используйте gif картинки.

Html разметка очень простая:

<div class="class">
    <span></span>
    <span></span>
    <span></span>
</div>

И css сниппет:

.class {
    text-align: center;
}
.class span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.class span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.class span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes class {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes class {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}

Результат можно посмотреть:

Демо

Размытый текст

Если вам понадобилось сделать размытый текст с помощью css, используйте следующий сниппет:

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Внимание! Поддерживается не всеми браузерами.

Пример:

Размытый текст

Лучше Helvetica

Пожалуй, лучший способ использования Helvetica или как лучше использовать шрифт Helvetica

body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}

Css сниппеты для веб-разработчика

Приветствую всех пользователей/посетителей блога gtalk.kz. Сегодня я хочу поделиться с вами полезным разделом, открытый мой – css snippets (css сниппеты).

В данном разделе я буду собирать интересные и полезные коды css и html.css-snippets css сниппеты

Что такое сниппеты и зачем они нужны вы можете прочитать на той же странице. Добавляйте ее в закладки, подписывайтесь на обновления. ;) Будем добавлять самое полезное и интересное. И не только просто код, а также описание и руководства к ним или туториалы (сейчас так модно руководства называть :) ).

Кстати, подобную статью я уже писал. Можете почитать ее  –  20 невероятно полезных css сниппетов (только сейчас будет раздел)

До скорых встреч. Надеюсь теперь появляться чаще.

з.ы. многие хорошие вещи будем брать тут (англ.)

Кроссбраузерный @font-face

Для загрузки на сайт нестандартных шрифтов, используйте следующий css сниппет:

@font-face {
font-family: 'MyFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Современные браузеры */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Для непосредственного использования:

.you_class {
font-family: 'MyFont', sans-serif;
}
По возможности используйте универсальные семейства шрифтов.