Как выделить строку с помощью блока с закруглениями


Содержание

Как сделать блок с закругленными углами только на CSS

И снова здравствуйте дорогие читатели блога. Сегодня мы попытаемся сделать красивые и простые блоки с закругленными углами только при помощи CSS. Говорю сразу, тут ничего сложного нет, всего лишь потребуется минимальное знание CSS и конечно же знать куда и где его прилепить :-)

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

Ну а сейчас давайте всё таки посмотрим как они делаются.

Создание блока

Для начала нам нужно создать самый обычный блок, которому дадим переменную например Box, её мы будем позже использовать в теге

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

Оформление блока

Теперь давайте сделаем красивый вид блоку, а именно добавим тень и закруглим углы:

Как видите, здесь тоже можно изменить все параметры по своему вкусу, изменить фоновый цвет, радиус границ, тень и её цвет. Главное экспериментируйте.

Пример

Ну а сейчас давайте применим это всё на практике. Например:

Теперь обязательно посмотрите, что у меня получилось в примере.

Пример

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

Как в Word легко и быстро выделять блоки содержимого

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

Используем клавиатуру

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

Чтобы выделить… Нажмите…
Один символ справа от курсора Shift + →
Один символ слева от курсора Shift + ←
Блок содержимого от курсора до конца строки Shift + End
Блок содержимого от курсора до начала строки Shift + Home
Блок содержимого от позиции курсора до такой же позиции на одну строку выше Shift + ↑
Блок содержимого от позиции курсора до такой же позиции на одну строку ниже Shift + ↓

Следующая картинка показывает пример использования клавиши Shift в сочетании со Стрелкой вниз для выделения нескольких строк.

В одной из статей мы рассказываем о том, как выделить разом целое предложение.

Используем мышь

Выделение содержимого при помощи мыши – это более привычный способ выделения, он позволяет с легкостью выделить содержимое большого объёма. Достаточно навести указатель мыши на начало содержимого, которое хотите выделить, и протянуть по нему мышью с нажатой левой кнопкой. Содержимое будет выделено цветом, то есть выбрано. Протащите указатель мыши до конца нужного блока и отпустите кнопку мыши – так вы обозначите окончание выделения.

Когда Вы закончите выделение, появится мини-панель инструментов, при помощи которой быстро и легко можно настроить основные параметры форматирования.

Используем режим расширяемого выделения (F8)

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

Режим расширяемого выделения можно использовать для того, чтобы выбирать различные блоки содержимого. Например, однократное нажатие F8 включает режим расширяемого выделения. Когда Вы нажимаете F8 второй раз, выделяется текущее слово. Третье нажатие F8 выделяет текущее предложение. Нажмите F8 в четвёртый раз, и будет выделен весь текущий абзац. Нажмите пятый раз – будет выделен весь документ от начала до конца.

В строке состояния показано, сколько слов содержится в выделенном фрагменте.

Word остаётся в режиме расширяемого выделения до тех пор, пока Вы не выполните какое-либо действие с выделенным фрагментом (например, форматирование) или пока не нажмёте Esc. Если режим расширяемого выделения был завершён каким-либо действием с содержимым, то выделение снимается. Если Вы вышли из режима расширяемого выделения, нажав Esc, то содержимое останется выделенным, и Вы можете выполнять с ним какие-либо действия.

Иногда требуется выделить непоследовательный фрагмент текста. Например, необходимо выделить определённое количество символов в каждой строке. Для этого нажмите Ctrl+Shift+F8 и при помощи стрелок на клавиатуре выделите нужное содержимое.

Если Вы хотите воспользоваться не стрелками, а мышью, чтобы выделить фрагмент, то после нажатия F8 выделяйте содержимое вместе с нажатой клавишей Alt. Выделение будет происходить так же, как и после нажатия Ctrl+Shift+F8.

Помните, что после запуска режима расширяемого выделения, Вам нужно сделать с выделенным содержимым какое-то действие, либо нажать Esc, чтобы выйти из этого режима.

Выделяем документ целиком

Вы можете быстро выделить содержимое всего документа. Если Ваш документ очень длинный, то специальная команда для быстрого выделения документа целиком будет очень полезна. Для этого откройте вкладку Главная (Home). В разделе Редактирование (Editing) нажмите Выделить (Select) и в выпадающем меню выберите Выделить все (Select All). Так будет выделен весь документ целиком.

Вы также можете использовать сочетание клавиш Ctrl+A, чтобы выделить документ целиком, при условии, что курсор находится в документе (в любом его месте). Команда Выделить все (Select All) или нажатие Ctrl+A аналогично нажатию F8 пять раз.

Как сделать закругленные углы css

Приветствую вас, дорогие читатели!

Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.

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

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

И вот что мы получим в итоге:

Как закруглить углы картинки при помощи CSS?

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Заказать звонок

Как создавать списки в HTML знают почти все. Это просто.Для маркированного списка используются теги .

Gogetlinks 10 лет. Компания празднует первый юбилей и объявляет конкурс на тему «Я люблю .

Для создания эффективной рекламной компании в Яндекс.Директ необходимо выполнить ряд основных .

Хорошо известно, что Google использует более 200 сигналов ранжирования. Кроме того, каждый год он .

Не так давно, 31 августа, специалисты рoскомнадзора провели рабочую встречу с представителями .

Есть такая, часто возникающая, задача — сравнить два файла по содержимому. Зачем? Ну, к примеру, .

То, что в Интернете можно зарабатывать неплохие деньги знают все. Но вот как это сделать, для .

Оформление блока div рамкой с закругленными углами и тенью

Для выделения какого-либо фрагмента текста на странице можно воспользоваться стилевыми свойствами CSS3. На данный момент практически все браузеры поддерживают свойства border-radius (скругление углов) и box-shadow создание тени.

Итак, нам нужно создать блок, содержащий текст и картинку. Этот блок будет выделен рамкой со скругленными углами и тенью.

Блоку дадим имя, то есть присвоим какой-либо идентификатор.

Текст внутри блока

В таблицу стилей дописываем следующее описание:

Текст внутри блока

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

Илон Маск рекомендует:  Тег table

То есть при наведении на блок курсора меняется цвет рамки.

Блог Vaden Pro

В статье рассматривается процесс скругления углов блоков. Предложено несколько способов, с помощью которых можно это сделать. Также проведен обзор каждого из них с указанием сильных и слабых сторон.

В последнее время наблюдается тенденция популяризации блоков с скругленными углами. Этому скруглению начали подвергать почти все подряд: скругленные регионы страниц сайта, скругленные фото, скругленные меню и прочее. Ниже показан пример скругления на одном из сайтов компании Bizonoff:

Здесь мы видим не только скругленные блоки с картинками, но и скругленную кнопку. Для полного набора не хватало еще и скругленного меню, но я думаю глядя на это можно легко себе представить и скругленное меню.

Итак, в чем же могут возникнуть сложности в реализации такого типа дизайна? На самом деле факторов, которые могут усложнить жизнь верстальщика, более чем предостаточно. К примеру, если имеется картинка и фон с не однотонной расцветкой, то скругление специальными картинками по углам уже не получится.

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

Стоит обратить внимание, что интернет- пространство забито огромным количеством разнообразных способов решения нашей задачи, однако все подряд мы рассматривать не будем. Внимание будет уделено только достойнейшим. Мы оказывали предпочтения способам исходя из следующих критериев:

  • простота использования;
  • универсальность;
  • лаконичность кода (с учетом разгрузки DOM и сохранения семантики);
  • минимизация использования внешних файлов (картинки, javascript и прочее).

Ниже будут приведены выбранные нами способы.

CSS-свойство border-radius

Выход в свет CSS3 подарил разработчикам свойство border-radius, посредством которого можно без лишних проблем осуществить необходимое скругление, указывая его радиус.

К существенным преимуществам этого метода можно отнести:

  • отсутствие наличия файлов извне;
  • объем кода минимально возможен и отвечает требованиям семантики;
  • минимальное время обработки кода браузером и вывод его на экране;
  • подвергает скруглению любые блоки и элементы страницы.

Однако, несмотря на наличие такого мощного списка приемуществ, способ имеет свою темную сторону:

  • после выхода в свет нового свойства браузеры не справлялись с выводом округленных углов. Ситуация стабилизировалась только спустя 2-3 года, а до этого времени кроссбраузерность была на низком уровне, даже не смотря на наличие вспомогательных вендорных префиксов –moz и –webkit.
  • браузеры семейства –webkit скругляют углы без сглаживания.

Стоит отметить, что значительно улучшил ситуацию кроссбраузерности выход нового плагина CSS3 PIE. Это позволило оптимизировать взаимодействие CSS3, расширения браузеров и нового плагина, что в свою очередь позволило охватить более 90% существующих браузеров. На основании этого можно утверждать, что с этого момента при использовании border-radius основная информация ресурса будет считываться и обрабатываться соответственным программным обеспечением.

Пример кода с использованием свойства border-radius

А таким образом код обработается в браузере:

На заметку

  • свойство лучше взаимодействует с картинками, выводящимися через background;
  • для изображения, которое вставляется в скругленную рамку, необходимо прописать overflow: hidden;, дабы избежать наложения острых углов картинки на скругленную рамку;
  • при скруглении таблицы часто возникают проблемы в Internet Explower, чтобы этого избежать тег table оборачивают в div, который подвергнется скруглению без лишних проблем;
  • больше о проблемах с border-radius и их решениях.

Скруглеяем блоки вырезанными картинками

До появления свойства border-radius верстальщики пользовались тоже достаточно простым и надежным способом. Просто на просто вырезали необходимое скругление в фотошопе и фиксировали по углам требуемого блока, основываясь на абсолютном позиционировании.

Стоит отметить, что лучше всего собрать все углы в одну картинку, это позволит уменьшить количество внешних файлов, что в свою очередь снизит нагрузку по запросам на сервер. Ниже показан увеличенный пример такой картинки.

А вот код, согласно которому можно реализовать скругление в соответствии с описуемым способом:

На выходе из браузера получим примерно туже картину, которую наблюдали в первом способе

К преимуществам метода можно отнести следующие показатели:

  • простота в применении;
  • использование только 1 внешнего файла.

Однако недостатков оказалось немного больше, чем достоинств:

  • применение внешнего файла;
  • большой объем кода и некоторое несоответствие с семантикой;
  • очень усложнена процедура внесения правок, банальное изменение цвета фона повлечет за собой много трудностей;
  • невозможность работы при не однотонном фоне родителя.

Плагин jQuery.corner

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

Какие приемущества можно отметить для этого метода?

  • код не загрязняется лишними элементами;
  • семантика кода соответствует всем требованиям;
  • минимальное количество внешних файлов;
  • простая процедура внесения правок в скругления и взаимодействующие с ними элементы.

В тоже время имеет место ряд недостатков:

  • низкий показатель кроссбраузерности при использовании фона с разными оттенками;
  • возможны прочие недостатки при использовании разноцветного фона;
  • IE6 не корректно воспринимает плагин;
  • работа плагина основывается на огромном количестве вставленных элементов в DOM, что может вызвать некоторые проблемы при загрузке анимаций на странице.

Следует отметить, что это не весь перечень проблем плагина, а лишь та малая часть, которая была обнаружена при первых десяти минутах анализа. Вследствие этого не вижу причин продолжать исследование этого способа и тратить свое драгоценное время.

js библиотека rocon

В качестве решения рассматриваемой задачи можно применять авторские библиотеки разных веб-разработчиков. Одна из таки библиотек принадлежит авторству С. Чикуёнку.

Эта библиотека без проблем скругляет углы контейнеров с однотонным фоном на абсолютно любых других подложках. Также этому коду поддается возможность установки границ для элемента – естественно скругленных.

Работа этого способа основывается на комплексных мерах для разных браузаров. Таким образом, для Firefox и прочих браузеров, разработанных на движке webkit, библиотека предусматривает применения специализированных свойств -moz-border-radius и -webkit-border-radius, в соответствии с каждым из типов браузера. Для скругления углов для Operа применяют тег canvas, а для старичка IE – VML.

Более подробное описание библиотеки можно изучить на ресурсе автора, думаю он лучше всех сможет рассказать про свой продукт, а скачать библиотеку можно тут.

Сильные стороны библиотеки:

  • быстродействие;
  • простота использования;
  • компактный объем библиотеки;
  • учтена возможность использования «резиновых» блоков;
  • предусмотрено динамическое изменение скруглений в блоке;
  • минимальное количество внешних файлов.

К слабым сторонам метода следует отнести:

  • недопустимо скруглять контейнер, который имеет разноцветный фон;
  • изображения не скругляет (имеется ввиду, которые выводятся через тег img);
  • библиотека новая и существует ряд мелких недостатков, которые нужно дорабатывать.

Не смотря на это не стоит списывать со счетов этот метод, так как автор проекта не собирается бросать свое детище и обязательно нас порадует модифицированной версией библиотеки.

Библиотека для скругления углов DD_roundies

Еще одна библиотека, которая реализует те же задачи похожими методами. Авторские права по этой библиотеке принадлежат Drew Diller.

Что касается принципа работы, то он практически полностью аналогичен работе rocon. Точно также реализуется скругление для продуктов на основе webkit и для Firefox. IE использует VML для осуществления скругления, а Opera – SVG. Принципиальное отличие работы этих двух библиотек заключается в том, что DD_roundies производит округление одновременно для всего контейнера, а rocon – для каждого угла отдельно. Такой способ работы приводит к ресурсоемкому процессу обеспечения «резиновых» свойств для блока.

Если Вас заинтересовала данная библиотека, то найти ее можно тут.

Какие же преимущества у этого метода?

  • прост в использовании;
  • имеет возможность скруглять блоки с разноцветным фоном;
  • может определять разные радиусы скругления для определенных углов одного блока.

Ну а недостатков чуть побольше и они посущественнее:

  • недостаточный уровень крссбраузерности (проблемы могут возникать в IE и Opera);
  • при скруглении блока на неоднородном фоне существует вероятность появления багов;
  • не скругляет картинки;
  • очень медленно отрабатывает в IE вследствие постоянного пересчета габаритных размеров контейнера и перерисовки фигуры.


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

Библиотека ImageMagick

Особенная библиотека, которая отвечает не только за скругление, но и имеет возможность выполнять много других действий над объектами. Главная особенность работы библиотеки и принципиальное отличие от прочих методов заключается в том что, команды преобразования выполняются на стороне сервера. Другими словами, картинка нужных форм и размеров присылается непосредственно с сервера и полностью готова к использованию.

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

К преимуществам данного способа относят:

  • не требуется использования внешних файлов;
  • высокий показатель кроссбраузерности;
  • допускается устанавливать границу для изображения, которая тоже скругляется по форме картинки.

Далее следует указать и на отрицательные эффекты использования библиотеки ImageMagick:

  • может работать только с картинками;
  • при обработке картинки, которая располагается на разноцветном фоне, требуется использовать формат png-24, что может увеличить размер используемого изображения.

Для верстальщика не обязательно требуется владеть техникой работы в библиотеке ImageMagick, однако знание о существовании такого метода может улучшить эффективность взаимодействия веб-мастера, заказчика и хозяина проекта.

Посмотреть подробности можно тут

Комплекс вендорных префиксов, CSS3 и PIE

Это решение практически совпадает с первым рассмотренным методом, но имеют места мелкие различности. Остановлю Ваше внимание на том, что движущей силой для этого метода, как и для первого, будет применение border-radius. Для оптимизации работы webkit-браузеров обратимся к вендорному свойству -webkit-border-radius. Аналогично обстоит ситуация для работы в браузере Firefox, ему для стабильной работы необходимо наличие свойства -moz-border-radius.

Не стоит забывать про наш дорогой IE. Для отладки его работы обратимся к использованию плагина PIE. Собственно, это и есть единственное отличие от первого способа. Код с учетом «пилюли» для старичка IE выглядит так:

Илон Маск рекомендует:  Что такое код split

Как и прочие методы, этот имеет положительные и отрицательные стороны. К положительным относятся:

  • простота метода;
  • грамотно написанный код с точки зрения семантики и валидности;
  • нет картинок;
  • плагин будет подгружаться только при использовании IE-браузеров.

В плохие качества сегодня попадают:

  • тот факт, что первоначальные версии браузеров не распознают вендорные свойства;
  • некоторые браузеры отображают скругления по особенному, с определенным отличием от других.

Вывод

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

Как сделать скругление стороны на css?

как при верстке макета мне сделать такие скругленный стороны? картинкой сразу нет. ширина должна быть резиновой.

как сделать это?:

скругленной должна быть только одна сторона блока.

и как сделать это?

вроде как border-radius, но не могу понять как.
самое главное: решение не должно зависеть от высоты блока!
помогите пожалуйста.

  • Вопрос задан более трёх лет назад
  • 1765 просмотров

Безусловно, border-radius формирует закругления по принципу arc, то бишь эллипсоид.
Какие могут быть решения?

1. Расширяем область с рамкой и обрезаем края. Конечно, часть окружности не получится, но терпимо.
2. Кладём фон с помощью SVG, в котором сформирована окружность.
3. Технически можно вставить и сам SVG, что позволит изменять цвет линии или фона закругления с помощью обычных правил.

Последнее я не вставил в пример, оставив пробы пера для автора вопроса. Однако, попробовать стоит, ибо масштабирование фона в виде SVG доставляет немало проблем в Chrome.

Делаем красивые посты: добавим немного HTML!

А вот такой блок ссылок на свои посты (мини-оглавление)?

Почти каждый иногда задаётся вопросом: как красиво оформить текст в ЖЖ: выделить цитату или другой участок текста, сделать несколько картинок для быстрого перехода в нужные места и т.п.
Всё это решается минимальными средствами — надо только не бояться переключать редактор в режим HTML.
Тогда вы сможете легко сделать всякие красивые дизайнерские штуки.
Для тех, кому лениво пользоваться поиском или кто боится кучи незнакомых символов, покажу некоторые приёмы. Не из тех, которые гуглятся на раз, а те, которые по большей части сам сконструировал, пользуясь справочниками по HTML.

  • Можно, я не буду подробно писать про цвет?

Даже те, кто далёк от программирования, легко могут использовать кнопочку задания цвета шрифту в редакторе ЖЖ — подбирайте нужный цвет и смотрите его код, затем вставляйте, куда нужно!
И, наконец, я надеюсь, что не надо объяснять специально, что все использованные здесь стилевые параметры можно добавлять и комбинировать в нужных сочетаниях; а синтаксис будет понятен из приведённых примеров.
Предполагается, что читатель знает на базовом уровне язык HTML и может при необходимости задать, к примеру, размеры картинки параметрами width и height, грамотно оформить ссылки, закрыть теги и т.п.
Но можно и без этого — просто скопируйте выделенный текст (не забудьте! редактор должен быть переведён в режим HTML!) и подставьте свой текст, и измените нужные значения и параметры.
Поехали.

  • Выделение текста с закруглением:
  • А вот так можно красиво оформлять цитаты (пример в начале поста):

Обратите внимание на разницу между тегами span и div — второй выделяет блок из целых строк, тогда как первый используется внутри строки для отдельных символов. Выделение блока имеет ряд преимуществ:

  • возможность указания отступов блока (margins) для его расположения на странице (а заодно покажу и отступы текста от границ блока — padding):
  • возможность обтекания блока текстом, например, слева:

(Здесь текст, написанный сразу после блока div): Обратите внимание, что все размеры в HTML можно задавать как в абсолютных величинах — удобнее всего в пикселах (80px, например), так и в процентах от ширины страницы: вот здесь написали про ширину и расположение: «width:50%; float:right;» и получили блок строго в правой половине основного текста, независимо от разрешения экрана и размера окна браузера. Отступ от обтекаемого текста регулируется в данном случае параметром «margin-left:5%;»

Кстати, в этом примере заданы отступы по вертикали и горизонтали, без подробного указания каждой из сторон.
Надеюсь, вы также поняли, что можно тут же задавать ширину рамки (от 1px, а по умолчанию считается 3px).
И даже каждую сторону по отдельности, как в примере выше.
И вот какие типы обрамления бывают:
solid , dotted , dashed , double , groove , ridge , inset , outset

  • Как писать стихи.

Самая большая проблема в HTML в том, что лишние пробелы просто игнорируются.
Чтобы написать стихотворение «лесенкой», можно использовать так называемые неразрывные пробелы:

Мы вам скажем пару слов о погоде,
Где какой открыть сезон на природе,
О дождях и о снегах,
О ветрах и облаках
И о том, как утром солнце восходит!

К сожалению, на многих серверах (как на упомянутом Стихи.ру) HTML-теги запрещены совсем, и там для форматирования стихов лесенкой остаётся только первый способ с неразрывными пробелами.

  • Красивое мини-оглавление.

Теперь, наконец, приведу код таблички со ссылками, которая в начале поста.
Раньше был единственный способ сделать такую конструкцию — через таблицу.
Приведу без пояснений, чтобы не затягивать на несколько страниц рассказ про то, как делать таблицы:

Заголовок
Ячейка 1 Ячейка 2 Ячейка 3
Заголовок
Ячейка 1 Ячейка 2 Ячейка 3

В последнее время, с развитием стандарта HTML, стало возможно обойтись без таблицы, одними тегами div (хотя я не уверен, что во всех браузерах это будет показываться правильно). Зато без дополнительных телодвижений получаются закруглённые углы:

Закругляем углы таблицы

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

В сегодняшнем руководстве я покажу, как можно закруглить углы таблицы, используя только CSS.

Непосредственно разметка (Вторая таблица отличается компоновкой ячеек в верхней строке):

1. Закругляем углы непосредственно у таблицы (тег table ).

2. Убираем любой фон у первой строки.

3. При помощи псевдокласса :first-child и комбинатора > выбираем первую ячейку в таблице. Закругляем у первой ячейки левый верхний угол. Фон первой строки складывается из фона ячеек данной строки.

4. При помощи псевдокласса :last-child и комбинатора > выбираем последнюю ячейку в первой строке. Для нее закругляем правый верхний угол.

5. У последней строки закругляем нижние углы. Не забудьте удалить фон у последней строки; фон строки задается посредством фона ячеек последней строки.

6. Затем по аналогии с пунктами 3-4 в последней строке закругляем углы у первой и крайней ячейки.

Поддержка браузерами

Проверено firefox 15.0.1, IE9 и далее, google chrome, Opera 12.0, Safari 5.1.7. Как видите, закругление углов таблицы происходит практически во всех современных браузерах.

Закруглённые углы (свойство border-radius) | CSS

Генератор border-radius CSS

Как сделать закругленные углы CSS

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1 2 3
1.1 2.1 3.1
1.2 2.2 3.2

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

CSS скругление углов у border-image

Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

HTML круг

Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? :) NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник :) NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

CSS: /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

Как выделить строку с помощью блока с закруглениями?

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

Что такое выделение текста.

Думаю вы уже заметили общую концепцию и логику, которая прослеживается в использовании «горячих клавиш» при работе с текстом. Благодаря этому комбинации и соответствующие им действия очень легко запоминаются. Если вы поняли логику перемещения по тексту с помощью клавиатуры, то освоить приемы с выделением текста и его фрагментов не составит труда.

Итак, что же такое выделение? Выделение текста это операция позволяющая выбрать некоторый фрагмент текста для дальнейшей с ним работы — копировать, вырезать, удалять, перемещать. Размер такого фрагмента никак не ограничен — может быть как выделение одного символа, слова, строки, страницы, так и полностью документа.

Полагаю вам уже известно что это такое. Но тем не менее расскажу. Выделение, как правило, отображается как окрашивание выделямого фрагмента текста в другой цвет, обычно полностью контрастный относительно нормального текущего цвета фона и текста. Поскольку чаще всего используется классическая цветовая гамма — черный текст на белом фоне, то при выделении цвета инвертируются — черный (либо синий) фон и белый текст.

Выделение текста мышью

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

Чтобы выделить текст мышью, нужно удерживая левую кнопку перемещать курсор над фрагментом текста который вы хотите выделить. Возможно что это единственный способ которым вы пользуетесь. Но дело в том, что это способ не единственный и не всегда самый эффективный особенно в том случае, когда вы работаете с редактируемым текстом.

Посудите сами. Допустим, такая ситуация: вы набираете или редактируете текст, и вам нужно полностью удалить строку на которой в данный момент стоит курсор. Разумеется это будет быстрее и эффективнее сделать лишь с помощью клавиатуры, нажав три клавиши, чем тянуться за мышью, прицеливаться и выделять нужный фрагмент. Поэтому на подобных сочетаниях мы и остановимся.

Как выделять мышью слова, абзацы, строки и произвольные фрагменты текста.

Но прежде стоит еще сказать о выделении мышью. Стандартный способ, работающий практически везде — двойной и тройной щелчок левой кнопкой мыши. Двойной щелчок позволяет выделять слово, по которому он сделан, а тройной — абзац. Правда поведение тройного щелчка может отличаться в различных приложениях. К примеру, в текстовом процессоре MS Word или в браузере Mozilla Firefox, тройной щелчок позволяет выделять именно абзац текста, а в некоторых приложениях этот прием выделяет строку. Так или иначе, где бы вам ни понадобилась эта функция, попробуйте ее, и сразу станет ясно как она работает.

Кроме того, выделение нужного фрагмента редактируемого текста можно произвести следующим образом. Запомните раз и навсегда: всегда и везде, в любом приложении, выделение текста производится с помощью клавиши Shift. Исключая различные консоли и командные оболочки. Но в них все приемы отличаются от стандартной работы с текстом в классических графических приложениях, которые мы здесь рассматриваем.

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

Выделение текста клавиатурой.

А вот теперь о самых эффективных способах. Выделить любой фрагмент текста позволяют сочетания клавиши Shift с клавишами-стрелками управления курсором — Left, Right, Up, Down. При этом сочетания Shift+Left и Shift+Right выделяют текст посимвольно. Поэтому такой способ годится только для мелких фрагментов текста, часть слова, несколько символов. причем даже для выделения части слова он не всегда самый эффективный, но об этом позже.

Клавиши для выделения строк текста

Сочетания Shift+Up и Shift+Left позволяют выделять текст построчно, на строку вверх и вниз от курсора соответственно. При этом стоит заметить, что если исходное положение курсора середина строки, то подобное сочетание выделит фрагмент с середины строки, начиная с места в котором находится курсор, до середины нижней или верхней строки, соответственно до места точно сверху или снизу курсора.

Далее, вспомним о клавишах перехода в начало (Home) и конец (End) строки. Использование их совместно с Shift даст эффект выделения фрагмента от текущего положения курсора до начала или конца строки соответственно.

Выделение отдельного слова.

Полагаю вам уже понятна логика выделения текста, поэтому вспомнив о сочетаниях пословесного перемещения по тексту, можно вывести соответсвующее пословесное и поабзацное выделение. Ctrl+Shift+Left (Right, up, down). Но такое сочетание уже довольно сложно. Положение пальцев для него — левый мизинец — левый Ctrl, левый безымянный -левый Shift, и правый мизинец на нужную клавишу-стрелку. Здесь трудность может представлять одновременное нажатие ctrl и shift. Но в любом случае его нужно освоить, ибо оно используется не только при работе с текстом, но и во множестве других сочетаний.

Постраничное выделение

Для этого используются клавиши shift+pgUp и shift+pgDown, для выделения на страницу вверх и вниз соответственно.

Выделить весь документ с текущей позиции курсора и до начала или до конца позволят сочетания Ctrl+Shift+Home и Ctrl+Shift+Home.

Как выделить весь текст.

Выделение сразу всего редактируемого текста можно произвести используя комбинацию Ctrl+a. Причем эта комбинация работает не только для текста. Допустим вы можете выделить полностью веб-страничку с ее помощью. Это же сочетание можно использовать при операциях с файлами и папками, о чем вы можете узнать в соответствеющей статье.

Удаление выделенного текста.

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

Теперь вы можете эффективно редактировать текст совершенно не используя мышь. И если вы будете пользоваться этими способами, очень скоро заметите, что скорость работы с текстом значительно возросла.

Остается освоить сочетания для копирования, вырезания и вставки, если вы их еще не используете.

Admin

IT-cпециалист с высшим техническим образованием и 8-летним опытом системного администрирования. Подробней об авторе и контакты. Даю бесплатные консультации по информационным технологиям, работе компьютеров и других устройств, программ, сервисов и сайтов в интернете. Если вы не нашли нужную информацию, то задайте свой вопрос!

Илон Маск рекомендует:  Как зайти в настройки роутера с компьютера
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL