Css - сместить текст на бордюр

@53ifbb · Регистрация: 01.03.2016

Ни как не могу до конца запомнить весь этот css...(
Нужно срочно сделать блок div с бордюром и груглыми углами, а заголовок блока болжен быть написан поверх верхней линии и по центру.
А по хорошему нужен красивый бордюр как на http://jqueryui.com в самом низу, но вокруг всего блока

По братски накидайте что нибудь и текстом опишите как это написать

@dzendev · 23.03.2016, 21:12

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>По братски</title>
    <link rel="stylesheet" href="">
    <style>
        div.block{
            border: 2px solid black;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            width: 500px;
            margin: 0 auto;
            padding: 10px;
            background: #f0f0f0;
        }
        .block h1{text-align: center;}
    </style>
</head>
<body>
    <div class="block">
        <h1>Заголовок по центру</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium delectus similique voluptate sapiente voluptates non, ipsum ut? Tenetur explicabo quis ullam, quas sapiente labore officiis, architecto, possimus consectetur quae molestias.</p>
    </div>
</body>
</html>

Сообщение от 53ifbb

Ни как не могу до конца запомнить весь этот css...(

Помнить не надо всё, надо знать где это находится в справочнике.
htmlbook.ru

@53ifbb · 23.03.2016, 22:57 **[ТС]**

dzendev, да Вы плохо читали содержание темы.

Смог нарисовать почти то что представил

Название: block2.png
Просмотров: 29

Размер: 1.7 Кб

Как нарисовать, бордюр что на картинке ??

@dzendev · 24.03.2016, 12:44

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>По братски</title>
<style>
    body{background: #888888;}
    .b1{
        border: 1px solid #000;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        margin: 20px auto;
        position: relative;
    }
    .b2{
        border: 1px solid #DBDBDB;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        padding: 10px 20px;
        background: #2F2F2F;
        color: white;
 
    }
    .boxshadow{
        position: relative;
        border: 1px solid #AAAAAA;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        width: 500px;
        margin: 20px auto;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        background: #2F2F2F;
        color: white;
        padding: 10px 20px;
        box-sizing: border-box;
    }
    .b1 .header, .boxshadow .header{
        text-align: center;
        font-size: 18px;
        width: 100%;
        line-height: 1em;
        position: absolute;
        margin-left: -20px;
    }
    .b1 .header span, .boxshadow .header span{
        background: #2F2F2F;
        position:relative;
        top:-25px;
        padding: 4px 14px;
        display: inline-block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
</style>
</head>
<body>
 
<div class="b1">
    <div class="b2">
        <div class="header"><span>Верхний блок</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="b1" style="border-bottom-color: #DBDBDB;border-right-color: #DBDBDB;">
    <div class="b2" style="border-bottom-color: #000;border-right-color: #000;">
        <div class="header"><span>Плохо смотрится</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="b1" style="border-radius:0;border-bottom-color: #DBDBDB;border-right-color: #DBDBDB;">
    <div class="b2" style="border-radius:0;border-bottom-color: #000;border-right-color: #000;">
        <div class="header"><span>Уже лучше смотрится</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
<div class="boxshadow">
    <div class="header"><span>Можно так</span></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. lias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias mpedit doloremque deserunt.</p>
</div>
<div class="b1" style="background: #000;border:0;width: 499px;">
    <div class="b2" style="position: relative;top:1px;left:1px;-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);-moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);">
        <div class="header"><span>А это уже самое то</span></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam in exercitationem tenetur aut. Alias officiis ut quia excepturi, repellendus saepe repellat eveniet consequatur vel dolor molestias impedit doloremque deserunt.</p>
    </div>
</div>
</body>
</html>

@Shakalaka · 24.03.2016, 13:14

53ifbb, для первой картинки

HTML5

<fieldset>
<legend>border</legend>
  <div>text text text</div>
</fieldset>

CSS

div{
  width:300px;
  height:200px;
}
fieldset{
  display:inline-block;
  background:#444;
  border-radius:10px;
  border-style:solid;
  border-color:#121212;
}
legend{
  text-align:center;
  padding:0 10px;
  text-transform:uppercase;
  color:#888;
}

https://jsfiddle.net/shakalaka/shqwLkLz/
Для второй - border-image

@53ifbb · 24.03.2016, 20:28 **[ТС]**

Shakalaka, первую я сам нарисовал)

Добавлено через 6 часов 21 минуту
Shakalaka, в вашем примере нет ни первого вариант ни второго. Бордюр из 2 цветов состоит!!

dzendev, Вы знаете как сделать бордюр строго как на 2 изображении ? В вашем примере нет такого блока. Я сам знаю как написать все варианты которые вы представили. Если знаете как сделать блок строго по как на изобр. с 2 цветами, напишите пожалуйста, можно без кода, просто словами...

Строго (читать сверху вниз, слева на право): Верх -> бел-черный, низ -> черный-белый, лево -> черный белый, право -> белый-черный

Добавлено через 1 минуту
п.с. Нужно на чистом СSS3! Без изображений

@dzendev · 24.03.2016, 20:49

Вы сами себе противоречите

Сообщение от 53ifbb

Ни как не могу до конца запомнить весь этот css...(

Сообщение от 53ifbb

. Я сам знаю как написать все варианты которые вы представили.

@53ifbb · 24.03.2016, 22:12 **[ТС]**

dzendev, я не противоречу! Тот вариан что мне нужен я не помню как написать...

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
		1
	Css - сместить текст на бордюр 23.03.2016, 18:26. Показов 1642. Ответов 7 Метки нет (Все метки) Ни как не могу до конца запомнить весь этот css...( Нужно срочно сделать блок div с бордюром и груглыми углами, а заголовок блока болжен быть написан поверх верхней линии и по центру. А по хорошему нужен красивый бордюр как на http://jqueryui.com в самом низу, но вокруг всего блока По братски накидайте что нибудь и текстом опишите как это написать 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	23.03.2016, 22:57 [ТС]	3
	dzendev, да Вы плохо читали содержание темы. Смог нарисовать почти то что представил Как нарисовать, бордюр что на картинке ?? 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	24.03.2016, 20:28 [ТС]	6
	Shakalaka, первую я сам нарисовал) Добавлено через 6 часов 21 минуту Shakalaka, в вашем примере нет ни первого вариант ни второго. Бордюр из 2 цветов состоит!! dzendev, Вы знаете как сделать бордюр строго как на 2 изображении ? В вашем примере нет такого блока. Я сам знаю как написать все варианты которые вы представили. Если знаете как сделать блок строго по как на изобр. с 2 цветами, напишите пожалуйста, можно без кода, просто словами... Строго (читать сверху вниз, слева на право): Верх -> бел-черный, низ -> черный-белый, лево -> черный белый, право -> белый-черный Добавлено через 1 минуту п.с. Нужно на чистом СSS3! Без изображений 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	24.03.2016, 20:49	7
	Вы сами себе противоречите Сообщение от 53ifbb Ни как не могу до конца запомнить весь этот css...( Сообщение от 53ifbb . Я сам знаю как написать все варианты которые вы представили. 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	24.03.2016, 22:12 [ТС]	8
	dzendev, я не противоречу! Тот вариан что мне нужен я не помню как написать... 0

Опции темы