Большая подборка полезных CSS рецептов для верстки

Центрирование блока по вертикали и горизонтали


Суть проста, позиционируем элемент сверху и слева на 50% и отрицательным отступом сдвигаем элемент сверху и снизу. Величина отрицательного сдвига должна быть равна сверху половине высоты и слева половине ширины соответственно!
Код
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
height: 200px;
  margin: -100px 0 0 -100px;
}

Но есть более элегантный способ, о котором знают не многие:
Код
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

В случае, если позиционируется блок, а не изображение, придется также задать ему высоту и ширину. Но к сожалению этот трюк не работает в ie7.

Вывод строки текста в многоточие


Часто можно встретить на сайтах такой трюк, где текст обрезается если его длина больше допустимой. Такую проблему можно решить разными способами. Мы же покажем вам как реализовать данный трюк при помощи лишь CSS.
Код
.text-block {
  white-space: nowrap; /* Перво-наперво, запретим перенос строк */
  overflow: hidden; /* Скрываем текст, который не помещается в блок */
  text-overflow: ellipsis; /* Уводим текст в многоточие */
  display: block; /* Элемент обязательно должен быть блочным */
}

Данный трюк работает лишь только с одной строкой. Если текст будет состоять из 2х строк, то ничего не произойдет.

Но есть еще один метод, правда он не кроссбраузерный и работает только в -webkit браузерах:
Код
h2 {
  display: block; /* Если не -webkit */
  display: -webkit-box;
  max-width: 400px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3; /* Из скольки строк должен быть текст */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Clearfix


Возможность без труда очищать плавающие элементы за счет создания класса очистки CSS.
Код

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}

.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
}


Изменяем стандартный цвет выделения текста в блоге


Теперь у вас есть возможность поменять цвет, которым выделяется текст.
Код
::selection {  
  background: #ffb7b7;
  color: #ffffff;  
  }  
::-moz-selection {  
  background: #ffb7b7;
  color: #ffffff;  
  }


Пуленепробиваемый синтаксис @Font-Face


Думаю этот снипет имеет место тут быть. Многие еще не умею подключать свои шрифты, тут мы приведем вам кроссбраузерный вариант.
Код
@font-face {  
  font-family: 'MyFontFamily';  
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),  
url('myfont-webfont.svg') format('svg'),
  url('myfont-webfont.woff') format('woff'),  
  url('myfont-webfont.ttf') format('truetype') ;  
  }


Оборачиваем длинные URL и большие объемы текста посредством CSS


Не часто приходится сталкиваться с данной проблемой, но иногда при вставке адреса ссылки она не умещается в блок или любого другого текста. Решение приведено ниже:
Код
pre {  
  whitewhite-space: pre; /* CSS 2.0 */  
  whitewhite-space: pre-wrap; /* CSS 2.1 */  
  whitewhite-space: pre-line; /* CSS 3.0 */  
  whitewhite-space: -pre-wrap; /* Opera 4-6 */  
  whitewhite-space: -o-pre-wrap; /* Opera 7 */  
  whitewhite-space: -moz-pre-wrap; /* Mozilla */  
  whitewhite-space: -hp-pre-wrap; /* HP принтеры */  
  word-wrap: break-word; /* IE 5+ */  
  }


Создаем эффект буквенницы


Помните эту первую красивую букву в сказках? Так вот как это можно сделать:
Код
P:first-letter {
  font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
  font-size: 200%; /* Размер шрифта первого символа */
  color: red; /* Красный цвет текста */
  }


Стили для разных девайсов (по ширине экрана)


Хотите быстро и без особого труда сделать мобильную версию сайта? Тогда воспользуйтесь этим сниппетом:
Код
/* Смартфоны (портретный и ландшафтный режимы) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Смартфоны (ландшафтный режим) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Смартфоны (портретный режим) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (портретный и ландшафтный режимы) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (ландшафтный режим) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (портретный режим) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@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 */
}

Можно прописать разные стили в отдельные файлы для каждого девайса, например:
Код
<head>
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="css/widescreen.css" media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="css/iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
</head>

Так же понадобятся некоторые meta теги, которые помогут в нормальном отображении сайта в мобильных устройствах:
Код
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="HandheldFriendly" content="true">

И напоследок рекомендуем ознакомиться с этой статьей!

Оформляем ссылки в зависимости от контента


На нашем сайте уже была похожий урок, который показывал стилизацию таких ссылок, но думаю здесь он не будет лишним и дополнит приведенный ниже код.
Код
/* external links Спецификация ^= выбирает все ссылки, начинающиеся c http://*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* email Спецификация ^= выбирает все ссылки, начинающиеся c mailto: */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdf Спецификация $= выбирает все ссылки, заканчивающиеся на ".pdf" */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip Тоже самое для архивов zip, но еще добавляет иконку перед ссылкой, используя псевдоселектор :after */
a[href$=".zip"]:after{
content: url(icons/zip.png);
}


ПОДГОТОВКА СТРАНИЦЫ К ПЕЧАТИ.


По ходу работы бывает, что у пользователя возникают трудности с печатью страницы. Например ему нужно лишь распечатать текст, без всего шаблона и оформления. Тут вам пожет этот код:
Код
@media print {
* {
background: none!important;
color: black!important;
-khtml-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
text-shadow: none!important;
filter: gray();
filter: url('desaturate.svg#grayscale');
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a {
text-decoration: underline;
}
a[href]:after {
content: "(" attr(href) ")";
}
a[href="#"], a[href="javascript:"] {
content: "";
}
}

CSS3: свойство Box-Sizing


Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px. Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border.
Код
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #eaeaea;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}


Пишем стили для каждой версии IE


Internet Explorer до сих пор остается большой проблемой для многих верстальщиков, особенно для начинающих! Вставьте этот код вместо привычного тега html и сможете писать стили под каждую версию IE.
Код
<!--[if IEMobile 7 ]> <html lang="ru" class=" iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html lang="ru" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="ru" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="ru" class="ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html lang="ru"><!--<![endif]-->

Пример:
Код
.ie6 .class {background: #fff}
.ie7 .class {background: #eee}
.ie8 .class {background: #000}
.iem7 .class {background: #aaa}

Если у вас есть пожелания или имеются еще какие нибудь трюки, которые вы хотите увидеть здесь, то сообщите об этом в комментариях!

  • FalleN

  • 3273

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!