Сборник CSS/HTML эффектов с кроссбраузерными решениями Страница 2

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работа

Красивые цитаты без изображений кавычек

Admin » » Сообщение:

Это совсем не сложно, потребуется только :before и blockquote:

Код: Выделить всё Развернуть
blockquote:before {
  display: block;
  float: left;
  margin: 10px 15px 0 0;
  font-size: 100px; /* сделаем большие кавычки! */
  content: open-quote; /* здесь мы определяем :before, как кавычку. Это может быть что угодно, даже альтернативный HTML объект, вроде " *, который будет выполнять роль кавычки/
  color: #bababa;
  text-shadow: 0 1px 1px #909090;
}
минимальная, максимальная ширина, rgba, непрозрачность, вращение, масштабирование, полноэкранный фон, маркеры списка, текстовые тени, множественные границы, тени блока, закруглённые углы, скринридеров, clearfix, @font-face, кавычки для цитат, css для iphone4, красивые цитаты без изображений

CSS код для владельцев iPhone4 (высокое разрешение)

Admin » » Сообщение:

Время идёт и у нас появляются всё более мощные мобильные устройства. Это хорошая практика, и мы должны оставить лучшее впечатление владельцам новых устройств.
Т.к. у iPhone4 достаточно высокое разрешение экрана, если вы не предоставите лучший (и больший) вариант своего логотипа, к примеру, то пользователи получат его размытый вариант. Эту проблему можно решить всего несколькими строками:

Код: Выделить всё Развернуть
@media handheld, only screen and (max-width: 767px) {
   .logo {
      /* малые разрешения и малые размеры */
      background: url(logo.jpg) no-repeat;
   }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   .logo {
      background: url(logo2x.jpg) no-repeat;
      background-size: 212px 303px;
   }
}
css код для владельцев iphone4, высокое разрешение

CSS горизонтальная/портретная ориентация изображений для моб

Admin » » Сообщение:

Это хорошая отправная точка для определения ориентации мобильного телефона.

Код: Выделить всё Развернуть
/* Смартфоны (портретная и горизонтальная ориентация изображений) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  /* Стили */
}

/* Смартфоны (горизонтальная) ----------- */
@media only screen
and (min-width : 321px) {
  /* Стили */
}

/* Smartphones (портретная) ----------- */
@media only screen
and (max-width : 320px) {
  /* Стили */
}

/* iPad (портретная и горизонтальная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  /* Стили */
}

/* iPad (горизонтальная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  /* Стили */
}

/* iPads (портретная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  /* Стили */
}

/* Настольные компьютеры и лэптопы ----------- */
@media only screen
and (min-width : 1224px) {
  /* Стили */
}

/* Большие экраны ----------- */
@media only screen
and (min-width : 1824px) {
  /* Стили */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Стили */
}
css горизонтальная/портретная ориентация изображений для мобильных телефонов

Пред.