31 фрагмент CSS-кода для правильного кодирования. Часть 2-я
Элемент должен быть относительно позиционируемым и иметь достаточные отступы, для того, чтобы учесть ширину дополнительной границы, которую вы будете создавать для псевдо-элементов.
Code
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
Псевдо-элементы расположены на определенном расстоянии от краев окна элемента, имеют отрицательный z-index для содержимого слоя, а также имеют границы и фоновые значения.
Code
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
Тень для блока с эффектом сворачивания углов на чистом CSS
Возможно использовать при оформлении, к примеру, галереи с фотографиями, как я это продемонстрировал на демо-странице. Код использовался следующий:
Code
<ul class="box">
<li><img src="http://ps-studio.info/WEBPRACTIC/52/1.jpg" border="0" alt="" /></li>
<li><img src="http://ps-studio.info/WEBPRACTIC/52/2.jpg" border="0" alt="" /></li>
<li><img src="http://ps-studio.info/WEBPRACTIC/52/3.jpg" border="0" alt="" /></li>
<li><img src="http://ps-studio.info/WEBPRACTIC/52/4.jpg" border="0" alt="" /></li>
</ul>
Ну а стили взяты у автора:
Code
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background:#fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Не даём символам верхнего и нижнего регистра изменить заданную величину Line-Height
Итак, вы также считаете, что это слишком? Ваши индексы и индекс-теги нарушают параметр линейной высоты, не так ли? Это то, что надоедало мне какое-то время тоже, но по некоторым причинам я не подумывал, чтобы исправить это, до сегодняшнего дня, когда кто-то спросил меня об этом.
Просто вставьте следующие объявления CSS для таблицы стилей, и все будет хорошо:
Code
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
Убираем полосу прокрутки в текстовом поле для IE
Заставляет задуматься, почему textareas имеют в IE полосы прокрутки, даже если они пусты. Никто не знает наверняка, но вот решение.
Code
textarea { overflow: auto; }
CSS: border-radius и -moz-border-radius
Одним из наиболее остро ожидаемых свойств CSS3 является border-radius. Веб-дизайнерам больше не придется прибегать к таблице сложной структуры, использовать готовую графику для углов или, в том числе, тайные файлы JavaScript, чтобы создавать конструкции с закругленными углами.
Хотя Internet Explorer не поддерживает многие (или любые) передовые CSS свойства, вы можете начать работу с Firefox и любым браузером из "Mozilla" - семейства. Веб-браузеры на базе WebKit также поддерживают работу с закругленными углами, делая их доступными в Safari и Chrome браузерах, iPhone и других устройствах, работающих под WebKit.
Простые и стильные цитаты
Code
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
:-moz-placeholder
:-moz-placeholder - псевдокласс, с помощью которого можно задавать стилевое оформление для текста-подсказки, созданного атрибутом placeholder.
Это позволяет веб-разработчикам и дизайнерам изменять настройки внешнего вида текстовых подсказок, который является светло-серым по умолчанию. Конечно будет плохо читаемо, если вы, например, изменили цвет фона поля формы на цвет, схожий с цветом текста подсказки, поэтому вы можете использовать этот псевдо-класс, чтобы изменить цвет текста подсказок.
Code
<!doctype html>
<html>
<head>
<title>Placeholder demo</title>
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
Прилипший футер
Я показывал вам один из способов прибивания подвала (см. в 1-й части этой статьи - Прим.PS-Studio.Info), теперь вот еще один:
Code
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* блок должен быть той же высоты, что и футер */
#footer {
position: relative;
margin-top: -150px; /* Отрицательное значение высоты подвала */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Code
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
21 удивительный шрифт, подключаемый через правило @font-face.
Хотя правило @font-face не работает во всех браузерах, я думаю, что это одно из лучших решений, доступных сегодня. Конечно, не все типы шрифтов возможно нам внедрить на наших веб-страницах. Существуют такие решения, как Typekit, которые выглядят очень многообещающими, но сегодня мы просто перейдем к правилу @font-face и посмотрим, как с помощью CSS можно использовать некоторые шрифты на своих сайтах.
Прежде, чем Вы можете начнете использовать эти шрифты на вашем сайте, необходимо объявить файл шрифта(ов) в файле CSS, а также начертание шрифта и стиль шрифта если таковые имеются. Вот так:
Code
@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}
Теперь вы можете объявить семейство шрифта. Не забудьте вставить некоторые другие (безопасные) шрифты , как запасной вариант. Вот так:
Code
h1 {
font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}
Эти шрифты Вы можете использовать с правилом @font-face:
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
.
Поворот текста с CSS
К счастью, многие из популярных браузеров на сегодняшний день поддерживает возможность поворота HTML-элементов. Более того! Мы можем заставить это работать в Internet Explorer (начиная даже с версии 5.5). Как, спросите вы? Хорошо, давайте посмотрим на HTML - код.
Code
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
Для Webkit и Firefox (на 3,5)
Code
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
Для того, чтобы выполнить трансформацию, элементу должно быть установлено display:block. В этом случае, просто оберните в теги span то, что вы хотите повернуть.
Когда дело доходит до эффектов в Internet Explorer, есть удивительное количество возможностей (и неиспользуемых при этом, я бы сказал) для использовании фильтров. Хотя заблуждаюсь, есть фильтр, называется BasicImage, который обеспечивает возможность вращения любого элемента, который имеет компоновку.
Code
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Прозрачный фон
Возможность установить прозрачность для фона без изменения прозрачности переднего плана (текста) очень удобна. Вот почему есть RGBA () в CSS (красный, зеленый, синий, альфа). IE пока не поддерживает его, но мы можем использовать градиент фильтр, который поддерживает прозрачность. В этом случае нам не нужен фактически градиент, мы просто устанавливаем начальный и конечный цвет и всё.
Code
.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}
Центрирование блока DIV неизвестной ширины
Вы можете легко центрировать блок DIV с помощью свойства margin:auto; , когда вы задали его ширину в CSS. Но в случае, если вы хотите центрировать блок DIV с неизвестной шириной, вот код:
Code
.content {
margin: 0 auto 8px;
display: table;
}
.content div {
display: table-cell;
}
<!--[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]-->
Стилизация ссылки по типу файла
Вы можете легко задать стиль конкретного URL-адреса с помощью иконок. Это работает только с CSS3 совместимыми браузерами и плохо работает с несовместимыми браузерами. Не забудьте изменить пути к иконке.
Code
/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}
Фиксим баг с двойными margin/padding в IE6/7
Эта проблема возникает, когда left/right плавающие элементы имеют определенные значения margin/padding. Чтобы исправить это, просто добавьте "display: inline" .
Code
ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* В этом примере устраняется двойной margin справа*/
Изменение стиля выбранного текста
Code
::selection
{
color: white;
background-color: red;
}
::-moz-selection /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}
Буквица
Буквица это вариант не только для книг и газет, теперь вы можете использовать его в веб-дизайн тоже, и это довольно легко осуществить.
Code
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
Стиль ссылок в зависимости от формата файла
Хотите узнать UX. Начните с этого. Этот фрагмент CSS кода добавляет иконки рядом с конкретными ссылками так, чтобы пользователь знал, куда эти ссылки ведут его.
Code
/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
Перевод: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
