Здесь рассмотрим самую актуальную подборку полезных стилей CSS для сайта, что представлено небольшое, но очень нужны короткие кусочки стилей, что основном используются верстке. Здесь будут как старые, так и новые предложение спецификация CSS3. Безусловно подборка не полная, но как уже сказано, что самые применяемые стили будут представлены. Которые для веб мастеров пригодятся при построение интернет ресурса или при смени дизайн как дополнение.
Если у кого есть свои дополнение или варианты, то плиз пропишите.
ЦЕНТРИРОВАНИЕ БЛОКА ПО ВЕРТИКАЛИ И ГОРИЗОНТАЛИ
Суть проста, позиционируем элемент сверху и слева на 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; /* Красный цвет текста */
}
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;
}
Добавляем тень для блока -box-shadow
Добавляет объёма на странице
Код
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
Закругляем края у блока -border-radius
Код
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-o-border-radius:10px;/*я не уверен в поддержке*/
}
Каждому углу — свое значение радиуса
Код
#box {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
-moz-border-radius-topleft: 40px;
border-top-left-radius: 40px;
}
Градиентный фон – linear-gradient
С приходом CSS3 больше не нужны изображения для градиентов на странице.
Код
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top, #74b8d7, #437fbc);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#74b8d7', endColorstr='#437fbc');
Как сделать первую букву текста БОЛЬШЕ остальных. Классический стиль или буквица
Код
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
Прозрачность на странице
Можно сделать любой блок на странице прозрачным.
Код
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Сброс всех цветов и выделение ссылок из текста
Код
* {
color: black !important;
background-color: white !important;
background-image: none !important;
}
a:link {
font-weight: bold;
text-decoration: underline;
color: #06c;
}
