О верстке простыми словами

Вспомогательные css классы

Chukey — Wed, 17 Nov 2010 16:23:11 +0000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/*поплавки...кстати эти сокращенные классы используются больше всего*/
.fl {float:left !important;}
.fr {float:right !important;}
.clr {clear:both;}
/*ширина*/
.w60p {width:60% !important;}
.w63p {width:70% !important;}
.w100p {width:100% !important;}
.w25 {width:25px !important;}
.w50 {width:50px !important;}
.w70 {width:70px !important;}
.w125 {width:125px !important;}
.w150 {width:150px !important;}
.w200 {width:200px !important;}
.w210 {width:210px !important;}
.w220 {width:220px !important;}
.w230 {width:230px !important;}
.w300 {width:300px !important;}
.w310 {width:310px !important;}
.w320 {width:320px !important;}
.w350 {width:350px !important;}
.w963 {width:963px !important;}
.noBg {background:none !important;}/* убираем фон*/
.noBd {border:none !important;}/* убираем бордюр*/
/* отступы */
.mb0 {margin-bottom:0px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mt8 {margin-top:8px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.pb10 {padding-left:10px !important;}
.pb20 {padding-bottom:20px !important;}

/* для текста */
.fs10 {font-size:10px !important;}

Думаю многим верстальщикам пригодится, это как бы микро css фреймворк))

Яндекс шокировал

Chukey — Tue, 16 Nov 2010 21:14:09 +0000

Сегодня офигел по запросу “самые красивые сайты” в яндекс картинках, картинка с моего блога вышла на первое место, а картинок то не мало по такому запросу “Найдено картинок: 143 592″

Резина в несколько колонок

Chukey — Tue, 16 Nov 2010 10:34:10 +0000

демонстрация Резина в несколько колонок rezina4kol
Долго не писал в блог, уже и забыл как это, забыл с чего начинать чем заканчивать)), ну и ладно будем учиться снова..
Статья будет краткой, но содержательной.
Так как я сам люблю полазить по блогам, по разным тематическим сайтам и у меня как и у всех иногда не бывает времени на чтение теоретической и практической части, а сразу хочется посмотреть пример и залезть в код, а уже потом если что то не понятно или просто интересно почитать о чем там пишет автор, поэтому я сразу в начале поста выкладываю ссылку на пример и на архив с примером.
Ну что же, те кто посмотрел пример и кому стало интересно или что то не понятно читаем дальше..
Суть этого метода в том что к каждой колонке применяется абсолютное позиционирование в процентах, то есть если первая колонка будет 20% то вторая будет сдвинута влево от на 20%, так же и с третьей колонкой, если ширина второй равна 40% то позиция третьей колонки с левой стороны будет равна ширине первой + ширине второй колонки, то есть 20%+40%=60% в итоге в свойстве мы пропишем left:60%; таким же образом нужно занять все 100% нашего главного контейнера.
Но самое важное, наш главный контейнер, если мы заполняем его блоками с абсолютным позиционированием не имеет ни какого веса, то есть он просто остается быть пустым, и если мы захотим вывести еще несколько рядов колонок(именно рядов а не столбцов, не путайте) у нас новый ряд залезет на верхний так как позиция top установлена в самый верх контейнера.
Решение такое, мы для самого содержательного блока поставим position:relative; то есть относительную, и этот блок при большем содержание контента чем у других блоков будет распирать наш главный контейнер и он уже не будет пустым))
ну вроде все объяснил теперь выложу код html и css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="allwrap1">
<div class="col_1">
<span>текст первой колонки текст первой колонки текст первой колонки текст первой колонки span>
div>
<div class="col_2">
<h2>Резиновая колонка с относительным позиционированием для распирания блокаh2>
<span>текст второй колонки тут по идее должно быть больше контента чем в других блоках span>
div>
<div class="col_3">
<span>текст третей колонки текст третей колонки текст третей колонки текст третей колонки span>
div>
<div class="col_4">
<span>текст четвертой колонки текст четвертой колонки текст четвертой колонки span>
div>
div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#allwrap1{
width:100%;
max-width:1680px;
position:relative;
border-bottom:2px solid #09F;
margin-top:10px;
}
.col_1, .col_2, .col_3, .col_4{
top:0px;
margin-left:-2px;
border-left:2px solid #00d8ff;
}

.col_1{
position:absolute;
left:0px;
width:20%;

}
.col_2{
position:relative; //вот для этого блока мы установили относительную позицию для распирания главного блока
left:20%;
width:50%;
margin-bottom:10px;
}
.col_3{
position:absolute;
left:70%;
width:15%;
}
.col_4{
position:absolute;
left:85%;
width:15%;
}

вот и все, единственное есть пару минусов этого метода,
нельзя задать для отдельного блока конкретную ширину и необходимо знать заранее в каком блоке будет много контента, ну думаю это сделать не сложно.

демонстрация Резина в несколько колонок rezina4kol

Продаю дизайн верстку и шаблон для instantCms Бардовского клуба

Chukey — Sat, 10 Jul 2010 06:12:15 +0000

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

Вся ответственность на мне.

Пишите в комментах или в аську 472999999 легко договоримся.

Как обмануть валидатор

Chukey — Thu, 08 Jul 2010 00:58:29 +0000

Всем конечно же хочется видеть зеленый экран валидатора, ну ладно без хаков обошлись, ну ладно все чистенько, но на дворе 21 век хочется возможности css3 использовать на полную, округление углов без них никуда, тени у текста, эх если бы на них валидатор не ругался!! Так давайте же сделаем так чтоб вообще не ругался, да воот вообще можно чтобы не ругался ни на что, неее борщить нельзя))) я вам разрешаю только вкусности css3 спрятать, договорились?? Ладно рассказываю.

вот что нужно поставить в хидер вашего шаблона

1
2
3
4
5

< ?if (preg_match('/Jigsaw/',$_SERVER['HTTP_USER_AGENT'])) {?>
<link rel="stylesheet" media="all" type="text/css" href="valid.css"/>
< ?} else {?>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
< ?}?>

и фсее, просто валидный файл стилей выдаете только валидатору, другой(вкусненький) отдаете всем остальным, вот и все колдовтсво!!!
Пользуйтесь.

Рисуем кубики в иллюстраторе

Chukey — Wed, 07 Jul 2010 21:58:26 +0000

Открываем иллюстратор создаем новый документ, размер можно установить по разрешению вашего экрана.

Теперь нарисуем квадрат 100 на 100 пикселей инструментом Rectangle tool, можно воспользоваться клавишей M

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

Сделаем из квадрата кубик, для этого перейдем к effect>3D> extrude & bevel

Выставим параметры как на картинке

Все параметры нужно установить точно такие, как на картинке чтобы соблюсти симетрию нашего кубика, единственное что выдавливание вы можете установить какое хотите главное чтоб оно соответствовало ширине и высоте квадрата.

Теперь применим инструмент object>expend appearance, чтобы можно было выполнять дальнейшие операции.

Кубик мы сделали теперь его нужно залить градиентом, перейдем к палитре swatches, откроем библиотеку с градиентами open swatches library>gradient>brights

выбираем любой понравившийся и заливаем им кубик.

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

чтобы было удобнее перетаскивать кубики, можно включить умные направляющие view>smart guides

в конце у вас должно получиться что то такое

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

Извиняюсь если что то не понятно, мой первый туториал.

Галерея с описанием

Chukey — Wed, 07 Jul 2010 20:21:50 +0000

Сегодня я расскажу как сделать простенькую галерею с описанием к каждой картинке по правой стороне в две колонки.
Вот как это будет выглядеть смотрим

Мы будем использовать всего лишь два тега это img и span, для обоих в стилях установим обтекание по левой стороне, дело в том что мы не заключаем каждую картинку и текст в контейнер, потому что и так все будет работать хорошо за исключением ie6, а для того чтоб и тут было все как нужно, после каждой второй картинки с описанием мы поставим очиститель, вот код html

1
2
3
4
5
6

<img src="1.jpg" alt="" /><span>Большое описание 1</span>
<img src="2.jpg" alt="" /><span>Большое описание 2</span>
<br class="clear"/>
<img src="3.jpg" alt="" /><span>Большое описание 3</span>
<img src="4.jpg" alt="" /><span>Большое описание 4</span>
<br class="clear"/>

а вот css

1
2
3
4

body{width:960px;margin:0 auto;}
img{float:left;}
span{float:left; width:280px; padding-bottom:20px;}
.clear{clear:both;}

Совсем не много кода, правда?

для текста устанавливаем точную ширину, не забывайте учитывать ширину картинок, у меня ширина главного блока то есть body равна 960px, ширина картинки 200px а их 2 на строку то получается 400px, под текст остается 560px тоже делим на два получаем 280px, так как у нас нет ни каких отступов по сторонам такую ширину и ставим.

Кому то может не понравиться такая модель, тогда можно каждую картинку с описанием взять в контейнер и прописать для него хак, но все равно это не будет идеальным решением.
html

1
2
3
4

