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 фреймворк))
демонстрация Резина в несколько колонокrezina4kol
Долго не писал в блог, уже и забыл как это, забыл с чего начинать чем заканчивать)), ну и ладно будем учиться снова..
Статья будет краткой, но содержательной.
Так как я сам люблю полазить по блогам, по разным тематическим сайтам и у меня как и у всех иногда не бывает времени на чтение теоретической и практической части, а сразу хочется посмотреть пример и залезть в код, а уже потом если что то не понятно или просто интересно почитать о чем там пишет автор, поэтому я сразу в начале поста выкладываю ссылку на пример и на архив с примером.
Ну что же, те кто посмотрел пример и кому стало интересно или что то не понятно читаем → Далее
By
Chukey |
16-11-2010
Комментариев нету
Заказчик кинул с оплатой, хочу вытащить сумму проекта, плюс бонус исходник дизайна..
Вся ответственность на мне.
Пишите в комментах или в аську 472999999 легко договоримся.
Всем конечно же хочется видеть зеленый экран валидатора, ну ладно без хаков обошлись, ну ладно все чистенько, но на дворе 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"/>
< ?}?> |
и фсее, просто валидный файл стилей выдаете только валидатору, другой(вкусненький) отдаете всем остальным, вот и все колдовтсво!!!
Пользуйтесь.
By
Chukey |
08-07-2010
Комментариев нету
Сегодня я расскажу как сделать простенькую галерею с описанием к каждой картинке по правой стороне в две колонки.
Вот как это будет выглядеть смотрим
Мы будем использовать всего лишь два тега это 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"/> |
→ Далее
By
Chukey |
07-07-2010
Комментариев нету
нарисовал дизайн для этого блога, да и сверстал уже, что вы о нем думаете отпишитесь пожалуйста
тут верстка макета
Часто для портфолио используют превьюшки, выделяют какую то очень важную часть изображения предварительно вырезают ее в редакторе и загружают в портфолио, есть конечно скрипты с помощью которых можно обрезать изображение как хочешь прям в браузере, но я вам расскажу как обрезать картинку на чистом css, ну мы будем обрезать ее не в прямом смысле, а как бы скрывать лишние стороны.
Вот тут готовый пример с двумя методами, лучше посмотрите сразу, так как сам найдя какую то информацию или интересный урок сначала ищу ссылку на пример а уже потом если нравится, перехожу к коду.
→ Далее
Вчера зашел в свой любимый поисковик, смотрю фон большуший на весь экран, еще такой интересный, какая та архитектура, потом что то нужно было на рабочем столе, свернул окно браузера смотрю фон растягивается, опа думаю интересно это в стилях фон прописан или с помощью img, открыл firebug начал ковыряться и сразу нашел img тег с тем самым фоном и прописанными стилями к нему.
→ Далее
Загрузка ...