Думая о будущем. Меньше работы — больше дел
В интернете много примеров и руководств по закруглению углов у блока или таблиц, но, как правило, данные руководства основаны на использовании изображений или на использовании дополнительных блоков.
В сегодняшнем руководстве я покажу, как можно закруглить углы таблицы, используя только CSS .
Непосредственно разметка (Вторая таблица отличается компоновкой ячеек в верхней строке):
| Nulla gravida. | Urna augue. | Nunc iaculis bibendum. | |
| Vestibulum tempor | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend. | Pellentesque cursus, nunc ut facilisis hendrerit |
1. Закругляем углы непосредственно у таблицы (тег table).
BContentTables{ border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow:hidden; margin:0.7em auto; }
2. Убираем любой фон у первой строки.
Tr.bCTable_Header {background: none;}
3. При помощи псевдокласса:first-child и комбинатора > выбираем первую ячейку в таблице. Закругляем у первой ячейки левый верхний угол. Фон первой строки складывается из фона ячеек данной строки.
Tr.bCTable_Header:first-child > td:first-child{ border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms-border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; } tr.bCTable_Header td{ color:white; font-size:110%; background-color:#00843C;}
4. При помощи псевдокласса:last-child и комбинатора > выбираем последнюю ячейку в первой строке. Для нее закругляем правый верхний угол.
Tr.bCTable_Header:first-child > td:last-child{ border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms-border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; }
5. У последней строки закругляем нижние углы. Не забудьте удалить фон у последней строки; фон строки задается посредством фона ячеек последней строки.
BContentTables tr:last-child{ border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:none; }
6. Затем по аналогии с пунктами 3-4 в последней строке закругляем углы у первой и крайней ячейки.
BContentTables tr:last-child td{background-color:#F1F1F2;} .bContentTables tr:last-child td:first-child{ border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;} .bContentTables tr:last-child td:last-child {border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border-radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; }
Поддержка браузерами
Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.
Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.
Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.
Закругление углов у блоков DIV
По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius , например так:
Border-radius: 10px;
Для наглядности нарисуем два блока с прямыми и скругленными углами:
Блок с прямыми углами
Блок с закругленными углами
Закругление углов у картинок
По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы
Вот изображение без CSS обработки
А теперь с загругленными углами:
Border-radius: 10px;
Чтобы стало совсем «красиво» с начала добавим окантовку…
Border-radius: 10px; border: 5px #ccc solid;
а затем и тени:
Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;
Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:
Border-radius: 10px; box-shadow: 0 0 10px #444;
И напоследок полное издевательство над изображением
Border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;
Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.
Маленькое лирическое отступление
Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px , то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.
А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.
Как закруглить углы картинок на WordPress
Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:
Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.
Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:
Alignnone { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }
Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG :
Img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }
Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!
Вместо заключения
Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.
). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius :
border-radius : [значение_скругления ];
Как скруглить углы в HTML через CSS
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
- Толщина - задается чаще всего в пикселях
- Тип линии
может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
- Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
- Полное руководство по настройке WordPress API, часть 1: введение
Сейчас самое время становиться профессиональным разработчиком под платформу WordPress. Будь то разработка по заказу клиента или создание тем и плагинов, сегодня есть спрос на все, что касается данной тематики.
WordPress имеет отлично написанную документацию по API для разработчиков вне зависимости от уровня их подготовки. Но это не отменяет необходимость накопления практического опыта в сфере разработки под данную CMS.
Как и в большинстве случаев в сфере веб-разработки, если что-то работает, то это не значит, что это сделано абсолютно правильно. Поэтому мы, как разработчики и своего рода ремесленники, озадачены тем, чтобы быть уверенными в том, что то, чем мы занимаемся, делается правильно.
Множество исходных кодов тем и плагинов показывают, что разработчики продолжают делать то, что работает, однако оно сделано далеко не самым эффективным образом. Это особенно актуально для опций тем, страниц меню, механизмов валидации и тому подобного.
И мы хотим это остановить.
В данной серии статей, мы собираемся глубоко заглянуть в сердце WordPress Settings API . Мы разберемся, в чем состоит проблематика вопроса и почему это важно, а также научимся правильно использовать данный API.
Наша основная цель состоит в том, чтобы научиться грамотно настраивать Settings API (Программный интерфейс настроек, далее Settings API) вне зависимости от уровня вашей подготовки. К концу серии, вы получите глубокое, целостное понимание и разберете практические примеры того, как на практике правильно использовать этот API.
Чтобы успешно пройти все этапы, нам нужно начать с абсолютного нуля. До написания какого-либо кода и разбора примеров, нам необходимо познакомиться с Settings API – узнать что это, и для чего предназначено.
Определение термина «Settings API»
По своей сути, Settings API это набор функций, предоставляемый WordPress, который упрощает процесс создания меню, страниц настроек, а также сохранения, валидации и извлечения введенных пользователем данных.
Звучит просто, не так ли?
В этом цикле статей мы подробно изучим каждый аспект. А от этого несложного определения мы можем отталкиваться в нашей дальнейшей работе.
Почему следует использовать Settings API?
После того, как мы выяснили, что такое Settings API, давайте посмотрим, почему же мы собираемся его использовать вместо собственноручно написанных процедур обработки пользовательского ввода, сериализации (процесса превращения какой-либо структуры данных в последовательность битов) и валидации.
Взаимодействие с ядром WordPress
Settings API разработан создателями платформы WordPress, чтобы упростить создание расширений. Поэтому, вполне логично использовать функции, предоставляемые этим API.
Конечно, можно обойти Settings API и, методом грубой силы, реализовать собственный функционал, и никто не сможет этому помешать, однако это требует лишней работы, и чревато несоблюдением рекомендаций команды разработчиков ядра WordPress, что в конечном итоге может привести к ошибкам в панели управления.
Использование инструмента, созданного разработчиками для разработчиков, гарантирует, что мы будем взаимодействовать с ядром правильным путем.
Бесплатные стандартные возможности
Использование Settings API это не только гарантия того, что разработка будет вестись правильным способом. Также, это уверенность в том, что интерфейс пользователя будет следовать традициям платформы, а данные будут обрабатываться механизмами, аналогичными тем, которые используются в самом WordPress. Кроме того, это может сэкономить кучу времени.
Когда вы начинаете создавать свои интерфейсы по тем же принципам, которые используются в WordPress и будете использовать в своей работе Settings API, ваши продукты будут получаться тесно интегрированными с CMS.
Это означает, что когда пользователи будут работать с вашими творениями, то почувствуют себя в своей тарелке – им все будет понятно. У них будет возникать ощущение, что они изменяют системное дополнение, созданное разработчиками WordPress.
По правде говоря, использование «родных» стилей WordPress не касается напрямую Settings API и относится немного к другой теме, но такой аспект Settings API, как создание страниц меню, предполагает использование нативных стилей WordPress.
Разве нет смысла в том, чтобы придерживаться единого стиля?
Более безопасно, более устойчиво
Используя преимущества встроенных в WordPress функций, вы можете быть уверены, что процедуры сохранения, извлечения и валидации будут проходить без проблем. Settings API предоставляет множество функций, использование которых безопасно для функционирования ядра.
В конце концов, Settings API подчиняется тем же правилам и принципам, что и WordPress API. Также, при обновлении CMS, функции Settings API также будут устаревать. Вам нужно будет какое-то время, чтобы обновить ваш проект ДО того, как несовместимость скажется на его работе.
Что дальше?
Теперь, вы должны иметь общее представление том, что такое Settings API и почему стоит использовать его при создании тем и плагинов.
Конечно, это пока еще не аргументировано – это будет сделано позже, на практических примерах. Вот список того, чем мы займемся в этом цикле.
Загрузка...
