coding: вёрстка

Показаны сообщения с ярлыком вёрстка. Показать все сообщения

понедельник, 13 апреля 2020 г.

Зависимость height от widht (в %)

#вёрстка #css #height

                    
Добрый вечер! Потихоньку начал осваивать CSS, поэтому прошу — сильно не пинайте,
если вопрос глупый. :)
Произвожу блочную верстку страницы, все вычисления размеров блоков ведутся в %.
Проблема в следующем — поскольку при изменении формата разрешения (4:3 или 16:9)
изменяется вычисление параметра widht, как для контейнера (контейнер у меня = 100%),
так и для блока (=10%), то весь блок растягивается и превращается в прямоугольник,
а мне нужны квадраты.
Вопрос: что нужно сделать, чтобы параметр height вычислялся из widht и был ему равен? 
То есть как сделать зависимость height от widht, чтобы height подстраивался под widht,
и тем самым высота блока была равна ширине и при этом параметр widht мог бы спокойно
"гулять" в зависимости от формата экрана? Получается, height должен "гулять" вместе
с widht... Ну как-то так. :)

Ответы

Ответ 1


Use CSS to Specify the Aspect Ratio of a Fluid Element
Creating Intrinsic Ratios for Video
Адаптивные фоновые изображения (на русском)
пример


Ответ 2


.square{
    width:20%;
    border:1px solid blue;
}

.square::before{
    content:"";
    display:block;
    padding-top:100%;
}

Верстка, css. Артефакты при масштабировании

#масштабирование #вёрстка #css

                    
Всем привет. Возникла такая проблема. При изменении масштаба в хроме (зажать Ctrl
и крутить колесико) в верстке возникают артефакты, в виде 1 лишнего пикселя, или же
наоборот, обрезание дивов на пиксель где - нибудь сбоку. Подскажите, пожалуйста, как
с этим можно бороться? А если нельзя, то как объяснить появление этих пикселей. 
Адрес сайта для наглядности сброшу, если будет нужен

Ответы

Ответ 1


На все воля браузера. Происходит естественно в результате округлений при расчетах
масштабирования. Для примера 955 px как уменьшить в 2 раза? 955/2=477,5. Как отобразить
полпикселя? Естественно округлив до целого числа, 478. Вот и весь секрет.


Ответ 2


Про артефакты при масштабировании почитайте здесь.

четверг, 2 апреля 2020 г.

Наложение двух объектов друг на друга CSS Grid

#html #css #css3 #вёрстка #css_grid

                    
Как на одной сетке CSS Grid наложить два объекта так, чтобы один оказался снизу,
а другой сверху?

Ответы

Ответ 1


Надо просто явно задать нахождения ячеек.

К примеру, через grid-row и grid-column:



.grid {
  display: grid;
  grid-auto-rows: 100px; /* размер "неявных" строк, для демонстрации */
  grid-auto-columns: 100px; /* размер "неявных" столбцов, для демонстрации */
}

.item-1 {
  background-color: yellow;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.item-2 {
  background-color: lime;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

  
  





Для управления наложением используйте z-index.



.grid {
  display: grid;
  grid-auto-rows: 100px; /* размер "неявных" строк, для демонстрации */
  grid-auto-columns: 100px; /* размер "неявных" столбцов, для демонстрации */
}

.item-1 {
  background-color: yellow;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  z-index: 1; /* чтобы этот был элемент был сверху */
}

.item-2 {
  background-color: lime;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

  
  





Также можете сделать через grid-area:



.grid {
  display: grid;
  grid-template-columns: [item-1-start] 100px [item-2-start] 100px [item-1-end] 100px
[item-2-end];
  grid-template-rows: [item-1-start] 100px [item-2-start] 100px [item-1-end] 100px
[item-2-end];
}

.item-1 {
  background-color: yellow;
  grid-area: item-1;
}

.item-2 {
  background-color: lime;
  grid-area: item-2;
}

Как стилизировать “select”?

#html #css #вёрстка #html_select

                    


Как лучше стилизировать данный "select" ?

Ответы

Ответ 1


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

вторник, 31 марта 2020 г.

Стилизованный нумерованный список с точкой или как сделать составной content?

#html #css #вёрстка


Стилизованный список очень удобно сделать через значение счетчика, но тогда в content
можно поставить только порядковый номер элемента списка. Возможно ли сделать его составным?
Хочу иметь на выходе число сразу после которого идет точка. Что-то вроде этого:

content:counter(olNum)+'.';


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

Вот рабочий пример:



ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum);
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}

  one
  two
  three
  one
  two
  three
  one
  two
  three
  one
  two
  three

Ответы

Ответ 1


Решение слишком простое, нужно без "+" в content'е:



ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum)'.';
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}

  one
  two
  three
  one
  two
  three
  one
  two
  three
  one
  two
  three

воскресенье, 29 марта 2020 г.

Как инвертировать цвет текста обводки в зависимости от фона

#html #css #css3 #html5 #вёрстка


У меня есть два div шириной 50% каждый. Существует огромный заголовок h1, который
должен иметь цвет этих двух элементов div. Я пробовал mix-blend-mode, но он дает мне
несколько случайных цветов при настройке на разницу.   

Моя цель - инвертировать цвета, но сохранить цвета div. Это файл codepen, я постарался
сделать его максимально простым:
   https://codepen.io/lukagurovic/pen/MLoZmj       

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

http://jsfiddle.net/1uubdtz6/    

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

Ответы

Ответ 1


Одной из идей является дублирование текста и использование переменной CSS для определения
цвета, чтобы вы могли легко изменить их в одном месте. Я использовал clip-path, чтобы
скрыть половину одного текста и показать другую:   



body {
  margin: 0;
  --c1:#510035;
  --c2:#E8E8E8;
}
body:hover {
  --c1:#E8E8E8;
  --c2:crimson;
}

h1 {
  font-size: 4.7em;
  text-transform: uppercase;
  margin: 0;
}
.first {
  background:var(--c1);
  -webkit-text-stroke: 3px var(--c2);
}

.second {
  background:var(--c2);
  -webkit-text-stroke: 3px var(--c1);
  clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}

.lp-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:100vh;
  box-sizing:border-box;
  color: transparent;
  z-index: 1;
  padding: 50px;
  text-align: center;
  transition:0.5s;
}
left or right
left or right

четверг, 19 марта 2020 г.

Как сделать тему WP настраеваемой из админки

#cms #php #wordpress #вёрстка #шаблоны


Всем привет, подскажите плз или направьте где прочитать (поисковик толком не помог),
как сделать тему WP более гибкой (настраиваемой из меню админки). 
Тобишь чтоб в админке был пункт меню "Настройка темы" и там можно было добавлять/отключать
рекламные баннеры, вкл/откл слайдер, добавление лого или видеоролика. Чтоб далее не
флудить - заренее СПС ))

Ответы

Ответ 1


Здесь все подробно описано: WordPress. Создаем удобную панель настроек

Сегодня, мы подробно рассмотрим процесс создания страницы настроек для темы WordPress,
на примере замечательного фреймворка WooFramework.
Затем, мы немного усложним задачу, используя возможности jQuery, немного улучшим
функциональность страницы.

вторник, 17 марта 2020 г.

Центрирование изображения в блоке меньшего размера.

#jquery #вёрстка #javascript


Имеется div заданной высоты, ширина у div в процентах. В div вставлено изображение.
При разрешении экрана более 1024 изображение центрируется. При разрешении равном или
менее 1024 оно обрезается с одного края, т.к. ширина блока становится меньше ширины
изображения. Как можно в таком случае горизонтально центрировать изображение средствами
js и обрезать его с обоих боков? 
Вариант с изменением размеров изображения не подходит, т.к. по высоте div фиксирован
и изображение должно занимать его полностью.
HTML:

    


    


    


    


