Background-position-y

CSS border-radius Property

The CSS
property defines the radius of an
element’s corners.

Tip: This property allows you to add rounded corners to
elements!

Here are three examples:

1. Rounded corners for an element with a specified background color:

Rounded corners!

2. Rounded corners for an element with a border:

Rounded corners!

3. Rounded corners for an element with a background image:

Rounded corners!

Here is the code:

Example

#rcorners1 {  border-radius: 25px;  background: #73AD21;  padding: 20px;   width: 200px;  height: 150px; }#rcorners2 {  border-radius: 25px;  border: 2px solid #73AD21;  padding: 20px;   width: 200px;  height: 150px; }#rcorners3 {  border-radius: 25px;  background: url(paper.gif);  background-position: left top;  background-repeat:
repeat;  padding: 20px;   width:
200px;  height: 150px; }

Tip: The property is actually a shorthand property for the
, ,
and properties.

CSS border-radius — Specify Each Corner

The property can have from one
to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first
value applies to top-left corner, second value applies to top-right corner,
third value applies to bottom-right corner, and fourth value applies to
bottom-left corner): 

Three values — border-radius: 15px 50px 30px; (first value
applies to top-left corner, second value applies to top-right and bottom-left
corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies
to top-left and bottom-right corners, and the second value applies to top-right
and bottom-left corners):

One value — border-radius: 15px; (the value applies to all
four corners, which are rounded equally:

Here is the code:

Example

#rcorners1 {  border-radius: 15px 50px 30px 5px; 
background: #73AD21;  padding: 20px;  
width: 200px;  height: 150px; }#rcorners2 {  border-radius: 15px 50px 30px;
  background: #73AD21; 
padding: 20px;   width: 200px; 
height: 150px; }#rcorners3 {  border-radius: 15px 50px;  background: #73AD21;  padding: 20px;   width: 200px;
 
height: 150px; }#rcorners4 {  border-radius: 15px;
  background: #73AD21; 
padding: 20px;   width: 200px;  height: 150px; }

You could also create elliptical corners:

Example

#rcorners1 {  border-radius: 50px / 15px; 
background: #73AD21;  padding: 20px;   width: 200px;  height: 150px; }#rcorners2 {  border-radius: 15px / 50px;  background: #73AD21;
 
padding: 20px;   width: 200px;  height: 150px; }#rcorners3 {
 
border-radius: 50%;  background: #73AD21; 
padding: 20px;   width: 200px;  height: 150px;}

Property Description
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner

CSS по стандартам

  • !important
  • @charset
  • @font-face
  • @import
  • @keyframes
  • @media
  • Комментарии в CSS
  • CSS свойства

    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • appearance
    • azimuth
    • backface-visibility
    • background
    • background-attachment
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • clear
    • clip
    • color
    • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • cue
    • cue-after
    • cue-before
    • cursor
    • direction
    • display
    • elevation
    • empty-cells
    • float
    • font
    • font-family
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-variant
    • font-weight
    • height
    • left
    • letter-spacing
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • marquee-direction
    • marquee-play-count
    • marquee-speed
    • marquee-style
    • max-height
    • max-width
    • min-height
    • min-width
    • nav-down
    • nav-index
    • nav-left
    • nav-right
    • nav-up
    • opacity
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • page-break-after
    • page-break-before
    • page-break-inside
    • pause
    • pause-after
    • pause-before
    • perspective
    • perspective-origin
    • pitch
    • pitch-range
    • play-during
    • position
    • quotes
    • resize
    • richness
    • right
    • speak
    • speak-header
    • speak-numeral
    • speak-punctuation
    • speech-rate
    • src
    • stress
    • table-layout
    • text-align
    • text-decoration
    • text-indent
    • text-overflow
    • text-shadow
    • text-transform
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • unicode-range
    • vertical-align
    • visibility
    • voice-family
    • volume
    • white-space
    • widows
    • width
    • word-spacing
    • word-wrap
    • z-index
  • Псевдоклассы

    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :hover
    • :in-range
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • Псевдоэлементы

    • :after
    • :before
    • :first-letter
    • :first-line

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Пример использования


	Пример использования универсального свойства background 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}


	
		class = "primer">
	

В этом примере с использованиме CSS свойства height мы задали для блочного элемента высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

  • зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
  • путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
  • указали, что наше изображение повторяется только по оси X (background-repeat).
  • указали, что наше изображение позиционируется по центру (background-position).

Результат нашего примера:

CSS свойства

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Property Values

Value Description Play it
auto Default value. The background image is displayed in its original size Play it »
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto». Read about length units Play it »
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto» Play it »
cover Resize the background image to cover the entire container, even if it
has to stretch the image or cut a little bit off one of the edges
Play it »
contain Resize the background image to make sure the image is fully visible Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Определение и применение

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.

Значения следующих свойств могут быть установлены:

  • background-color (color | transparent| initial | inherit).
  • background-image (url | none | initial | inherit).
  • background-position (значение).
  • background-size (auto | length | cover | contain | initial | inherit).
  • background-repeat (repeat | repeat-x |repeat-y | no-repeat | initial | inherit).
  • background-origin (padding-box | border-box | content-box | initial | inherit).
  • background-clip (border-box | padding-box | content-box | initial | inherit).
  • background-attachment (scroll | fixed | local | initial | inherit).

Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size). Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

«Учебник CSS 3. Статья ‘Работа с фоном элемента в CSS’.»

More Examples

Example

Specify the size of a background image with percent:

#example1 {  background: url(mountain.jpg);  background-repeat: no-repeat;  background-size: 100%
100%;}
#example2 {  background: url(mountain.jpg);  background-repeat: no-repeat;  background-size: 75%
50%;}

Example

Specify the size of a background image with «cover»:

#example1 {  background: url(mountain.jpg); 
background-repeat: no-repeat;  background-size: cover;
}

Example

Specify the size of a background image with «contain»:

#example1 {  background: url(mountain.jpg);  background-repeat: no-repeat;
  background-size:
contain;}

Example

Here we have two background images. We specify the size of the first background image with «contain»,
and the second background-image with «cover»:

#example1 {  background: url(img_tree.gif), url(mountain.jpg);
 
background-repeat: no-repeat;  background-size:
contain, cover;}

Example

Use different background properties to create a «hero» image:

.hero-image {  background-image: url(«photographer.jpg»); /* The
image used */  background-color: #cccccc; /* Used if the image is
unavailable */  height: 500px; /* You must set a specified height */ 
background-position: center; /* Center the image */ 
background-repeat: no-repeat; /* Do not repeat the image */ 
background-size: cover; /* Resize the background image to cover the entire container */}

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Changelog

0.2.0 (2013-08-27)

  • Added support for:
    • Dynamically changing position and size of the background image (partial reimplementation of #8)
    • Dynamically changing background image with CSS classes
    • Dynamically setting background image to (#13)
    • Lengths and percentages for background size (partial reimplementation of #8, #19)
    • Lengths for background position
    • Debouncing window resize events (alternative implementation of #17)
    • Cloning polyfilled elements (#2)
    • for (#22)
  • Fixed:
    • JS error when using or for (#14, #21, #24)
    • Other «Invalid argument» / JS errors (#11, #16, #23)
    • JS error when printing
  • Use standard HTC XML tags (#10)
  • Work around IE hang on unload when the JScript portion is greater than 512 bytes
  • Added unit tests, grunt build process
  • Misc fixes and code cleanup

Атрибуты¶

Альтернативный текст для области изображения.
Координаты активной области.
Задаёт адрес документа, на который следует перейти.
Указывает язык документа, на который ведёт ссылка.
Форма области.
Имя фрейма, куда браузер будет загружать документ.
Устанавливает MIME-тип документа, на который ведёт ссылка.

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

alt

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

Синтаксис

Значения

Любая подходящяя текстовая строка.

Значение по умолчанию

Нет.

coords

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

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

Синтаксис

Значения

Набор координат определяется формой «горячей области», которая задается атрибутом . Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.

Для прямоугольника () определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Для окружности () определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Для полигона (многоугольника) () последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Значение по умолчанию

Нет.

href

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.

Значение по умолчанию

Нет.

hreflang

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

Синтаксис

Значения

Код языка

Значение по умолчанию

Нет.

shape

Атрибут определяет форму «горячей области», координаты которой задаются с помощью атрибута .

Синтаксис

Значения

Область в виде окружности.
Указывает всю область.
Область в виде полигона (многоугольника).
Прямоугольная область.

Значение по умолчанию

rect

target

Атрибут определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.

Синтаксис

Значения

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

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

Значение по умолчанию

_self

type

Атрибут устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут должен добавляться только при наличии атрибута .

Синтаксис

Значения

MIME-тип

Значение по умолчанию

Нет.

Limitations

This polyfill inserts an in the background of all elements matched in the css to emulate the value.
Calculating the displayed position and size of this image is quite complex and function of numerous parameters:

  • the size of the element itself
  • the size of the image
  • the values of background-[size/position/clip/origin/attachment/scroll]

It is thus impossible to emulate completely and perfectly. But it’s still possible to enjoy the main features:

  • correct position and size of the background image
  • updated position and size on browser resize
  • updated image, position and size when the background-image is modified

The following style properties, values or behavior aren’t supported:

  • multiple backgrounds (although the :after trick can still be used)
  • 4 values syntax of
  • any value in
  • non-default values of background-[clip/origin/attachment/scroll]
  • resizing the background when the dimensions of the element change

Removing any of these limitations is probably just one fork away…

Свойство writing-mode (блочная ось)

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

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

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

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени (text-shadow, box-shadow). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр

При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

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

Свойство background-size принимает либо ключевое слово ( или ), либо пару не ключевых слов ( | ), либо не ключевое слово и значение . Например:

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как .

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

Синтаксис свойства

  • Синтакис:

  • Значение по умолчанию:
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов

Значения свойства

  • —  значение  масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
  • — значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства  не указано автором, будет использовано значение , то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
  • — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • — ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.

    • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
    • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
    • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово .
    • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
    • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

CSS3 Background-image options

IE

9
0.16%

10
0.04%

11
1.39%

Edge

18
1.93%

79
0%

80
0%

Firefox

72
2.05%

73
1.29%

74
0.04%

75
0%

76
0%

Chrome

78
0.43%

79
16.86%

80
10.66%

81
0.04%

82
0.02%

Safari

12
0.11%

12.1
0.39%

13
2.85%

TP
0%

iOS Safari

13.0-13.1
0.56%

13.2
0.25%

13.3
9.29%

Chrome for Android

80
34.26%

Второй способ адаптации

Для начала поменяем разметку:

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
="table-wrap">
  

>
       

>Описание

>
        >Цена
>
        >Скидка
>
      >
    >
    >
      >
        =»Услуга»>Мобильная верстка
>
        =»Описание»>Верстка под телефоны
>
        =»Цена»>$3000
>
        =»Скидка»>50%

>
      >
      >
        =»Услуга»>Посадка на CMS WordPress
>
        =»Описание»>Создание сайта с админ. панелью
>
        =»Цена»>$3000
>
        =»Скидка»>30%

>
      >
    >
>
>

Услуга Описание Цена Скидка
Мобильная верстка Верстка под телефоны $3000 50%
Посадка на CMS WordPress Создание сайта с админ. панелью $3000 30%

Раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:

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
body {
    text-align center;
    padding-top 10%;
    font-family sans-serif;
  background-image url('bg.jpg');
  background-size cover;
  height 100vh;
  color #fff;
  
}
.table-wrap {
    text-align center;
    display inline-block;
  background-color #fff;
  padding 2rem 2rem;
  color #000;
}
 
 table {
    border 1px solid #ccc;
    width 100%;
    margin;
    padding;
    border-collapse collapse;
    border-spacing ;
  }
 
  table tr {
    border 1px solid #ddd;
    padding 5px;
  }
 
  table th, table td {
    padding 10px;
    text-align center;
    border-right 1px solid #ddd;
  }
 
  table th {
    color #fff;
    background-color #444;
    text-transform uppercase;
    font-size 14px;
    letter-spacing 1px;
  }
body {
	text-align: center;
	padding-top: 10%;
	font-family: sans-serif;
  background-image: url('bg.jpg');
  background-size: cover;
  height: 100vh;
  color: #fff;
  
}
.table-wrap {
	text-align: center;
	display: inline-block;
  background-color: #fff;
  padding: 2rem 2rem;
  color: #000;
}

 table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #ddd;
  }

  table th {
    color: #fff;
    background-color: #444;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.

Как это исправить? добавляем стили:

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
@media screen and (max-width: 600px) {
  table {
    border ;
  }
  table thead {
    display none;
  }
  table tr {
    margin-bottom 10px;
    display block;
    border-bottom 2px solid #ddd;
  }
  table td {
    display block;
    text-align right;
    font-size 13px;
    border-bottom 1px dotted #ccc;
    border-right 1px solid transparent;
  }
  table td:last-child {
    border-bottom ;
  }
  table td:before {
    content attr(data-label);
    float left;
    text-transform uppercase;
    font-weight bold;
  }
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
  }
  table td {
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
    border-right: 1px solid transparent;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}

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

Вот еще пен:

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

Надеюсь, Вам было интересно читать данную информацию. Если да — оцените ее! До скорых встреч)

Ссылка на основную публикацию