Studio AD : Закругление углов посредствами CSS

Дата: Суббота, 07.11.2009, 13:46 | Сообщение # 1

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Привет всем. Сегодня я вам расскажу как закруглять углы посредствами CSS и HTML.
Не буду много гооврить, сразу к делу.

Что нам понадобится:
1. Photoshop CS+
2. Малейшее знание HTML&CSS

Что-ж приступим.

Шаг 1
Открываем наш Photoshop. Создаем файл 500x300px, заливаем фон белым цветом. Берем инструмент «Скругленный прямоугольник» или просто клавиша U ( rounded_rectangle ). Настраиваем настройки:
1. Выбераем "Заливка пикселами"
2. Радиус: 10px (можно любой другой)
3. Прозрачность: 100%
4. Поставить галочку на "Сглаживание"

Создаем новый слой. Выбрать второй цвет(для прямоугольника) в моем случае "#0084ff". Рисуем наш прямоугольник, путем нажатия мышки, перетсакивания курсора от одной области в другую, как на скриншоте:

Заполняем свой прямоугольник содержимым. Для красоты, я сделал прямоугольнику не одноцветную поверхность т.е наложил градиент.

Шаг 2
Во втором шаге нам нужно будет нарезать углы. Углы можно нарезать путем выделения самого угла, и вставки в новый файл.

Копируем выделеную область, и вставляем в новый файл, с шириной и высотой 10x10px (это зависти от радиуса угла). Раз наш угол 10x10px, то нужно умножить 10 на 2, получится 20. Изменяем размер холста до 20x20px (Alt+Ctrl+C).
Дублируем слой угла на 4, и раскидываем их на 4 угла.

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

Дальше, складываем все слои в один. Волшебной палочкой( magic_wand

) клацаем в центр круга, после выделения, удаляем эту область (Delete).

Сохраняем картинку в формате *.png(для сглаженности), под названием "corner".

Шаг 3
Перейдем к HTML и CSS.
Создаем файл "index.html". Вставляем в него этот код:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<title>Закругление углов</title>
<style type='text/css'>
#box{width:auto;height:auto;background:#0084ff;text-align:center;position:relative;color:#fff;font:400 12px sans-serif;padding:12px 0;margin:auto;}
.title{width:100%;height:30px;background:url(titleBg.png) repeat-x;line-height:30px;font:700 20px 'Trebuchet MS';margin-bottom:12px;}
.lt,.rt,.lb,.rb{position:absolute;width:10px;height:10px;background:url(corner.png) no-repeat;}
.lt{top:0;left:0;background-position:top left;}
.rt{top:0;right:0;background-position:top right;}
.lb{bottom:0;left:0;background-position:bottom left;}
.rb{bottom:0;right:0;background-position:bottom right;}
</style>
</head>
<body>
<div id='box'>
<div class="lt"></div><div class="rt"></div>
<div class='title'>Закругление углов</div>
Посредствами CSS
<br /><br /><br />(c) UnderShot
<div class="lb"></div><div class="rb"></div>
</div>
</body>
</html>

Классы .lt,.rt,.lb,.rb — отвечают за скругление углов.
Также можно эти стили вставить в css-файл

Code

Пример закруления с помощью CSS.
Вот и все, всем спасибо, все свободны xD.

Автор: UnderShot

Прикрепления: 6657246.gif (3.0 Kb) · 0665606.gif (13.2 Kb) · 1065647.gif (7.0 Kb) · 0742910.gif (5.7 Kb) · 2741482.gif (0.5 Kb) · 8659142.gif (0.4 Kb) · 8685409.png (2.9 Kb)

Дата: Суббота, 07.11.2009, 13:58 | Сообщение # 2

Группа: Удаленные

Красиво =)

10/10

Дата: Суббота, 07.11.2009, 16:11 | Сообщение # 3

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

ad, спасибо)

fatdog

Дата: Суббота, 07.11.2009, 18:03 | Сообщение # 4

молчун

Группа: Пользователи

Пользователь №: 396

Сообщений: 2

Карма: 2

артем красавчеГГГ!

Дата: Суббота, 07.11.2009, 18:07 | Сообщение # 5

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

fatdog, спасибо

Avenger

Дата: Суббота, 07.11.2009, 20:05 | Сообщение # 6

молчун

Группа: Пользователи

Пользователь №: 309

Сообщений: 21

Круто) и мыслит мгновенно) 5+

Сообщение отредактировал Avenger - Суббота, 07.11.2009, 20:05

Carbon_fiber

Дата: Воскресенье, 28.02.2010, 18:51 | Сообщение # 7

шептун

Группа: Проверенные

Пользователь №: 545

Сообщений: 94

Получено оценок: 4

Карма: 6

Замечания: 40%

Ну нафига так изгибаться?
не проще с разу зделать круг? O_o

мне пофиг что думают обо мне, мне важно что думаю я.

Дата: Воскресенье, 28.02.2010, 19:13 | Сообщение # 8

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Carbon_fiber, так и делаю, но написал делать так, дабы не было вопросов

Aleko

Дата: Воскресенье, 28.02.2010, 20:34 | Сообщение # 9

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Quote (Carbon_fiber)

не проще с разу зделать круг?

он все правильно сделал - фш круги кривыми делает.

Бесплатные обои.

Carbon_fiber

Дата: Понедельник, 01.03.2010, 18:56 | Сообщение # 10

шептун

Группа: Проверенные

Пользователь №: 545

Сообщений: 94

Получено оценок: 4

Карма: 6

Замечания: 40%

Aleko, ну а если зажать шифт? O_o

мне пофиг что думают обо мне, мне важно что думаю я.

Aleko

Дата: Понедельник, 01.03.2010, 21:18 | Сообщение # 11

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Carbon_fiber, я не про это. Чтобы нарисовать круг точно по пиксельно, нужно очень аккуратно ставить размеры и позиционировать точки начала и завершения. Гораздо проще сделать круг из четверти.

Бесплатные обои.

Carbon_fiber

Дата: Среда, 24.03.2010, 19:34 | Сообщение # 12

шептун

Группа: Проверенные

Пользователь №: 545

Сообщений: 94

Получено оценок: 4

Карма: 6

Замечания: 40%

Aleko, можно поставить направляющие удерживая шифт, а потом рисовать круг, фш сам выровняет O_o

мне пофиг что думают обо мне, мне важно что думаю я.

Colin

Дата: Четверг, 25.03.2010, 07:05 | Сообщение # 13

говорун

Группа: Проверенные

Пользователь №: 1888

Сообщений: 132

Получено оценок: 8

Карма: 16

Quote (Carbon_fiber)

можно поставить направляющие удерживая шифт, а потом рисовать круг, фш сам выровняет

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

Мультфильм Маша и медведь смотреть онлайн бесплатно.

Дата: Воскресенье, 25.04.2010, 11:43 | Сообщение # 14

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

А не проще использовать border-radius?

GlebLozhkovoy

Дата: Воскресенье, 25.04.2010, 11:49 | Сообщение # 15

говорун

Группа: Проверенные

Пользователь №: 255

Сообщений: 116

Карма: 9

MrFrost, а , что опера и осёл уже видят border-radius?

UPD: Таки работает.

Сообщение отредактировал GlebLozhkovoy - Воскресенье, 25.04.2010, 11:55

DSC

Дата: Воскресенье, 25.04.2010, 11:56 | Сообщение # 16

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

Карма: 51

MrFrost, тут он написал о кроссбраузерном, т.к. бордер-радиус не визде работает!!

aka Latro

CoolSenpai

Дата: Воскресенье, 25.04.2010, 12:07 | Сообщение # 17

говорун

Группа: Проверенные

Пользователь №: 2213

Сообщений: 116

Получено оценок: 24

Карма: 14

UnderShot, можно ли сделать в js? Потому что в ксс места уже нету...

Дата: Воскресенье, 25.04.2010, 12:08 | Сообщение # 18

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

GlebLozhkovoy

Code

border-redius:[N]px;
-moz-border-redius:[N]px;
-webkit-border-redius:[N]px;

Про ie не знаю, но в опере, лисе, сафари, хроме работает.

CoolSenpai, пропусти свой CSS через комперессор

Сообщение отредактировал MrFrost - Воскресенье, 25.04.2010, 12:10

GlebLozhkovoy

Дата: Воскресенье, 25.04.2010, 12:09 | Сообщение # 19

говорун

Группа: Проверенные

Пользователь №: 255

Сообщений: 116

Карма: 9

MrFrost, не тупой confused

