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

Планшеты стали очень популярны. Поэтому если вы хотите, что то изменить на своем сайте для Ipad устройств, используйте следующий css:

@media only screen and (device-width: 768px) {
  /* Для основных стилей */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* Только для режима портретный */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* Только для режима ландшафтный */
}

Использую часто хороший плагин jQuery Form Styler от Dimox. Там  же можете почитать.

Суть плагина в стилизации чекбоксов, радиокнопок, селектов и файловых полей.

Я использую препроцессор stylus, и поэтому переписал стили для данного плагина.

Всем кому вдруг понадобиться можно забрать на github.

Визуально ничего не изменилось, просто все стили были переведены на препроцессор.

li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}

Кому интересно, можно почитать подробнее здесь ( англ. )

Для быстрой загрузки изображений используйте 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 препроцессора 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 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

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