<div class="float"><img src="1.jpg" alt="" /><span>Большое описание 1</span></div>
<div class="float"><img src="2.jpg" alt="" /><span>Большое описание 2</span></div>
<div class="float"><img src="3.jpg" alt="" /><span>Большое описание 3</span></div>
<div class="float"><img src="4.jpg" alt="" /><span>Большое описание 4</span></div>

css

1
2
3
4
5

body{width:960px;margin:0 auto;}
.float{_display:inline; zoom:1;}
.float img{float:left;}
.float span{float:left; width:280px; padding-bottom:20px;}
.clear{clear:both;}

тут пример

Ну вот и всё, усли все это красиво оформит можно организовать очень не плохое портфолио, спасибо за внимание.

Пожалуйста прокомментируйте дизайн

Chukey — Mon, 28 Jun 2010 22:30:56 +0000

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

тут верстка макета

как обрезать изображение на css

Chukey — Thu, 17 Jun 2010 17:51:32 +0000

Часто для портфолио используют превьюшки, выделяют какую то очень важную часть изображения предварительно вырезают ее в редакторе и загружают в портфолио, есть конечно скрипты с помощью которых можно обрезать изображение как хочешь прям в браузере, но я вам расскажу как обрезать картинку на чистом css, ну мы будем обрезать ее не в прямом смысле, а как бы скрывать лишние стороны.

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

Главный помощник в этом у нас будут css атрибут overflow с параметром hidden, он не даст вылезти изображению за рамки и не появится прокрутка.

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

1 2	.crop{overflow:hidden;} .crop img{margin:-50px -50px -50px -50px;}

html так:

1
2
3

Теперь объясняю, мы поместили изображение в блок с атрибутом overflow:hidden который поможет нам скрыть ненужные стороны то есть обрезать, и задали для изображения параметры с отрицательными полями, работает это очень просто, то есть для атрибута как обычно задаются значения отступа сверху справа снизу и слева по часовой стрелке, только тут мы не отступаем а наоборот отнимаем значения от предыдущего объекта, я отнял с каждой стороны по 50 пикселей, то есть как обычно этот код можно заменить на более короткий: margin:-50px либо margin:-50px -50px;
поиграйтесь со значениями и вы поймете как он работает.

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

Вот css

1
2
3
4
5
6
7
8
9
10
11

.crop2{
overflow:hidden;
position:relative;
width:350px;
height:200px;
}
.crop2 img{
position:absolute;
top:-50px;
left:-50px;
}

вот html

1
2
3

Количество html кода для этого метода не возросло а вот css кода возросло на порядок, тут уже нужно задавать ширину и высоту, но не полного изображения а уже обрезанного по ширине справа и высоте снизу, а слева и сверху мы будем отрезать с помощью абсолютного позиционирования, top:-50px и left:-50px, вот и все. Если что то не понятно пишите в комментариях.

Еще раз пример

нашел тут, кстати там три метода, третий мне не понравился, слишком геморный, но если хотите его тоже опишу.

Растягивающийся фон как у гугла

Chukey — Thu, 10 Jun 2010 19:34:35 +0000

Вчера зашел в свой любимый поисковик, смотрю фон большуший на весь экран, еще такой интересный, какая та архитектура, потом что то нужно было на рабочем столе, свернул окно браузера смотрю фон растягивается, опа думаю интересно это в стилях фон прописан или с помощью img, открыл firebug начал ковыряться и сразу нашел img тег с тем самым фоном и прописанными стилями к нему.

И так как это реализовать?
Мы возьмем изображение из того же гугла для примера, разрешение 1400Х900, этого достаточно чтобы при растягивании особо не терялось качество.
Выводим изображение на страницу

1	<img class="rezinaimg" src="p7.jpg" width="100%" height="100%" />

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

1	<img id="fpdi" src="p7.jpg" width="1848" height="1188"/>

видимо там идет подстановка высоты и ширины с помощью java script’а, еще и id есть, точно на яве.

Теперь перейдем к стилям, точнее к позиционированию изображения.

1	,rezinaimg{position:absolute; top:0px; left:0px; z-index:-1;}

Здесь мы установили абсолютную позицию в самый верхний левый угол экрана, откуда и будет тянуться изображение,
и установили z-index минус 1 чтобы наше изображение лежало под всем остальным.
Все просто)) тут пример
А это пример на java script’е , смотрим
Пришлось использовать jquery так как в ie не устанавливаются события onresize & onload для боди, ну эт я просто другого варианта не нашел, кто знает как лучше сделать напишите.

Интересный блог, для тех кто верстает.