Как убрать закругленные углы? — Настройка внешнего вида
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Закругление углов в CSS
-moz-border-radius — Хак для Mozilla Firefox
-khtml-border-radius — Хак для Konquerer
-webkit-border-radius — Хак для Google Chrome и Safari, в последних версиях этих браузеров в принципе не нужен
border-radius — Свойство CSS3 для закругления углов
Если хотим закруглить только определенные углы:
-moz-border-radius: 10px 0 10px 0 ; -khtml-border-radius: 10px 0 10px 0; -webkit-border-radius: 10px 0 10px 0; border-radius: 10px 0 10px 0;
-moz-border-radius: 10px 0 10px 0 ; -khtml-border-radius: 10px 0 10px 0; -webkit-border-radius: 10px 0 10px 0; border-radius: 10px 0 10px 0;
4 значения 4 угла по порядку: верхний левый, верхний правый, нижний правый, нижний левый
(по часовой стрелке)
Как убрать углы в форме с закругленным радиусом?
Доброе время суток!
Проблема моя, наверное, тривиальна, но я бьюсь, к сожалению, уже весь день.
У меня обычная форма ввода, для поискового запроса, с закругленными углами:
1 2 3 4 5 6 7 8 9 10 11 12 13
.input { border: 3px solid #dd4814; border-radius: 6px; background-color: transparent; padding: 4px; width: 250px; color: #6C6C6C; transition: all 0.4s ease-out; } .input:focus { outline: none; border-color: #b22222; }
Как видно, на темном фоне остаются светлые уголки возле закруглений рамки. Хотел убрать их транспарентностью (background-color: transparent, но не убираются. Убрать углы с помощью box-shadow не могу, т.к. фон с градиентом и будет некрасиво. Может кто-нибудь уже сталкивался с подобной проблемой? Что я делаю неправильно?
Спасибо!
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как убрать углы у border?
Что бы граница имела вид
Как убрать белые углы в TImage
Всем привет! Вопрос, как убрать белые углы в TImage (гружу jpeg)? Transparent, не помогает.
Combobox в окне с другим фоном. Как убрать белые углы combobox?
Основное окно имеет градиентную заливку фона. Также включены стили windows через манифест. .
Полярные координаты. Как рассчитать полярные углы (углы поворотов) для определенной точки
у меня такая проблема — есть два отрезка (точнее полярные оси) соедененые между собой . первый.
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
Просвечивает чей-то фон, родительского элемента.
Регистрация: 15.06.2016
Сообщений: 18
Да, у меня форма с автозаполнением, работает на jquery. Это и есть родительский элемент со своими стилями. Но там для этого элемента тоже проставлен background-color: transparent;
.
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
значит еще выше родитель, давайте код сюда. Гадать никто не будет
2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
Droleg, елси инпут лежит в форме, тогда так:
form{border-radius:6px}
Регистрация: 15.06.2016
Сообщений: 18
Форма ввода вставлена в header:
1 2 3 4 5 6 7 8 9 10 11
header id="header"> div id="searchform_header"> form class="searchform_header" action="search.php" method="get"> fieldset> input class="input" type="text" name="search"> /input> input class="compare_button" type="submit" value="Search!"> /input> /fieldset> /form> /div> div class="clear"> /div> /header>
input управляется, кроме того CSS, который я уже запостил, еще плагином для автозаполнения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
.autocomplete{ display:inline; position:relative; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; text-align: start; } .autocomplete .input{ position:relative; z-index:2; background-color:transparent; } .autocomplete .autocomplete_dropdown{ position:absolute; border: 1px solid #ccc; border-top-color: #d9d9d9; box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: default; display:none; z-index: 1001; margin-top:-1px; background-color:transparent; min-width:100%; overflow:auto; } .autocomplete .autocomplete_hint{ position:absolute; z-index:1; color:#ccc !important; -webkit-text-fill-color:#ccc !important; text-fill-color:#ccc !important; overflow:hidden !important; white-space: pre !important; } .autocomplete .autocomplete_hint span{ color:transparent; opacity: 0.0; } .autocomplete .autocomplete_dropdown > .autocomplete_copyright{ color:#ddd; font-size:10px; text-decoration:none; right:5px; position:absolute; margin-top:-15px; z-index:1002; } .autocomplete .autocomplete_dropdown > div{ background: rgb(85, 68, 0); white-space: nowrap; cursor: pointer; line-height: 1.5em; padding: 2px 0px 2px 0px; } .autocomplete .autocomplete_dropdown > div.active{ background: rgb(255, 0, 0); color: #FFFFFF; }
Как закруглить углы в CSS и HTML. Закругление углов картинок.
В данной статье описан способ закругления углов с помощью CSS и HTML кодов и делать красивые формы картинок для сайта.
Очень часто веб-дизайнеры в своих работах изменяют формы геометрических фигур, картинок, фотографий и т.п., получая закругленные углы. Это придаёт проекту законченность и приятный дизайн.
Существуют различные по сложности реализации способы преобразовать обычный прямоугольник в прямоугольник с закругленными углами. Мы познакомимся с двумя самыми простыми и быстрыми способами, а также научимся делать картинки и рамки вокруг картинок с закругленными углами для оформления сайта и веб-страниц:
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css.
2. Закругление углов с помощью HTML кода без записи в файл стилей.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css
Рассмотрим первый способ получения прямоугольника с закругленными углами с помощью CSS и HTML кода с записью в файл стилей Style.css.
Что такое CSS
CSS – это Каскадная Таблица стилей (Cascading Style Sheets – CSS), использующая специальный код. С его помощью можно изменять шрифты, формы и цвета элементов, на страницах веб-приложений позиционировать элементы,включать фоновые изображения. CSS3 последняя версия данной разработки CSS.
Блоки, состоящие из CSS скриптов, размещаются в файле шаблонов стилей, шрифтов и цветов – Style.css для дальнейшего подключения их с помощью HTML-файлов (файлы с раширением .php) в различных местах сайта (шапка, контент, комментарии, подвал и сайдбар).
Работать с CSS и HTML кодами и файлами легко и доступно. Главное всё делать очень внимательно и не спеша.
Делаем прямоугольник с рамкой в CSS
Чтобы изобразить на сайте обыкновенный геометрический прямоугольник, необходимо описать его параметры: длину, высоту, цвет фигуры, цвет фона блока и при необходимости стили рамки (толщина, цвет и т.п.). Для этого формируем следующий блок CSS, в котором описаны стили (параметры) прямоугольника:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ >
Заходим в административную панель WorPress, отмечаем слева пункты меню Дизайн=>Редактор, открываем файл Style.css и в конец файла добавляем этот блок. Не забывайте нажимать Save (сохранить).
Код цвета задаётся в шестнадцатеричной системе и может состоять из шести знаков (это его полный код) или из трёх знаков (сокращённый код). Сокращать код цвета можно в случае совпадения первой цифры со второй, третьей с четвертой и пятой с шестой. Например, код #BB00CC можно сокращённо записать так #b0c. Буквы A, B, C, D и F в коде цвета использовать только латинские.
Значение 3px в атрибуте border показывает ширину рамки.
После занесения стилей в файл Style.css мы можем показывать наш прямоугольник в любом месте сайта. Для этого размещаем тег HTML кода в том месте, где должен появиться наш прямоугольник. Тег имеет такой вид:
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой.
Как сделать закругленные углы в CSS
Для закругления углов используется атрибут border-radius.
Мы могли бы добавить только этот атрибут. Он нормально отображает результат закругления в новых версиях браузеров, но у многих пользователей ещё остались старые версии, где этот атрибут работает некорректно. Поэтому для совместимости мы добавим ещё несколько описаний этого атрибута, привязанного непосредственно к определённым браузерам, в наш блок в файле Style.css, получив следующий код:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /*закругление для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ >
HTML-тег div выдаст нам прямоугольник в рамке с закругленными углами:
Как вставить в рамку текст
Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругление для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ >
а HTML-тег для выдачи текста будет выглядеть так:
pib9.ru
Получаем прямоугольник с закругленными углами и текстом:
Если из кода убрать атрибуты описания размеров прямоугольника width и height, то можно получить такие формы с закругленными углами:
1. Без текста
В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.
Закругление выбранных углов
В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.
Распишем значения радиуса закругления для каждого угла, указывая нули там, где отменяем закругление. Например, отменим закругление в третьем и четвертом углах. Наш код примет такой вид:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px 10px 0 0; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px 10px 0 0; /* закругление для старых Chrome и Safari */ -khtml-border-radius: 10px 10px 0 0; /* закругление для браузера Konquerer ОС Linux */ border-radius: 10px 10px 0 0; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ >
1. Левый верхний угол.
2. Правый верхний угол.
3. Правый нижний угол.
4. Левый нижний угол.
Таким получается прямоугольник с выбранными закруглениями только в верхних углах.
Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:
2. Закругление углов с помощью HTML кода без записи в файл стилей
Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.
HTML закругленные углы
Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
Закругленные углы с помощью HTML без использования файла Style.css
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML
Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки?”.
Это делается очень просто, и сейчас мы этому научимся.
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.
Закругляем углы картинки с добавлением рамки
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
#img-radius
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами: