Пример оформления цитаты на 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 ;
}