CSS:
.box {
    width: 21%; 
    height: 70px; 
    background: #222;
    float: left;
    text-align: center;
    margin: 20px 2%;
    overflow: hidden;
}

Ответы

Ответ 1


@x01x, на моё предложение в комментарии, вы не отреагировали. Значит, могу предложить
такой вариант решения вашей задачи. Только учтите, что решение не очень кроссбраузерное.
.box {
    position: relative;
    display: inline-block;
    width: 21%; 
    height: 70px;
    margin: 5px;
    text-align: center;
    border: 1px solid #999;
    overflow: hidden;
}
.box img{
    position: absolute;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}


UPD Вариант с JS
var box = $('.box'),
    img = $('img', box),
    imgW = img.width();
$(window).resize(function(){
    img.css({
        marginLeft: (box.width() - imgW) / 2
    });
}).resize();

Не открываются ссылки на странице при подключении jQuery

#html #jquery #css #вёрстка


Верстаю простой сайт на HTML и CSS. Все работает, но при подключении скрипта: 








Все ссылки на странице перестают работать, хотя указатель мыши отображает их как
ссылки, но не открывает. Только по нажатии правой кнопкой мыши -> "открыть в новой вкладке"
В чем может быть проблема? Завтра дедлайн, уже 3 дня думаю над проблемой, надеюсь
на помощь.

Ответы

Ответ 1


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


Ответ 2


Как уже писали, вот эта часть скрипта не дает браузеру обрабатывать ссылки

  $('a').on('click', function(e){
    e.preventDefault();
  });


Если ее убрать, то всё заработает.

понедельник, 9 марта 2020 г.

Обтекание текста под углом

#html #jquery #css #вёрстка




Как сделать такое обтекание текста под углом?

Ответы

Ответ 1


https://css-tricks.com/almanac/properties/s/shape-outside/



.block{  
  overflow: hidden;  
  margin: 10px;
  padding: 15px;
}
.pict{
  float:left;
  width:100px;
  height:150px;
  margin:10px;
  background-color: #ccc;
  -webkit-shape-outside: polygon(100% 50%, 0 0, 0 100%);
  shape-outside: polygon(100% 50%, 0 0, 0 100%);  
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  -webkit-shape-margin: 10px;
  shape-margin: 10px; 
}

  
  text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text  text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text 





или



.block{  
  overflow: hidden;  
  margin: 10px;
  padding: 15px;
}
.pict{
  float:left;
  width:100px;
  height:150px;
  margin:10px;
  background-color: #ccc;
  -webkit-shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
   clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  -webkit-shape-margin: 10px;
  shape-margin: 10px; 
}

  
  text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text  text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text

суббота, 7 марта 2020 г.

Свойство display: table-cell не срабатывает на инпутах

#html #css #вёрстка #input #layout


Нужно сделать, чтобы кнопки в ряд занимали всю ширину .row.

Сейчас они смещены влево и не тянутся на всю ширину, хотя им присвоено свойство display:
table-cell;.

Вопрос: почему display: table-cell не работает для инпутов? И можно ли достичь желаемого
результата не оборачивая input в дополнительные div?



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  display: table-cell;
 }

Ответы

Ответ 1


Нужно переделывать на Flexbox, если количество кнопок неизвестно:



.row {
  height: 25px;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap
}
.row input {
  page-break-inside: avoid;
  break-inside: avoid;
}

  
  
  
  
  





Или же поставить ширину 25%, если их количество фиксированно:



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  width: 25%;
  /* Убираем влияние padding и border на конечную ширину input */
  box-sizing: border-box;
  /* Обнуляем margin */
  margin: 0;
 }

  
  
  
  



Ответ 2


Можно заменить display: table на display: flex + добавить свойство для потомков flex-grow: 1.



.row {
  display: flex;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
}

.input {
  flex-grow: 1;
}

Помогите советом, как с html и css сделать такие блоки?

#html #css #вёрстка #bootstrap



Все выполняю с помощью bootstrap. 
Нужно выполнить блоки в точности как на прилагаемом изображении.
Самые главные моменты:


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


Возможно есть какой-то простой способ реализации этой штуки. У меня пока все с жуткими
костылями, и сыпется верстка. Испробовал уже самые разные вариации

Ответы

Ответ 1


section {
  box-sizing: content-box;
  height: 64px;
  border-bottom: 3px solid transparent;
  margin: 1em 0;
}

img {
  height: 100%;
  float: left;
}

div {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: .5em;
  border: 3px solid silver;
  border-left: none;
}

section:hover {
  border-color: red;
}

  
  Тут какое-то описание



  
  Тут какое-то описание



  
  Тут какое-то описание



Ответ 2


Похоже на то, учитывая, что в при наведении серой рамки нет + появляется тень (судя
по скриншоту).



section {
  box-sizing: border-box;
  height: 64px;
  border-bottom: 2px solid transparent;
  margin: 1em 0;
}

img {
  height: 100%;
  float: left;
}

div {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: .5em;
  border: 1px solid #ddd;
  border-left: none;
  background-color: #fff;
}

section:hover {
  border-color: #7d2d3a;
  box-shadow: 0 0 6px 3px rgba(0,0,0,.08);
}

section:hover div {
  border-color: transparent;
}

  
  Куррорт-Аваза



  
  Красивый болгарский курорт Созополь



  
  Hotel Splendid Conference Spa Resort 5* расположен в чудесном курортном местечке
– Бечичи на берегу чистейшего Адриатического моря.







А насчёт:


  Вроде решил. Добавил в div:hover нижняя рамка none. Вроде пока не прыгает ничего,
и скос исчез) 


то лучше использовать селектор:

section:hover div


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



Так же можно вместо красного бордера для section сделать изящнее, с анимацией через
section:after. 

Например https://jsfiddle.net/acid_grip/3u3pu41y/

среда, 4 марта 2020 г.

Как сделать чтобы размер <figure> автоматически подстраивался под размер картинки?

#вёрстка #адаптивная_верстка


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




    
    figure caption test

Ответы

Ответ 1


figure {
  display: inline-block;
  border: 2px solid red;
}

  
  figure caption test 



Ответ 2


Можно использовать width:min-content;



figure {
  display: inline-block;
  border: 2px solid red;
  width: min-content;
}

  
  figure caption test figure caption test figure caption test figure
caption test figure caption test figure caption test figure caption test figure caption
test

воскресенье, 1 марта 2020 г.

Вёрстка пагинации на гридах

#css #вёрстка #pagination #css_grid #пагинация


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

Сейчас выходит следующее:


а хотелось бы добиться такого результата:


Второй пример я получил при добавлении min-width: min-content; к классу .pagination__item

но на более широком экране последний элемент не хочет переходить на новую строку
и получается так:




.pagination {
  font-family: Tahoma;
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
}

.pagination__list {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(32px, min-content));
}

.pagination__item {
  display: grid;
  align-content: center;
  justify-content: center;
  user-select: none;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #444444;
  border-width: 1px;
  border-style: solid;
  border-left-color: #dbdbdb;
  border-top-color: #dbdbdb;
  border-right-color: #c4c4c4;
  border-bottom-color: #c4c4c4;
}

  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12345678

Ответы

Ответ 1


Вам надо использовать Flex box. Grid для такой цели не подходит, так как предполагает
равный размер ячеек в колонке.



.pagination {
  display: flex;
  flex-wrap: wrap;
}

.pagination div {
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #444444;
  border-width: 1px;
  border-style: solid;
  border-left-color: #dbdbdb;
  border-top-color: #dbdbdb;
  border-right-color: #c4c4c4;
  border-bottom-color: #c4c4c4;
  margin: 3px;
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  111111
  222222222
  333333333333
  44444444444444

пятница, 28 февраля 2020 г.

Как сверстать меню в виде круга с сегментами сложной формы?

#javascript #html #jquery #css #вёрстка


Не являюсь профом в CSS и JS, но вот нужно решить такую задачу:


Интересует именно элемент слева. Ничего подобного в сниппетах не нашёл (может подобные
элементы,  как-то по определённому называются).
Должно работать так: при нажатии на сектор, он увеличивается в размерах (как под
номером 1), а справа, меняется информация.
Может где есть похожая реализация?

Ответы

Ответ 1


Пока первая часть

тренировался здесь



    




Вторая часть последняя со рабочими вкладками (клик вне закрывает все вкладки)



$("g.red").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(-40px,-30px)"
  });
  $(".blue,.green").removeAttr("style");
  $(".info1").show();
  $(".info2,.info3").hide();
});

$("g.blue").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,-30px)"
  });
  $(".red,.green").removeAttr("style");
  $(".info2").show();
  $(".info1,.info3").hide();
});

$("g.green").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,5px)"
  });
  $(".blue,.red").removeAttr("style");
  $(".info3").show();
  $(".info1,.info2").hide();
});

jQuery(function($) {
  $(document).mouseup(function(e) {
    var el = $("g");
    if (!el.is(e.target) &&
      el.has(e.target).length === 0) {
      el.removeAttr("style");
      $(".info").hide();

    }
  });
});
svg {
  width: 450px;
  transform: translateY(-40px);
}

.items {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.wrapper {
  display: flex;
}

.info1,
.info2,
.info3 {
  display: none;
  background: inherit;
}

  
    

  
  
    
      text1 text1 text1 text1 text1
    
    
      text2 text2 text2 text2 text2 text2
    
    
      text3 text3 text3 text3 text3 text3 text3
    
  







Так как я не умею писать js то я выполнил это таким образом

Результат готовый и если публика stackoverflow поможет сократить js то будет вообще супер

Как сделать треугольную деформацию блоков кроссбраузерно?

#html #css #вёрстка




Есть блок display:flex; В нём 2 блока flex: 0 0 50%;

Как сделать такую стрелку между блоками и деформировать сами блоки?  

Порылся в гугле, нашёл clip-path, но он работает только в webkit.

Ответы

Ответ 1


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset,
input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	margin: 200px;
	font-family: Helvetica;
	background: #d4f2ff;
}

#crumbs {
	text-align: center;
}

	#crumbs ul {
		list-style: none;
		display: inline-table;
	}
		#crumbs ul li {
			display: inline;
		}
	
		#crumbs ul li a {
			display: block;
			float: left;
			height: 50px;
			background: #3498db;
			text-align: center;
			padding: 30px 40px 0 80px;
			position: relative;
			margin: 0 10px 0 0; 
			
			font-size: 20px;
			text-decoration: none;
			color: #fff;
		}
			#crumbs ul li a:after {
				content: "";  
				border-top: 40px solid transparent;
	 			border-bottom: 40px solid transparent;
	  			border-left: 40px solid #3498db;
				position: absolute; right: -40px; top: 0;
				z-index: 1;
			}
			
			#crumbs ul li a:before {
				content: "";  
				border-top: 40px solid transparent;
	  			border-bottom: 40px solid transparent;
	  			border-left: 40px solid #d4f2ff;
				position: absolute; left: 0; top: 0;
			}
	
				#crumbs ul li:first-child a {
					border-top-left-radius: 10px; border-bottom-left-radius: 10px;
				}
				#crumbs ul li:first-child a:before {
					display: none; 
				}
				
				#crumbs ul li:last-child a {
					padding-right: 80px;
					border-top-right-radius: 10px; border-bottom-right-radius: 10px;
				}
				#crumbs ul li:last-child a:after {
					display: none; 
				}
			
			#crumbs ul li a:hover {
				background: #fa5ba5;
			}
				#crumbs ul li a:hover:after {
					border-left-color: #fa5ba5;
				}


	One
	Two
	Three
	Four
	Five






Источник:  https://jsfiddle.net/AlexanderT/bmuwLfqr/

Этого в сети полно. Адаптивным должно быть? Про моб.версию думали?

четверг, 27 февраля 2020 г.

Зачем нужен атрибут scope и его значения “col” и “row”?

#html #вёрстка #таблицы


Зачем они нужны если при создании таблицы всё работает и без них?

Ответы

Ответ 1


Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки. По своему
действию напоминает атрибут headers, но используется для простых таблиц.

Атрибут предназначен для экранных ридеров, вроде речевых браузеров, в обычных браузерах
результат добавления scope никак не заметен.   

Синтаксис:  

  


В комментарии @Grundy дал много информации, пройдя по ссылкам, можно найти остальное.

среда, 26 февраля 2020 г.

Зачем выносить стили в head?

#html #css #вёрстка #style


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

Ответы

Ответ 1

Если вы проверяли ваш сайт через PageSpeed Insights, то должны были заметить, одной
из рекомендаций есть

Убрать js или css который блокирует рендеринг страницы

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

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

Как пример, можно спрятать картинки,svg, рекламные блоки или ограничить их размер.

Ответ 2

Если стили будут внизу, то покажется сначала сайт БЕЗ CSS. Потом они загрузятся и
выйдет не очень. Писать в head это мировая практика.

Ответ 3

Стили можно загрузить почти в любой момент. Размещение в HEAD обусловлено тем, что
так их проще найти. Встречал в практике случаи загрузки стилей в конце страницы (можно
считать в подошве). Из-за этого сайты начинали "плыть" после полной загрузки.

Неправильно ведут себя пустые ячейки в CSS grid, заданные свойством grid-template-areas

#html #css #css3 #вёрстка #css_grid


Делаю грид на CSS, ориентируясь на шпаргалку: https://tuhub.ru/posts/css-grid-complete-guide#prop-grid-template-areas

Там написано:


  grid-template-areas
  
  ...
  
  Точка означает пустую ячейку. 


и приведен пример:

grid-template-areas: 
"header header header header"
"main main . sidebar"
"footer footer footer footer";


который выдает нормальный результат (пустая ячейка находится где-то посередине).

Пытаюсь сделать похожую конструкцию, но с двумя пустыми ячейками, которые находятся
по краям сетки:

https://codepen.io/anon/pen/zyLOqz



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.1 { grid-area: headerBg1; }
.headerBg.2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.1 { grid-area: footerBg1; }
.footerBg.2 { grid-area: footerBg2; }
Left header
Right header

  Header



  Main content
 Main content
 Main content

Left footer
Right footer

  Footer





ключевое тут это:

grid-template-areas: 
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";


ВОПРОС: почему блоки Left footer (footerBg1) и Right footer (footerBg2) находятся
там, где должны быть пустые ячейки? Ожидается, что они будут в одной строке с блоком
footer.

Ответы

Ответ 1


Так должно работать:  



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1024px auto;
  grid-template-areas:
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header {
  grid-area: header;
}

.headerBg1 {
  grid-area: headerBg1;
}

.headerBg2 {
  grid-area: headerBg2;
}

.mainContent {
  grid-area: mainContent;
}

.footer {
  grid-area: footer;
}

.footerBg1 {
  grid-area: footerBg1;
}

.footerBg2 {
  grid-area: footerBg2;
}
Left header
Right header
Header

  Main content
 Main content
 Main content

Left footer
Right footer
Footer


Ответ 2


Нет, проблема в совершенно другом:


Left footer

  
  

.footerBg.1 {grid-area: footerBg1;}



Css не позволяет называть классы начиная с цифры.

Рекомендую просто взять и переименовать.



В принципе это можно обойти через селектор атрибута:

.footerBg[class~="1"] {grid-area: footerBg1;}


или при помощи хака с экранированием (у меня в хроме работает):

.footerBg.\31 {grid-area: footerBg1;}




Кстати, с частями хэдера тот же косяк, но они чисто случайно встали на свои места.



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.h1 { grid-area: headerBg1; }
.headerBg.h2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.\31 { grid-area: footerBg1; }
.footerBg[class~="2"] { grid-area: footerBg2; }
Left header
Right header

  Header



  Main content
 Main content
 Main content

Left footer
Right footer

  Footer

Поменять цвета двух объектов SVG при наведении курсора на один из них

#html #css #css3 #вёрстка #svg


У меня есть код SVG-файла:



circle{
fill: #FFF;}

circle:hover{
fill: green}

rect{
fill: #000;}

rect:hover{
fill:red;} 





Выглядит он вот так:  



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

Ответы

Ответ 1


В этом случае можно использовать CSS переменные. 

Объединяем квадрат и окружности в одну группу и добавляем css переменные, которые
будут принимать разные значения в зависимости от :hover 



 .change{
  --color-rect: black; 
   --color-circle: white;
   
   }

 .change:hover {
   --color-rect: red;
   --color-circle: green;
  } 





Посмотрите на эту тему более сложный пример 



.predator-colors {
  --color-face: #7986CB;
  --color-nose: #9FA8DA;
  --color-hair-right:#3949AB;
  --color-hair-right2:#3949AB;
  --color-hair-left:#3949AB;
  --color-hair-left2:#3949AB;
  --color-eye-right:#1A237E;
  --color-pupil-right:#77006B;
  --color-eye-left:#1A237E;
  --color-pupil-left:#77006B;
  --color-ellipse1:#9FA8DA;
  --color-ellipse2:#7986CB;
  --color-ellipse3:#C5CAE9;
}  

.predator-colors:hover {
  --color-face: #3F8B4D;  
  --color-nose: #58C46C;
  --color-hair-right:gold;
  --color-hair-right2:#FFBB00;
  --color-hair-left:gold;
  --color-hair-left2:#FFBB00;
  --color-eye-right:#77006B;
  --color-pupil-right:#FF4151;
  --color-eye-left:#77006B;
  --color-pupil-left:#FF4151;
  --color-ellipse1:#FFDD00;
  --color-ellipse2:#C1A700;
  --color-ellipse3:#FFEE7D;
}

Страницы

Поиск по вопросам

понедельник, 13 апреля 2020 г.

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

четверг, 2 апреля 2020 г.

Ответы

Ответ 1

Ответы

Ответ 1

вторник, 31 марта 2020 г.

Ответы

Ответ 1

воскресенье, 29 марта 2020 г.

Ответы

Ответ 1

left or right

left or right

четверг, 19 марта 2020 г.

Ответы

Ответ 1

вторник, 17 марта 2020 г.

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

понедельник, 9 марта 2020 г.

Ответы

Ответ 1

суббота, 7 марта 2020 г.

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

среда, 4 марта 2020 г.

Ответы

Ответ 1

Ответ 2

воскресенье, 1 марта 2020 г.

Ответы

Ответ 1

пятница, 28 февраля 2020 г.

Ответы

Ответ 1

Ответы

Ответ 1

четверг, 27 февраля 2020 г.

Ответы

Ответ 1

среда, 26 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

понедельник, 13 апреля 2020 г.

четверг, 2 апреля 2020 г.

вторник, 31 марта 2020 г.

воскресенье, 29 марта 2020 г.

четверг, 19 марта 2020 г.

вторник, 17 марта 2020 г.

понедельник, 9 марта 2020 г.

суббота, 7 марта 2020 г.

среда, 4 марта 2020 г.

воскресенье, 1 марта 2020 г.

пятница, 28 февраля 2020 г.

четверг, 27 февраля 2020 г.

среда, 26 февраля 2020 г.