Дата: Воскресенье, 25.04.2010, 12:12 | Сообщение # 20

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

O_o

GlebLozhkovoy

Дата: Воскресенье, 25.04.2010, 12:22 | Сообщение # 21

говорун

Группа: Проверенные

Пользователь №: 255

Сообщений: 116

Карма: 9

MrFrost, for you

Осёл

Лис

Опера

в Опере красиво >:)

Вывод бордер-радиус не пашет в ИЕ. Удаляем ИЕ с компа.

Сообщение отредактировал GlebLozhkovoy - Воскресенье, 25.04.2010, 12:24

CoolSenpai

Дата: Воскресенье, 25.04.2010, 12:29 | Сообщение # 22

говорун

Группа: Проверенные

Пользователь №: 2213

Сообщений: 116

Получено оценок: 24

Карма: 14

GlebLozhkovoy,
не вижу разницы между оперой и лисом

и да IE нужно дать шанс (она пытается угнаться за мозилой и оперой)

Дата: Воскресенье, 25.04.2010, 12:51 | Сообщение # 23

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Quote (CoolSenpai)

в ксс

место всегда есть.

Дата: Воскресенье, 25.04.2010, 13:58 | Сообщение # 24

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

GlebLozhkovoy, кроссбраузерные закругленные углы без картинок: (с поддержкой IE)

Пример: Ололо?!

Подключение скрипта:

Code

jQuery:

Code

     $(function(){


       $('.c').corner();
       $('.inner').corner({
         tl: { radius: 6 },
         tr: { radius: 6 },
         bl: { radius: 6 },
         br: { radius: 6 }});
       $('.c2').corner({
         tl: { radius: 32 },
         tr: { radius: 16 },
         bl: { radius: 16 },
         br: { radius: 16 },
         antiAlias: true,
         autoPad: false,
         validTags: ["div"] });
       $('.c3').corner({
         tl: { radius: 16 },
         tr: false,
         bl: false,
         br: { radius: 16 },
         antiAlias: true,
         autoPad: true,
         validTags: ["div"] });

       $('#container-1 > ul').tabs();
     });

Html:

Code

        <div class="container" style="width:200px;">
          <div class="c" style="background:#222;border:4px solid #000;padding:6px 0;">
            <div class="inner" style="background:#444;padding:15px;border:1px solid #555;">
              <p style="color:#fff">
                 СОДЕРЖИМОЕ БЛОКА
              </p>
            </div>
          </div>
        </div>

Сообщение отредактировал MrFrost - Воскресенье, 25.04.2010, 14:32

Дата: Воскресенье, 25.04.2010, 17:32 | Сообщение # 25

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

MrFrost, чтобы их закруглить, придется вставить 699 байт, лучше пусть осел пососет.

Дата: Воскресенье, 25.04.2010, 18:55 | Сообщение # 26

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

Ну 699 байт это меньше, чем весят картинки

Дата: Воскресенье, 25.04.2010, 19:05 | Сообщение # 27

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

MrFrost, у меня одна картинка со всеми углами весит ~300 байт. А border-radius темболее меньше.

neio

Дата: Воскресенье, 25.04.2010, 19:07 | Сообщение # 28

говорун

Группа: Проверенные

Пользователь №: 128

Сообщений: 195

Получено оценок: 26

Карма: 44

Quote (UnderShot)

border-radius

Не кроссбраузерно.

Сообщение отредактировал neio - Воскресенье, 25.04.2010, 19:08

Дата: Воскресенье, 25.04.2010, 19:22 | Сообщение # 29

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Quote (neio)

Не кроссбраузерно.

Quote (UnderShot)

осел пососет

neio

Дата: Воскресенье, 25.04.2010, 19:36 | Сообщение # 30

говорун

Группа: Проверенные

Пользователь №: 128

Сообщений: 195

Получено оценок: 26

Карма: 44

UnderShot, да и не только осел, opera меньше 10 версии, firefox старых версий.

Дата: Воскресенье, 25.04.2010, 22:03 | Сообщение # 31

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

neio, может сайт вообще пососет на счет закругленных углов ^_^

StqeL

Дата: Четверг, 03.06.2010, 10:38 | Сообщение # 32

молчун

Группа: Проверенные

Пользователь №: 3033

Сообщений: 3

Карма: 0