Создание рамок средствами CSS

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

Для начала рассмотрим, самые простые рамки. Для их создания, в CSS используется  свойство border, которому можно задать следующие значения:

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

Ещё два свойства необходимые для создания простых рамок — это

widht – толщина рамки;

color – цвет рамки;

Согласно техники сокращения, записываются значения, одной строкой, через пробел.

p{
  border: 2px solid #ffff00;
}

Далее задаются отступы для рамок. Задаются они следующими свойствами:

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

Ещё для отступов задаются направления (с какой стороны на сколько отступить). Эти свойства применяются, когда возникает необходимость разместить содержимое не по центру рамки, или саму рамку с каким либо смещением.

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева

Записываются значения этих свойств в сокращённом варианте друг за другом (padding: 10px 30px 15px 20px), и первым ставится значение top, а дальше по часовой стрелке остальные.

Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.

p{
  border2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px;
}

Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center;

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

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

p{
  border2px solid #ffff00;
  padding10px 20px 10px 20px;
  margin20px;
  width: 400px;
}

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

И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.

А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.

p{
  border2px solid #ffff00;
  padding10px 20px 10px 20px;
  margin20px auto;
  width: 400px;
}

Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.

В следующих примерах будет изменяться только CSS (то, что заключено в тег style).

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
  <style>
    body{
      border: 2px solid #E5FA05;
}
    p{
      text-indent: 30px;
      border: 2px solid #ffff00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}
  </style>
</head>
<body>
  <p> Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

  </p>
</body>
</html>

Результат:

Рамки средствами css

Следующая рамка dashed (пунктир).

p{
      text-indent: 30px;
      border: 2px dashed #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}

Результат:

59

Рамка dotted:

p{
      text-indent: 30px;
      border: 3px dotted #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}

60

Рамка double:

p{
      text-indent: 30px;
      border: 5px double #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}

61

Рамка groove:

p{
      text-indent: 30px;
      border: 7px groove #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}

62

Рамка ridge:

p{
      text-indent: 30px;
      border: 10px ridge #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}

63

Дальше немного интереснее. Создадим рамку с закруглёнными уголками.

Для этого уберём border, и добавим border-radius и box-shadow.

 p{
	border-radius: 10px;
	box-shadow: 0 0 0 3px #ff4f00;
	text-indent: 30px;
	padding: 10px 20px 10px 20px;
	margin: 20px auto;
	width: 400px;
}

64

Размоем внешний край рамки. Для этого в свойстве box-shadow, увеличим третью цифру.

 p{
	border-radius: 10px;
	box-shadow: 0 0 7px 3px #ff4f00;
	text-indent: 30px;
	padding: 10px 20px 10px 20px;
	margin: 20px auto;
	width: 400px;
}

65

Сделаем разноцветную рамку. Для этого в свойство box-shadow, через запятую, добавим ещё несколько комплектов значений с разными цветами.

 p{
	border-radius: 10px;
	box-shadow: 0 0 0 3px #ff4f00,
		0 0 0 7px #ffdb00,
		0 0 0 10px #00ffa2;
	text-indent: 30px;
	padding: 10px 20px 10px 20px;
	margin: 20px auto;
	width: 400px;
}

66

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p{
	border-radius: 50%/50%;
	box-shadow: 0 0 0 3px #ff4f00,
				0 0 0 7px #ffdb00,
				0 0 0 10px #00ffa2;
	padding: 40px;
	margin: 20px auto;
	width: 130px;
	height: 130px;
	text-align: center;
}

Рамки CSS

Если поиграть с дробным значением border-radius, можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

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

Реализуется эта опция при помощи псевдокласса :hover.

p{
	border-radius: 10px;
	box-shadow: 0 0 0 4px #ff4f00;
	text-indent: 30px;
	padding: 10px 20px 10px 20px;
	margin: 20px auto;
	width: 400px;
}
 p:hover{
	border-radius: 10px;
	box-shadow: 0 0 0 4px #00ff62;
	text-indent: 30px;
	padding: 10px 20px 10px 20px;
	margin: 20px auto;
	width: 400px;
 }

В спокойном состоянии:

68

При наведении курсора:

69

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..

Сокращение записи CSS < < < В раздел > > > Как самому сделать и установить красивые маркеры для списка
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

18 комментариев на «Создание рамок средствами CSS»

  1. арт говорит:

    подскажите как вывести ссылку на соседний блог чтоб при клике на ссылку открывалась в соседнем блоке на этой же странице

  2. stariс говорит:

    Обязательно получится. У меня цейтнот. Не до «для души». Не сердись. А знания они вот так и приобретаются.

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

    Если поможет, то вот пример двух блоков, с тенями от нижнего Вставь в Notepad++.
    Эт пока в разработке.

    	<style>
    .wrapper{
    	margin: 100px auto;
    	width: 400px;
    	position: relative;
    	border-radius: 50%/50%;
    }
    .ellips{
    	position: absolute;
    	width: 360px;
    	height: 80px;
    	top: 177px;
    	left: 10px;
    	border-radius: 300px/20px;
    	box-shadow: -2px -2px 20px #111,
    				2px 2px 20px #111;
    	transform: skewY(13deg);
    }
    .lenta{
    	position: absolute;
    	top: 180px;
    	left: -25px;
    	width: 450px;
    	height: 80px;
    	border-radius: 20px/5px 0px;
    	background: #fff;
    	transform: skewY(13deg);
    	box-shadow: inset 10px 0 40px #AAB0BC,
    				inset -10px 0 40px #AAB0BC;
    
    }
    
    .noy-p1{
    	   font-size: 40px;
    	   margin-right: 100px;
    }	
    		
    </style>		
    		
    	<div class="wrapper">
    		<div class="ellips"></div>
    		<div class="lenta">
    			<marquee><span class="noy-p1">Новости планеты</span>
    					 <span class="noy-p1">Новости планеты</span>
    					 <span class="noy-p1">Новости планеты</span>
    					 <span class="noy-p1">Новости планеты</span>
    					 <span class="noy-p1">Новости планеты</span>
    			</marquee>
    		</div>
    	</div>
    

    Измени позиции .ellips или .lenta, и сам увидишь.

    Для новичка конечно трудновато будет. Хошь-не хошь, а придётся стать мастером, чтоб такой прибамбас сделать и до ума довести.

    Я вот пытаюсь мелкую волну вокруг курсора пустить при клике. На CSS не реализуется. Только Javascript, а я в нём начинающий. Вот и копаю, и осваиваю. И кроме дядюшки гугла никого.

  3. Андрей говорит:

    stariс, идей много, а вот с реализацией проблемы )))
    Знания CSS у меня на уровне новичка. Цвета и толщину — подгоню без проблем, а вот сама реализация — проблема. Тоже ждать готового решения не буду, буду искать инфу и пробовать, если получится то что хотелось — вкину результат.

  4. stariс говорит:

    Другое решение — это box-scadow (тень) и формат rgba (прозрачность).

    Реализуемо на чистом CSS. А вот за код, боюсь, даже самого огромного спасиба Будет маловато. На таком эффекте несколько дней просидишь. Подбор оттенков, анимация.

    Но за идею спасибо. Будет время займусь для души.

  5. Андрей говорит:

    Здравствуйте. Можно ли как то в CSS создать подобную рамку?
    http://s020.radikal.ru/i720/1612/6b/c7dbc35bb64f.png
    По сути, для этого надо создать background-color серого цвета, а в нем background-color белого цвета с отступом по контуру и с закруглением нудных углов. Но как это сделать, если при задании 2-х background-color, идет конфликт?
    Если кто то все таки знает как добиться (по возможности прошу примером показать код, то еще один вопрос, а можно ли чторой фон задать не белым, а прозрачным, но чтоб и первый background-color (серый), тоже был прозрачным?
    Возможно у этой задачи есть другое решение? Например задается border, толщиной например 2 пиксела, а потом нужные углы деформировать до нужной формы? Это был бы вообще идеальный вариант. За ранее спасибо за старания.

  6. Борис говорит:

    Спасибо, staric!)

  7. stariс говорит:

    <p>Текст</p>
    <p class=»next»>Текст</p>
    p {
    стили для пунктирной рамки
    }
    .next {
    стили для сплошной рамки.
    }
    Вот так будут друг над другом.

  8. Борис говорит:

    Привет! Подскажите, как расположить одну рамку над или под другой?
    Например, пунктирную под сплошной.

  9. stariс говорит:

    Ну а как же не возможно, если в статье это сделано? Я не пойму даже что объяснять. В коде есть свойства padding (внутренние отступы) и text-align (выравнивание текста), вот ими и выравнивайте как надо.

  10. sofi.fm говорит:

    Здравствуйте. Я переделала рамку в овал. и у меня возникла проблема. Текст не хочет располагаться по центру рамки. Его возможно вообще поместить туда? Или забить и сделать эллипс картинкой?

    Статья замечательная:3

  11. stariс говорит:

    Здравствуйте Николай. На их сайте отключена правая клавиша мыши, поэтому я не могу вытащить код страницы, но на взгляд там же обыкновенный border-radius пикселей в 20-25. Вы пробовали вставить это свойство в стили? Иди у Вас оно не срабатывает? Или Вы просто хотите показать мне и моим посетителям ваш сайт? На нём все рамки с закруглёнными углами. Напишите подробнее, в чём проблема, и что у вас не получается. Покажите код с которым Вы работаете.

  12. Николай говорит:

    Здравствуйте!
    Я новичок, не получается сделать рамки на фоне с закруглением, как на gett.msk.ru

  13. stariс говорит:

    Поздравляю. Значит не зря я писал.

  14. dyx86 говорит:

    Огромное спасибо за статью!!! 5 часов мучался но все таки получилось что хотел добиться !!!

  15. stariс говорит:

    Если вариант единичный, то заключите нужный участок в тег <span></span> и используйте атрибут style.

    <span style:=»border: 2px solid #f9f9f1;»>Текст или что там у вас</span>

    Если элемент в рамке располагается с новой строки, то вместо span берём тег p.

    Если одинаковую рамку нужно сделать в нескольких местах, или на нескольких страницах, то вместо атрибута style, задаётся class с любым названием.

    <p class=»nev»>Текст</p>

    После чего в файле style.css, в любом месте, прописывается селектор .nev

    .nev {
    border: 2px solid # f9f9f9
    }

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

  16. Александр говорит:

    Добрый день!А куда это всё вставлять? Вставляю на страницу в режиме текст он мне всё что на странице по отдельности выделяет и вот эту фразу выводит и тоже выделяет. Помогите Плиз!

  17. stariс говорит:

    Очень рад, что у тебя дело идёт. Впредь с платными курсами не торопись. Спроси не стесняйся. Я же тоже учусь ещё, только чуть впереди тебя. Курсов полно перелопатил, может и посоветую что получше.

  18. игорь говорит:

    Отличное написания всего и лучшее, что можно найти в интернете. Даже скачал платный начальный курс видео, но Ваши объяснения все равно лучше. Благодаря Вашим стараниям я начал понимать не только что тему сделать, но и где меня обманывали раньше. Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *