• Страница 1 из 1
  • 1
Закругление углов посредствами CSS
UnderShot
Дата: Суббота, 07.11.2009, 13:46 | Сообщение # 1
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85

Привет всем. Сегодня я вам расскажу как закруглять углы посредствами 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

<style type='text/css'>
.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>

Пример закруления с помощью 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)


Очень важная тема!
Filmzona — онлайн фильмы.
  
ad
Дата: Суббота, 07.11.2009, 13:58 | Сообщение # 2
Группа: Удаленные
Красиво =)

10/10

  
UnderShot
Дата: Суббота, 07.11.2009, 16:11 | Сообщение # 3
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
ad, спасибо)

Очень важная тема!
Filmzona — онлайн фильмы.
  
fatdog
Дата: Суббота, 07.11.2009, 18:03 | Сообщение # 4
молчун
Группа: Пользователи
Пользователь №: 396
Сообщений: 2
артем красавчеГГГ! :D
  
UnderShot
Дата: Суббота, 07.11.2009, 18:07 | Сообщение # 5
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
fatdog, спасибо

Очень важная тема!
Filmzona — онлайн фильмы.
  
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
Ну нафига так изгибаться?
не проще с разу зделать круг? O_o


мне пофиг что думают обо мне, мне важно что думаю я.
  
UnderShot
Дата: Воскресенье, 28.02.2010, 19:13 | Сообщение # 8
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Carbon_fiber, так и делаю, но написал делать так, дабы не было вопросов

Очень важная тема!
Filmzona — онлайн фильмы.
  
Aleko
Дата: Воскресенье, 28.02.2010, 20:34 | Сообщение # 9
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Quote (Carbon_fiber)
не проще с разу зделать круг?

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


Бесплатные обои.
  
Carbon_fiber
Дата: Понедельник, 01.03.2010, 18:56 | Сообщение # 10
шептун
Группа: Проверенные
Пользователь №: 545
Сообщений: 94
Получено оценок: 4
Aleko, ну а если зажать шифт? O_o

мне пофиг что думают обо мне, мне важно что думаю я.
  
Aleko
Дата: Понедельник, 01.03.2010, 21:18 | Сообщение # 11
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Carbon_fiber, я не про это. Чтобы нарисовать круг точно по пиксельно, нужно очень аккуратно ставить размеры и позиционировать точки начала и завершения. Гораздо проще сделать круг из четверти.

Бесплатные обои.
  
Carbon_fiber
Дата: Среда, 24.03.2010, 19:34 | Сообщение # 12
шептун
Группа: Проверенные
Пользователь №: 545
Сообщений: 94
Получено оценок: 4
Aleko, можно поставить направляющие удерживая шифт, а потом рисовать круг, фш сам выровняет O_o

мне пофиг что думают обо мне, мне важно что думаю я.
  
Colin
Дата: Четверг, 25.03.2010, 07:05 | Сообщение # 13
говорун
Группа: Проверенные
Пользователь №: 1888
Сообщений: 132
Получено оценок: 8
Quote (Carbon_fiber)
можно поставить направляющие удерживая шифт, а потом рисовать круг, фш сам выровняет

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


Мультфильм Маша и медведь смотреть онлайн бесплатно.
  
MrFrost
Дата: Воскресенье, 25.04.2010, 11:43 | Сообщение # 14
молчун
Группа: Проверенные
Пользователь №: 2614
Сообщений: 31
Получено оценок: 5
А не проще использовать border-radius?
  
GlebLozhkovoy
Дата: Воскресенье, 25.04.2010, 11:49 | Сообщение # 15
говорун
Группа: Проверенные
Пользователь №: 255
Сообщений: 116
MrFrost, а , что опера и осёл уже видят border-radius?

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

Сообщение отредактировал GlebLozhkovoy - Воскресенье, 25.04.2010, 11:55
  
DSC
Дата: Воскресенье, 25.04.2010, 11:56 | Сообщение # 16
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
MrFrost, тут он написал о кроссбраузерном, т.к. бордер-радиус не визде работает!!

aka Latro
  
CoolSenpai
Дата: Воскресенье, 25.04.2010, 12:07 | Сообщение # 17
говорун
Группа: Проверенные
Пользователь №: 2213
Сообщений: 116
Получено оценок: 24
UnderShot, можно ли сделать в js? Потому что в ксс места уже нету...
  
MrFrost
Дата: Воскресенье, 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
MrFrost, не тупой confused
  
MrFrost
Дата: Воскресенье, 25.04.2010, 12:12 | Сообщение # 20
молчун
Группа: Проверенные
Пользователь №: 2614
Сообщений: 31
Получено оценок: 5
O_o
  
GlebLozhkovoy
Дата: Воскресенье, 25.04.2010, 12:22 | Сообщение # 21
говорун
Группа: Проверенные
Пользователь №: 255
Сообщений: 116
MrFrost, for you

Осёл

Лис

Опера

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

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

Сообщение отредактировал GlebLozhkovoy - Воскресенье, 25.04.2010, 12:24
  
CoolSenpai
Дата: Воскресенье, 25.04.2010, 12:29 | Сообщение # 22
говорун
Группа: Проверенные
Пользователь №: 2213
Сообщений: 116
Получено оценок: 24
GlebLozhkovoy,
не вижу разницы между оперой и лисом

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

  
UnderShot
Дата: Воскресенье, 25.04.2010, 12:51 | Сообщение # 23
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Quote (CoolSenpai)
в ксс

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


Очень важная тема!
Filmzona — онлайн фильмы.
  
MrFrost
Дата: Воскресенье, 25.04.2010, 13:58 | Сообщение # 24
молчун
Группа: Проверенные
Пользователь №: 2614
Сообщений: 31
Получено оценок: 5
GlebLozhkovoy, кроссбраузерные закругленные углы без картинок: (с поддержкой IE)

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

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

Code
<script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>

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
  
UnderShot
Дата: Воскресенье, 25.04.2010, 17:32 | Сообщение # 25
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
MrFrost, чтобы их закруглить, придется вставить 699 байт, лучше пусть осел пососет.

Очень важная тема!
Filmzona — онлайн фильмы.
  
MrFrost
Дата: Воскресенье, 25.04.2010, 18:55 | Сообщение # 26
молчун
Группа: Проверенные
Пользователь №: 2614
Сообщений: 31
Получено оценок: 5
lol
Ну 699 байт это меньше, чем весят картинки
  
UnderShot
Дата: Воскресенье, 25.04.2010, 19:05 | Сообщение # 27
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
MrFrost, у меня одна картинка со всеми углами весит ~300 байт. А border-radius темболее меньше.

Очень важная тема!
Filmzona — онлайн фильмы.
  
neio
Дата: Воскресенье, 25.04.2010, 19:07 | Сообщение # 28
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
Quote (UnderShot)
border-radius

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


Сообщение отредактировал neio - Воскресенье, 25.04.2010, 19:08
  
UnderShot
Дата: Воскресенье, 25.04.2010, 19:22 | Сообщение # 29
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Quote (neio)
Не кроссбраузерно.
Quote (UnderShot)
осел пососет


Очень важная тема!
Filmzona — онлайн фильмы.
  
neio
Дата: Воскресенье, 25.04.2010, 19:36 | Сообщение # 30
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
UnderShot, да и не только осел, opera меньше 10 версии, firefox старых версий.
  
MrFrost
Дата: Воскресенье, 25.04.2010, 22:03 | Сообщение # 31
молчун
Группа: Проверенные
Пользователь №: 2614
Сообщений: 31
Получено оценок: 5
neio, может сайт вообще пососет на счет закругленных углов ^_^
  
StqeL
Дата: Четверг, 03.06.2010, 10:38 | Сообщение # 32
молчун
Группа: Проверенные
Пользователь №: 3033
Сообщений: 3
http://blue-anvil.com/jquerycurvycorners/test.html#fragment-2 — кстати вполне нормальный вариант, потом скопировать сам закруглённый элемент, сунуть в пейдж.
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.