Пример оформления цитаты на css

Наиболее популярных CSS примеров

Добавление тени к тексту с помощью text-shadow

Пример рамки в виде графической картинки (*.png, *.jpg, *.gif)

Добавление тени к div или img с помощью box-shadow

Закругленные углы

Индивидуальное закругление угла рамки

Добавление градиента

Добавление пробельных символов (breaks) – необходимо для печати

Пример оформление цитаты на css

CSS выравнивание по горизонтали

Выравнивание текста по вертикале в div блоке на css

Фиксация футера на CSS

Картинка загрузки изображения на CSS

Замена h1 тега картинкой на CSS

Пример буквицы на CSS

Кроссбраузерная прозрачность блока на CSS

Стилизация внешних ссылок + форматов mp3, pdf, email

Растянуть фон (изображение) на CSS

Текст в несколько столбцов на CSS

Пример rollover ссылки на CSS

Пример подключения шрифтов на CSS

Пример подключения google шрифтов на CSS

Отражение изображения на CSS

Поворот изображения на CSS

Установка размера области контента

Список CSS хаков

Пример обнуления CSS стилей

Обнуление цветов на CSS

Вот, собственно коллекция css примеров. Пользуйтесь на здоровье!

Добавление тени к тексту с помощью text-shadow

Помогает выделить текст из других. Отлично подходит для заголовков и важных цытат.

.text-shadow {

text-shadow: 2px 2px 4px #666;

}

Пример рамки в виде графической картинки

Благодаря этому примеру вы можете создать любой вид рамки и использовать ее для различных объектов. Просто нарисуйте рамку на свой вкус и воспользуйтесь следующим примером css кода.

#border-image-style {

border-width:15px;

/* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */

-moz-border-image:url(border.png) 30 30 stretch ;

-webkit-border-image:url(border.png) 30 30 stretch;

}

Добавление тени к div или img с помощью 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);

Закругленные углы

Добавляет закругленные углы к вашим CSS3 элементам. Можно свободно менять радиус углов. И главное, никакой графики.

.round{

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px; /* future proofing */

-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

Индивидуальное закругление угла рамки

Этот пример, позволяет закруглять определенный угол объекта. Ниже подан пример css кода для каждых из 4 углов.

#Bottom_Right {

height: 65px;

width:160px;

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

}

#Bottom_Left {

height: 65px;

width:160px;

-moz-border-radius-bottomleft: 50px;

border-bottom-left-radius: 50px;

}

#Top_Right {

height: 65px;

width:160px;

-moz-border-radius-topright: 50px;

border-top-right-radius: 50px;

}

#Top_Left {

height: 65px;

width:160px;

-moz-border-radius-topleft: 50px;

border-top-left-radius: 50px;

}

Добавление градиента

При использовании 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');

Добавление пробельных символов (breaks)

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

.page-break{

page-break-before:always;

}

Пример оформления цитаты на css

Еще один, немаловажный пример CSS кода. Он помогает стилизовать цитаты. Оформите красиво цитату с помощью следующего css кода.

.pull-quote {

width: 200px;

float: right;

margin: 5px;

font-family: Georgia, "Times New Roman", Times, serif;

font: italic bold #ff0000 ;

}