Задать вопрос

cssfish

Плохое знание основ - причина больших бед
Ответы пользователя по тегу CSS

  • Почему не работает Touch Punch?

    @cssfish
    Плохое знание основ - причина больших бед
    похоже в сборку jquery-ui не включен компонент Draggable - см на странице jqueryui.com/download
    Ответ написан
    Комментировать
    Комментировать

  • Почему текст не распространяется под фотографией?

    @cssfish
    Плохое знание основ - причина больших бед
    flexbox тут вообще не нужен. картинке дайте флоат как вам и советовали. и все
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать только хедер адаптивным на неадаптивном сайте?

    @cssfish
    Плохое знание основ - причина больших бед
    С чего вы взяли что медиа-запросы не работают без тега meta viewport???
    Единственное, что происходит без этого тега - мобильники задают некую виртуальную ширину устройства, обычно это 980px, и в нее рендерят сайт.

    Соответственно вам никто не мешает прописать например@media only screen and (max-width: 990px) {}
    и там стили адаптива свои накидать. Просто держите в уме, что оно отрендерится в 980 а потом запихается в 360 например, т.е. размеры задавайте с учетом масштаба, вот и все.
    Ответ написан
    Комментировать
    Комментировать

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

    @cssfish
    Плохое знание основ - причина больших бед
    для полной ясности, отключаем все маржины ,паддинги и relative смещения, и видим базовую механику -это inline-block-и, выровненные по базовой линии (vertical-align: baseline по умолчанию)
    63ae019a8697a826424447.png
    Ответ написан
    Комментировать
    Комментировать

  • Как скрыть ul первого и второго уровня, оставить только ul 3 уровеня вложенности?

    @cssfish
    Плохое знание основ - причина больших бед
    значит надо скрывать не UL а все LI кроме родительских по отношению к вашему меню 3 уровня.
    плюс скрывать текст/контент в самих родительских LI.

    это все конечно коряво но вполне реализуемо...
    Ответ написан
    Комментировать
    Комментировать

  • Как отделить блок линией?

    @cssfish
    Плохое знание основ - причина больших бед
    Так и не понял, вам на десктопе или на мобильных (точнее на тач устройствах)?
    Т.к. видов скролла два:
    1) привычный "дектопный", который часть вьюпорта отъедает. Под него вы ничего не сунете. Только если использовать скриптовый скролл вместо него, тогда да.
    2) скролл "поверх" блока, как на тач девайсах. там вашу задачу решать вообще не надо, скролл и так будет сверху.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как придать div вот такую форму?

    @cssfish
    Плохое знание основ - причина больших бед
    вырезка через clip-path, закругление потом через svg #round . Правда, не везде это хорошо смотрится
    Ответ написан
    Комментировать
    Комментировать

  • Объясните, какая ширина в пикселях у элемента с классом .item в следующем фрагменте кода?

    @cssfish
    Плохое знание основ - причина больших бед
    Если что-то мешает сделать html страничку и проверить, то прикидываем логически:

    Если другого css нет, получаем:

    1) по умолчанию box-sizing: content-box, поэтому "внутренняя" ширина у wrapper останется 1000px, а общая - 1100px.

    2) ширина list-items заявлена в 50%, рассчитывается от "внутренней" ширины родителя
    1000 * 0.5 = 500px
    но по умолчанию этому элементу задан отступ. В каждом браузере свой, возможно.
    В FF например это 40px паддинг слева. Но так как у нас box-sizing: content-box, то опять же "внутренняя" ширина у list-items останется 500px, а внешняя 500+40(или другое)

    3) ширина item заявлена в 70%, рассчитывается от "внутренней" ширины родителя, получаем
    500 * 0.7 = 350px

    У li вроде никаких отступов по умолчанию нет, поэтому это и будет ответом...
    Ответ написан
    Комментировать
    Комментировать

  • Уменьшить размер видео?

    @cssfish
    Плохое знание основ - причина больших бед
    взять ffmpeg.exe и нагуглить пару команд для требуемого качества сжатия
    Ответ написан
    1 комментарий
    1 комментарий

  • Можно ли сделать так, чтобы абсолютный элемент не вылазил за футер?

    @cssfish
    Плохое знание основ - причина больших бед
    даже закрытое меню сдвигает футер
    -конечно, visiblity ведь элемент никуда не девает из потока.

    если волнует дыра снизу то Overflow должно помочь.

    а если волнует что пункты меню не видно - тогда надо js делать, проверять что все входит. если нет, двигать куда-то, скролл внутрь ставить и тд
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать бесконечную бегущую ленту из изображения через @keyframes?

    @cssfish
    Плохое знание основ - причина больших бед
    чтобы при "уходе" картинки влево справа еще она вылезала, надо ее туда добавить :)
    т.е. внутрь .lenta надо не одну image поставить, а 2. чтобы они были в одну линию. И все ,анимацию делаем и закольцовываем
    пример - вверху справа
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сверстать такие кнопки?

    @cssfish
    Плохое знание основ - причина больших бед
    пока нет времени сделать пример.

    но это можно сделать комбинацией clip-path (для угла) и border-radius (для скругления корректировочного). Это на самом блоке.

    А основное скругление (на обертке) через svg фильтр filter: url(#round);

    а сам фильтр в svg на страницу положить
    <defs>
	<filter id="round">
		<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"></feGaussianBlur>
		<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
		<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
	</filter>
</defs>
    Ответ написан
    Комментировать
    Комментировать

  • Откат в медии на 1 пиксель - костыль?

    @cssfish
    Плохое знание основ - причина больших бед
    По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
    1) 768+
    2) 0 - 767

    соответственно:
    @media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


    Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))

    похожая тема на стеке

    upd:
    а, ну вот там и ответ:
    // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
    // See https://bugs.webkit.org/show_bug.cgi?id=178261
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать чтобы текст рос вверх?

    @cssfish
    Плохое знание основ - причина больших бед
    если absolute, то прижимаем его к низу bottom- и он будет расти вверх.
    а если flex то flex-end
    Ответ написан
    Комментировать
    Комментировать

  • Почему у меня в nextjs в css файлах не грузятся картинки?

    @cssfish
    Плохое знание основ - причина больших бед
    html и css лежат на одинаковом уровне вложенности? судя по одинаковым путям к картинке
    Ответ написан
    2 комментария
    2 комментария

  • Как нанести метки на картинку?

    @cssfish
    Плохое знание основ - причина больших бед
    1) делаем блок с фиксированным соотношением сторон (ratio), равным соотношению сторон картинки
    2) картинку внутрь, на 100% по ширине и высоте
    3) блоку relative
    4) метки делаем например как блоки с фоном. тоже с фикс соотношением сторон. Ширину прописываем как % от общего блока
    5) каждой дополнительно даем свое имя или модификатор. Расставляем как abs блоки, позиционируя через %
    6) соотв-но вешаем js который по клику выводим справа нужный текст (сравнивая с именем/модом/дата-атрибутом данного флажка)

    если все это неясно то проще заказать разработку
    размер устройства в дюймах тут вообще не важен
    Ответ написан
    Комментировать
    Комментировать

  • Как разместить анимированное svg в background?

    @cssfish
    Плохое знание основ - причина больших бед
    дело в соотношении сторон (ratio).
    svg, как видно невооруженным взглядом, имеет rato 1426 : 793
    У вас он вставлен в блок некой высотой (как я предполагаю, т.к. примера или кода не привели полного), и получается что: ширина плавает, высота фиксированная. Т.е. ratio плавает, и часть svg то подрезается, то наоборот "остается пустое пространство".
    Чтобы это решить, svg надо затолкать в блок с фиксированным ratio. Делается он просто: 
    .background {
  position: relative;
}
.background:before {
  content:"";
  display: block;
  height: 0; // Опционально
  padding-top: calc( 100% * 793 / 1426 );  // Y / X   
}


    и растягиваем svg внутри него

    .background svg {
  display: block;
  position : absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; //  опционально
  height: 100%; // опционально
}


    но это в случае если background блок самостоятельный. а у вас я гляжу он тоже куда-то растягивается, тогда ratio надо не на него вешать а на обертку, либо структуру как-то менять
    Ответ написан
    2 комментария
    2 комментария

  • Как изменить или стилизовать стандартные стрелки верх-вниз в Input type number?

    @cssfish
    Плохое знание основ - причина больших бед
    да никак (нормально). воз и ныне там. проще скрыть и добавить свои.
    наберите "Input type number стилизация" в поисковике, в конце концов )
    Ответ написан
    Комментировать
    Комментировать

  • Как скрыть кнопку "показать весь текст" если сумарно текста меньше чем 2 строки?

    @cssfish
    Плохое знание основ - причина больших бед
    у абзаца
    1) узнать font-size и line-height, перемножить
    2) измерить высоту
    3) разделить [2] на [1]
    4) используем результат [3] для ветвления...
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать перекрытие элементов в зависимости от ширины блока?

    @cssfish
    Плохое знание основ - причина больших бед
    общий принцип:
    1) обертки карт делаем нулевой ширины, сами карты внутри центрируем
    2) обертка для всех карт - паддинги по бокам на пол-карты, flex + space-between

    все, вложится идеально. если border и прочее то box-sizing по вкусу.
    сделал пример, вместо обертки карт использовал сами карты как обертки, псево внутри для отображения карты.

    <!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	
	<style>
		.cards {
			width: 60%;
			border: 2px solid red;
			margin: 10px auto;
			
			display: flex;
			justify-content: space-between;
			padding: 0 45px;
		}
		.card {
			flex-shrink: 0;
			
			position: relative;
			width: 0;
			height: 126px;
			transition: 0.3s;
			cursor: pointer;		
		}
		.card:before {
			content: "";
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: -45px;
			width: 90px;
			height: 100%;
			background-color: blue;
			border-style: inset;
			border-radius: 10px;		
		}
		.card:hover{
			transform: translate(0, -20px);
		}	
	
	</style>
</head>
<body>
	
	<div class="cards">
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
	</div>

	<div class="cards">
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
	</div>
	
	
</body>
</html>


    upd:
    правда, центрирования не будет )

    С центрированием будет, если:
    • space-evenly
    • width: 90 для карточек и отриц отступы
    • margin: auto для всех карточек или крайних только

    но все эти решения дают плавающие боковые промежутки :(
    Ответ написан
    2 комментария
    2 комментария