css


БЭМ для CSS

В этой статье я расскажу как я использую методологию БЭМ (#b_). О методологии подробнее здесь. Возможно вы подскажите мне как улучшить или пересмотреть свои методы.

Чем хорош БЭМ

Что важно для меня:

  • поддержка кода;
  • рефакторинг;
  • переиспользование;
  • самодокументированный код;

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

CSS структура на Ruby on Rails

Сейчас я расскажу какую структуру для css можно использовать, если вы разрабатывает на Ruby on Rails.

Пару фактов при которых всё это придумывалось и создавалось:

  1. Бэкенд на рельсах, используем все возможности которые есть, например, assets pipeline
  2. Используем идею бэм методологии

Читать дальше

CSS gradients

Если вы вдруг решили изучить что такое css gradient и с чем его едят, то я для вас собрал ссылки на полезный материал как на русском, так и на английском языках.
Если есть что-то полезное у вас пишите в комментариях или на почту. Читать дальше

Media Queries для стандартных устройств

Css media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

originalURL

Data URIs

Для быстрой загрузки изображений используйте data:url

В css это делается данной конструкцией:

.class {
background: url("data:image/png;base64,you_code_here") no-repeat 0 0;
}

Вместо png впишите тот формат, который вы закодируете (gif, jpg, png).

В html это выглядит так:

<img width="10" height="10" alt="star" src="data:image/png;base64,you_code_here" />

Собственно формат записи:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Зачем мне использовать data:url ?

Главная причина это http запросы. С помощью данной технологии меньше запросов. Меньше запросов, значит лучше :)

Как закодировать картинку?

Используйте в поиске фразу base64 online или один из ресурсов:

Поддержка браузеров

Все современные браузеры поддерживают. IE начинает поддерживать с 8 версии.

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

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

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

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

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

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

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;
}