«Сбрасывающий» CSS

24 02/08
14

Браузеры имеют различные установки по умолчанию для элементов. В попытке сделать визуальное отображение одинаковым, многие веб-мастера используют «сбрасывающий» CSS для удаления этих установок.

Margin и padding основные свойства которые чаще всего подлежат сбрасыванию, т.к. они в большей степени влияют на структуру.

* {
margin:0;
padding:0
}

Eric Meyer предлагает использовать следующие стили:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Оба способа имеют своих сторонников и критиков.

А какие стили используете вы?

Теги:

CSS3: псевдо-класс :target

19 02/08
3

Одим из новых селекторов в CSS3 является псевдо-класс :target, который может быть применен к элементу с идентификатором (name или id). Предположим с у вас есть заголовок с id="chapter_2":

<h3 id="chapter_2">The Title of the Chapter</h3>

Вы можете создать прямую ссылку на этот элемент, добавив идентификатор в конце ссылки:

http://www.example.com/index.html#chapter_2

А с помощью :target поменять фон у этого заголовка, чтобы обозначить место куда вела ссылка.

h3:target {
background-color: #ff0
}

Очень полезная функция, не правда ли? Однако она может быть еще более полезной. Например для создания фотогаллереи на CSS.

Посмотрите на этот пример в браузере который поддерживает :target (на данный момент это Mozilla, Webkit или Opera).

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

Первый шаг заключается в том, чтобы создать список с изображением, именем и ссылкой на каждый элемент списка, например:

<ol>
    <li id="one">
        <p><a href="#one">One</a></p>
	<img src="one.jpg">
    </li>
    <li id="two">
        <p><a href="#two">Two</a></p>
	<img src="two.jpg">
    </li>
    <li id="tre">
        <p><a href="#tre">Tre</a></p>
	<img src="tre.jpg">
    </li>
</ol>

Каждый элемент списка должен иметь id и ссылку на него. Все картинки абсолютно спозиционированы в верхней части, а с помощью селектора мы просто меняем z-index у них:

img {
position: absolute
}
li:target img {
z-index: 100
}

Конечно, это лишь простой пример. С большей изобретательностью это может стать весьма полезным инструментом.

Оригинал: Making an image gallery with :target

Теги: •

Использование z-index

18 02/08
16

Использование свойства z-index немного сложнее чем может показаться на первый взгляд. Обычно мы не уделяем достаточно внимания порядку наложения элементов. Однако, применяя относительное или абсолютное позиционирование, мы сталкиваемся с тем что элементы занимают одно пространство, перекрывая друг друга. И какой элемент будет на верхнем слое зависит от порядка наложения, который можно задать с помощью свойства z-index. (далее…)

Теги:

Минимализм в веб дизайне

03 02/08
34

Минимализм имеет большую популярность в наше время. Задумайтесь на минуту: Как много простых белых дизайнов вы видели? Есть определенные причины этого и большинство из них вы уже знаете.

Минимализм = Меньше загроможденности = Меньше отвлекающих элементов = Больше внимания на важные вещи.

Но, действительно ли простые дизайны, создаются в соответствии с этими правилах? Не было ли у вас иногда ощущения, что дизайнер просто соединил два дива вместе и назвал это минимализмом.

Минимализм в дизайне блога

Читабельность приоритетна для большинства блоггеров. Т.к. если пользователю трудно прочитать ваш пост, то стоило ли его писать? Поэтому в попытке увеличить читабельность, возникает желание убрать все лишнее.

Читабельность и пустое пространство

Это все просто, однако вот еще один момент, который вы скорее всего знаете, но не думаете об этом, когда речь идет о минимализме.

Минимализм в дизайне

Конечно существуют исключения из этих правил, но общий смысл понятен. Теперь посмотрим что станет после объединения этих графиков.

Минимализм в дизайне

Минимализм является средством, а не целью

Цель в данном случае — это сайт, который позволяет пользователям с легкостью находить нужную им информацию и в то же время производит впечатление при первом посящении. Если минимализм является средством достижения этого, то в этом случае все хорошо.

Не стоит делать минимализм самоцелью. Минимализм имеет свои минусы в определенных ситуациях, а конец приходит только тогда, когда вы достигли все свои цели, какими бы то ни было средствами.

Итак, если вы выбираете тему для блога, вы хотите чтобы она была простой, или же вы хотите чтобы она была удобной?

Оригинал: «Minimalism» Is Just Designer Speak for Laziness

Теги: