�

Сен

28

Делаем профессиональные таблицы с помощью CSS

By masster

По качеству верстки таблиц на сайте можно судить о профессиональности дизайна всего сайта. Именно верстке таблиц зачастую уделяется слишком мало внимания. Поэтому этот видео тюториал (на англ. языке, но все понятно из картинки) поможет начинающему верстальщику делать стильные таблицы для сайта.

CSS Table Tutorial from TheWebSqueeze on Vimeo.

Это html файл:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> CSS Tables >> A Screencast by Jack Franklin
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>





Name
Age
Shoe Size






Bob
15
11




Jack
10
9




Bobette
17
3




Jim
12
6




Jacob
97
4




Karinne
12
5




Linda
20
8




Simon
11
12






</body>
</html>
</pre> 

А это CSS файл

table {
    border-collapse: collapse;
    width: 500px;
    font-family: 'Trebuchet MS';
}

tbody tr:nth-child(odd) {
    background-color: grey;
}

tbody tr:hover {
    background-color: #E3E3E3;
}

tr {
    height: 50px;
}

td, th {
    text-align: center;
    border: 3px solid #ccc;
}

thead tr {
    background-color: #111;
    color: white;
}



Источник: http://www.thewebsqueeze.com


                    

                        

                            No Comments                        

                        

                            RSS
                        

                        

                            Filed under: CSS                        

						
Tags: , , .

Июн

25

CSS: em и пиксели - как сделать жизнь легче?

By masster 

body {
font-size:62.5%;
}

Если установить такой размер шрифта как отправную точку для всех шрифтов на странице, то 1em будет точно равен 10 пикселей, 1.5 em - 15 пикселей. Жизнь становится легче :)

No Comments
RSS
Filed under: CSS, Совет дня
Tags: , , .

Май

5

Новая CSS галерея

By masster

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

No Comments
RSS
Filed under: CSS, Web design
Tags: .

Янв

14

Профессиональное CSS меню - часть 2

By masster

После того как основные графические элементы для меню созданы, можно приступить к CSS верстке. Для этого в корневой директории, где будет находить файл index.html, создадим папку css. Внутри этой папки заведем еще одну папку images, в которую поместим три файла:

фон :

левая “крышка”:

правая “крышка” (длинная):

Эти три файла сохраним в папке css/images

Теперь приступим к созданию стилей. Ниже приведу css файл, который сохраним под именем style.css в папке css


.menu{
background: url(images/menu_bgr.png) repeat-x;
height: 40px;
list-style: none;
}
.menu li{
float:left;
}
.menu li a{
display: block;
color:#000;
text-decoration: none;
font-size: 13px;
font-family:sans-serif;
font-weight:bold;
padding:0 0 0 19px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.menu li a span{
display: block;
padding: 0 33px 0 14px;
}
.menu li.active a, .menu li a:hover{
color: #fff;
background: url(images/menu_left.png) no-repeat left;
}
.menu li.active a span, .menu li a:hover span{
color: #fff;
background: url(images/menu_right.png) no-repeat right top;
}

И, наконец, сама страница index.html, на которой будет отображаться меню:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<ul class="menu">
<li class="active"><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Товары</span></a></li>
<li><a href="#"><span>Доставка</span></a></li>
<li><a href="#"><span>Контакты</span></a></li>
</ul>
</body>
</html>

No Comments
RSS
Filed under: CSS, Featured, Web design
Tags: , , .

Янв

2

Профессиональное CSS меню - часть 1

By masster

Что будем печь
Сегодня мы с вами испечем вот такое меню:

Идея
Идея этого меню очень простая - при движении мыши по гиперссылке пункта меню благодаря псевдоклассу :hover происходит замена стиля и это пункт меню подсвечивается. Кроме этого есть класс current (текущий), в котором происходит подсветка активного на данный момент пункта меню. Поскольку названия пунктов меню могут быть разными по длине, необходимо сделать изображение, подсвечивающее пункт меню с запасом по длине.

Итак, мы имеем три состояния пункта меню:

1. Неактивное состояние

Товары

2. Текущее активное состояние

Создаем графику для меню (Adobe Photoshop)



Скачать видео-урок (в формате AVI)

Инградиенты:
Фон:

Левая часть подсвеченного пункта меню:

Правая часть подсвеченного пункта меню:

No Comments
RSS
Filed under: CSS, Featured, Photoshop, Web design, icons
Tags: , , .

Дек

28

Генератор CSS меню -по вертикали и по горизонтали

By masster

Весьма корректно работающий генератор CSS меню. Предлагает на выбор несколько дизайн-решений как для горизонтальной раскладки, так и для вертикальной. Очень просто, очень быстро, очень качественно. Идея этого генератора очень проста - превратить ненумерованный список <ul></ul> в форматированное с помощью CSS меню. На выходе - HTML и CSS код.

No Comments
RSS
Filed under: CSS, Web design
Tags: , , .
Next Page »