Теперь давайте перейдём от преобразований текста, к созданию различных красивостей вокруг него, и первой такой красивостью будет рамка.
Для начала рассмотрим, самые простые рамки. Для их создания, в 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{
border: 2px solid #ffff00;
padding: 10px 20px 10px 20px;
margin: 20px;
}Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center;
Далее рассмотрим, как задаются высота и ширина рамки. Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.
Задаётся она свойством width, и в значении его указывается желаемый размер в пикселях, или других мерах длины, принятых в веб.
p{
border: 2px solid #ffff00;
padding: 10px 20px 10px 20px;
margin: 20px;
width: 400px;
}Кстати, запомните, что при задании ширины, браузер это значение понимает, как ширину только содержимого. Затем к этому значению он добавляет заданные отступы и толщину рамки, и окончательный размер отображает на странице.
И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.
А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.
p{
border: 2px solid #ffff00;
padding: 10px 20px 10px 20px;
margin: 20px 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>
Результат:
Следующая рамка dashed (пунктир).
p{
text-indent: 30px;
border: 2px dashed #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}Результат:
Рамка dotted:
p{
text-indent: 30px;
border: 3px dotted #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
Рамка double:
p{
text-indent: 30px;
border: 5px double #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
Рамка groove:
p{
text-indent: 30px;
border: 7px groove #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
Рамка ridge:
p{
text-indent: 30px;
border: 10px ridge #ff4f00;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
Дальше немного интереснее. Создадим рамку с закруглёнными уголками.
Для этого уберём 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;
}
Размоем внешний край рамки. Для этого в свойстве 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;
}
Сделаем разноцветную рамку. Для этого в свойство 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;
}
Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение 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;
}
Если поиграть с дробным значением 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;
}В спокойном состоянии:
При наведении курсора:
Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.
Желаю творческих успехов.
Перемена
На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..
Сокращение записи CSS < < < В раздел > > > Как самому сделать и установить красивые маркеры для списка
Здравствуйте, как сделать переливающий пурпурный цвет?
подскажите как вывести ссылку на соседний блог чтоб при клике на ссылку открывалась в соседнем блоке на этой же странице
Обязательно получится. У меня цейтнот. Не до «для души». Не сердись. А знания они вот так и приобретаются.
Тут на вскидку нужна комбинированная тень, типа такой как здесь, только подобрать цвета оттенки и размывания. Сделать два блока точно один над другим, и тени от нижнего. Затем подобрать к нему анимацию. От прозрачного к непрозрачному.
Если поможет, то вот пример двух блоков, с тенями от нижнего Вставь в 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, а я в нём начинающий. Вот и копаю, и осваиваю. И кроме дядюшки гугла никого.
stariс, идей много, а вот с реализацией проблемы )))
Знания CSS у меня на уровне новичка. Цвета и толщину — подгоню без проблем, а вот сама реализация — проблема. Тоже ждать готового решения не буду, буду искать инфу и пробовать, если получится то что хотелось — вкину результат.
Другое решение — это box-scadow (тень) и формат rgba (прозрачность).
Реализуемо на чистом CSS. А вот за код, боюсь, даже самого огромного спасиба Будет маловато. На таком эффекте несколько дней просидишь. Подбор оттенков, анимация.
Но за идею спасибо. Будет время займусь для души.
Здравствуйте. Можно ли как то в CSS создать подобную рамку?
http://s020.radikal.ru/i720/1612/6b/c7dbc35bb64f.png
По сути, для этого надо создать background-color серого цвета, а в нем background-color белого цвета с отступом по контуру и с закруглением нудных углов. Но как это сделать, если при задании 2-х background-color, идет конфликт?
Если кто то все таки знает как добиться (по возможности прошу примером показать код, то еще один вопрос, а можно ли чторой фон задать не белым, а прозрачным, но чтоб и первый background-color (серый), тоже был прозрачным?
Возможно у этой задачи есть другое решение? Например задается border, толщиной например 2 пиксела, а потом нужные углы деформировать до нужной формы? Это был бы вообще идеальный вариант. За ранее спасибо за старания.
Спасибо, staric!)
<p>Текст</p>
<p class=»next»>Текст</p>
p {
стили для пунктирной рамки
}
.next {
стили для сплошной рамки.
}
Вот так будут друг над другом.
Привет! Подскажите, как расположить одну рамку над или под другой?
Например, пунктирную под сплошной.
Ну а как же не возможно, если в статье это сделано? Я не пойму даже что объяснять. В коде есть свойства padding (внутренние отступы) и text-align (выравнивание текста), вот ими и выравнивайте как надо.
Здравствуйте. Я переделала рамку в овал. и у меня возникла проблема. Текст не хочет располагаться по центру рамки. Его возможно вообще поместить туда? Или забить и сделать эллипс картинкой?
Статья замечательная:3
Здравствуйте Николай. На их сайте отключена правая клавиша мыши, поэтому я не могу вытащить код страницы, но на взгляд там же обыкновенный border-radius пикселей в 20-25. Вы пробовали вставить это свойство в стили? Иди у Вас оно не срабатывает? Или Вы просто хотите показать мне и моим посетителям ваш сайт? На нём все рамки с закруглёнными углами. Напишите подробнее, в чём проблема, и что у вас не получается. Покажите код с которым Вы работаете.
Здравствуйте!
Я новичок, не получается сделать рамки на фоне с закруглением, как на gett.msk.ru
Поздравляю. Значит не зря я писал.
Огромное спасибо за статью!!! 5 часов мучался но все таки получилось что хотел добиться !!!
Если вариант единичный, то заключите нужный участок в тег <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 любому элементу в редакторе, у него будет появляться рамка.
Добрый день!А куда это всё вставлять? Вставляю на страницу в режиме текст он мне всё что на странице по отдельности выделяет и вот эту фразу выводит и тоже выделяет. Помогите Плиз!
Очень рад, что у тебя дело идёт. Впредь с платными курсами не торопись. Спроси не стесняйся. Я же тоже учусь ещё, только чуть впереди тебя. Курсов полно перелопатил, может и посоветую что получше.
Отличное написания всего и лучшее, что можно найти в интернете. Даже скачал платный начальный курс видео, но Ваши объяснения все равно лучше. Благодаря Вашим стараниям я начал понимать не только что тему сделать, но и где меня обманывали раньше. Спасибо.