Ответы пользователя Кристина

Соседний блок растягивает рядом стоящий и растягивает родительский элемент?

Кристина @KrisIris

"По-умолчанию flex-элементы растягиваются, занимая все пространство по высоте." Пропиши родителю align-items: flex-start;

Ответ написан более трёх лет назад

2 комментария

Как сделать такой border у блоков?

Кристина @KrisIris

border: 1px solid #000;
margin:-1px 0 0 -1px;

Или вот такой хак нашла) https://codepen.io/anon/pen/ZqaXNy

.item{
  width: 200px;
  height: 200px;
  box-shadow: 
    1px 0 0 0 #000, 
    0 1px 0 0 #000, 
    1px 1px 0 0 #000,
    1px 0 0 0 #000 inset, 
    0 1px 0 0 #000 inset;
}

Ответ написан более трёх лет назад

Комментировать

Как сверстать такую карусель на css без js?

Кристина @KrisIris

.wrapper {
  display: flex;
  width: 800px;
  overflow-x: auto;
}
.scrolling-wrapper{
  display: flex;
  flex-wrap: nowrap;
  padding: 0 50px;
}
.card {
    width: 200px;
    height:200px;
    background: #ccc;
    margin: 0 10px;
  }

Ответ написан более трёх лет назад

Комментировать

Как обратиться к after, before через js?

Кристина @KrisIris

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

https://codepen.io/kris-iris/pen/MPJjgo

let wrap = document.querySelector('.wrap');

wrap.onclick = ()=> wrap.classList.toggle('noMagic');

.wrap{
  position: relative;
  width: 500px;
  height: 200px;
  background: lightblue;
  margin: 0 auto;
}

.wrap::before{
  position: absolute;
  content: 'Кликни на меня, детка!';
  height: 50px;
  width: 100%;
  background: lightgreen;
  transition: 2s;
}

.noMagic.wrap::before{
  content: 'А ты молодец!';
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 1s forwards;
}

@keyFrames move{
  100% {
    height: 100%;
  }
}

Ответ написан более трёх лет назад

7 комментариев

Как сделать адаптивный svg с возможностью менять цвет без JS?

Кристина @KrisIris

Если ты вставляешь иллюстрацию не инлайн, т.е. не код <svg>bla bla bla</svg>, то тебе нужно вставлять через тег

<object type="image/svg+xml" data="images/your.svg" >

А в самом коде иллюстрации добавить

<?xml-stylesheet type="text/css" href="style.css" ?>

и управлять из стилей как обычно.

Ответ написан более трёх лет назад

1 комментарий

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

Кристина @KrisIris

Вот так можно https://codepen.io/kris-iris/pen/xyRGzq

Ответ написан более трёх лет назад

1 комментарий

Как сделать такой всплывающий текст?

Кристина @KrisIris

Да хотя бы вот так. https://codepen.io/kris-iris/pen/YJGJJL

А вот тебе с их сайта код поковырять

function first_open_menu(){
	// heigt menu_block_content
	if( menu_block_content_height_first_load == 1){

		// calculate size crop block content height
		menu_block_heading_height = menu_block_heading.getBoundingClientRect().height;
		menu_block_content_height_first_load = 0;

		// crop block content height
		for(i=0; i < menu_block_content.length; i++){
			menu_block_content_height[i] = menu_block_content[i].getBoundingClientRect().height;
			menu_block_content[i].style.height = menu_block_heading_height + 'px';
		}
	}
}


// hover effects menu block
menu_block_1.addEventListener('mouseover', menu_block_1_mouseover);
menu_block_1.addEventListener('mouseout', menu_block_1_mouseout);

menu_block_2.addEventListener('mouseover', menu_block_2_mouseover);
menu_block_2.addEventListener('mouseout', menu_block_2_mouseout);

menu_block_3.addEventListener('mouseover', menu_block_3_mouseover);
menu_block_3.addEventListener('mouseout', menu_block_3_mouseout);

menu_block_4.addEventListener('mouseover', menu_block_4_mouseover);
menu_block_4.addEventListener('mouseout', menu_block_4_mouseout);

function menu_block_1_mouseover(event){ if(stop_function_desktop == 0) return;  menu_block_content[0].style.height = menu_block_content_height[0] + 'px'; }
function menu_block_1_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[0].style.height = menu_block_heading_height + 'px'; }

function menu_block_2_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_content_height[1] + 'px'; }
function menu_block_2_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_heading_height + 'px'; }

function menu_block_3_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_content_height[2] + 'px'; }
function menu_block_3_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_heading_height + 'px'; }

function menu_block_4_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_content_height[3] + 'px'; }
function menu_block_4_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_heading_height + 'px'; }

Ответ написан более трёх лет назад

8 комментариев

Что лучше использовать в реализации такого элемента?

Кристина @KrisIris

Самый примитивный и действенный вариант с интерактивом. https://codepen.io/kris-iris/pen/EdgxdO

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

Ответ написан более трёх лет назад

5 комментариев

Как возможно реализовать timeline змейкой?

Кристина @KrisIris

Нативные извращения в студию! https://codepen.io/anon/pen/XxKNqg?editors=1100

С svg будет легче, но мы же не ищем лёгких путей, да?

UPD: привела пример с текстом.

.wrapper{
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 0;
  right: 0;
}

.wrap{
  position: relative;
  max-width: 1200px;
  margin: 50px auto;
  
  &__list{
    display: flex;
    justify-content: space-around;
    margin-bottom: 80px;
  }
  
  &__item{
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    background: url('https://image.flaticon.com/icons/svg/138/138932.svg');
  }
  
  &__title{
    position: absolute;
    left: 0;
    bottom: -100%;
  }
  
  &__timeline{
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    
    &--first{
      top: 0;
      right: 0;
      border-right: 2px solid lightblue;
      border-radius: 0 20px 20px 0;
      
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: -1px;
        bottom: 0;
        border-top: 2px solid lightblue;
        border-radius: 0 20px 0 0;
      }
      
      &::after{
        content: '';
        position: absolute;
        left: 100px;
        right: -1px;
        height: 100%;
        border-bottom: 2px solid lightblue;
        border-radius: 0 0 20px 0;
      }
    }
    
    &--second{
      bottom: 0;
      left: 0;
      border-left: 2px solid lightblue;
      border-radius: 20px 0 0 20px ;
      
      &::before{
        content: '';
        position: absolute;
        left: -1px;
        right: 100px;
        top: 0;
        height: 100%;
        border-top: 2px solid lightblue;
        border-radius: 20px 0 0 0;
      }
      
      &::after{
        content: '';
        position: absolute;
        left: -1px;
        right: 0;
        bottom: 0;
        height: 100%;
        border-bottom: 2px solid lightblue;
        border-radius: 0 0 0 20px;
      }
    }
  }
}

Ответ написан более трёх лет назад

5 комментариев

Как изменить placeholer * цвет?

Кристина @KrisIris

В приличном обществе, это делается вот так https://codepen.io/anon/pen/MPejxg

<div class="wrap">
  <label for="txt">Имя<span>*</span></label>
  <input type="text" id="txt">
</div>

.wrap{
  position: relative;
}

label{
  position: absolute;
  left: 10px;
  top: 5px;
  color: #aaa;
}

span{
  color: red;
}

Ответ написан более трёх лет назад

Комментировать

Какой стек для верстальщика более актуальный?

Кристина @KrisIris

Во-первых, совет, не использовать jquery - это утопия. Тем более руки развязаны у вас, т.к. учитесь. Старые технологии === плохо, очень плохо!

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

Препроцессоры - это хорошо, но нативные вещи в css уже реализованы, теперь стоит подумать, прежде чем пользоваться надстройками языка.

Grid - это лучшее, что я видела в css, если коротко! :) Освоив этот синтаксис, хотя бы на половину, вам откроется бонус. Говорят мультик показывают.

Ответ написан более трёх лет назад

5 комментариев

Как сверстать таблицу на html?

Кристина @KrisIris

Вот тебе как путеводитель, дальше сам справишься, уверена. https://codepen.io/anon/pen/JaVJEg

<section class="table">
  <div class="table__header">
    <div class="table__heading">Order</div>
    <div class="table__heading">Date</div>
    <div class="table__heading">Name</div>
    <div class="table__heading">city</div>
    <div class="table__heading">payment status</div>
    <div class="table__heading">order status</div>
    <div class="table__heading table__heading--reverse">total</div>
  </div>
  
  <div class="table__row">
    <div class="table__data">1</div>
    <div class="table__data">2</div>
    <div class="table__data">3</div>
    <div class="table__data">4</div>
    <div class="table__data">5</div>
    <div class="table__data">6</div>
    <div class="table__data table__data--reverse">7</div>
  </div>
</section>

.table{
  background: #eee;
  padding: 0 10px 10px 10px;
}

.table__header{
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}

.table__heading{
  flex-grow: 1;
  flex-basis: 100px;
  color: #aaa;
  text-transform: uppercase;
}

.table__heading--reverse{
  text-align: right;
}

.table__row{
  display: flex;
  align-items: center;
  height: 60px;
  background: #fff;
  box-shadow: 0 0 2px 0 #aaa;
  border-radius: 2px;
  padding: 0 10px;
}

.table__data{
  flex-grow: 1;
  flex-basis: 100px;
}

.table__data--reverse{
  text-align: right;
}

Ответ написан более трёх лет назад

Комментировать

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

Кристина @KrisIris

https://codepen.io/anon/pen/XPQJgK Но валидацию нужно делать на js.

<form action="" class="pageForm">
  <div class="pageForm__wrap">
    <input id="name" type="text" class="pageForm__input" autocomplete="off" required>
    <label for="name" class="pageForm__label">Фамилия и имя</label>
  </div>
</form>

.pageForm__wrap{
  position: relative;
  margin-top: 50px;
}

.pageForm__label{
  position: absolute;
  top: 15px;
  left: 15px;
  transition: .3s;
}

.pageForm__input{
  width: 300px;
  height: 40px;
}

.pageForm__input:focus ~ .pageForm__label,
.pageForm__input:not(:focus):valid ~ .pageForm__label{
  margin-top: -50px;
  color: #aaa;
  font-size: 14px;
}

Ответ написан более трёх лет назад

Комментировать

Как будет правильнее сделать (flexbox)?

Кристина @KrisIris

Что-то типа такого. https://codepen.io/anon/pen/KxEjxb

<div class="container">
  <section class="news">
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
  </section>
  <aside class="sideBar">Боковое меню</aside>
</div>

.container{
  display: flex;
  max-width: 1200px;
  background: #eee;
  margin: 0 auto;
}

.news{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  background: lightgreen;
}

.news__item{
  flex-basis: 200px;
  flex-grow: 1;
  height: 300px;
  margin: 10px;
  background: lightblue;
}

.sideBar{
  flex-grow: 1;
  max-width: 400px;
}

Ответ написан более трёх лет назад

1 комментарий

Как работает контекст вызова функций? И почему так?

Кристина @KrisIris Автор вопроса

Вот нашла хороший, на мой взгляд, ответ. Как раз для таких вопросов!))))

Ответ написан более трёх лет назад

Комментировать

Почему в мозилле не отображается анимация?

Кристина @KrisIris Автор вопроса

Мозила не понимает 2 анимации в одной.
Попробуйте обьеденить свойства примерно так:
animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта

Ответ написан более трёх лет назад

Почему анимированное с помощью css изображение некорректно отображается в Мозилле?

Кристина @KrisIris Автор вопроса

Мозила не понимает 2 анимации в одной.
Попробуйте обьеденить свойства примерно так:
animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта

Ответ написан более трёх лет назад

Комментировать

Какую cms выбрать для интернет-магазина?

Кристина @KrisIris Автор вопроса

Спасибо!
А о php-shop что можете сказать?
А также о magento и os-commerce?

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт