Вопросы с меткой [css3]
CSS3 — третья версия формального языка описания внешнего вида документа CSS.
4,401
вопрос
0
голосов
0
ответов
23
показа
Изменение ширины блоков
Имеется три колонки(блока) одинаковой ширины, как сделать, что бы при изменении размеров окна уменьшалась сперва ширина правого блока до ширины контента внутри него и после начать изменять ширину ...
1
голос
1
ответ
36
показов
CSS эффект для текста
Подскажите пожалуйста, как реализовать такой эффект в CSS, и если можете, подскажите как такой эффект называется, я даже не до конца понимаю "как его гуглить"
0
голосов
0
ответов
34
показа
Как плавно заполнить background у div-а?
Есть блок, который на странице выглядит так:
Html выглядит так:
<div class="relative rounded-full rating_border overflow-hidden h-9 bg-grey-100 mb-3">
<div class="bg-primary ...
1
голос
1
ответ
43
показа
Подскажите пожалуйста, с чем связано не ровное увеличение картинки при наведении?
.cards {
display: grid;
gap: 40px;
grid-template-columns: repeat(4, 245px);
grid-template-rows: repeat(1, 210px);
justify-content: space-between;
align-items: center;
}
.post_card {
...
0
голосов
1
ответ
39
показов
Как работает градиентый текст в данном случае?
Объясните, пожалуйста как работает градиентный текст?
background: var(--third-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
Что записывается в background? ...
0
голосов
0
ответов
38
показов
при просмотре на айфоне видеофон с градиентом ведёт себя некорректно
window.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector('.nav-menu'),
menuItem = document.querySelectorAll('.nav-menu__button'),
hamburger = document....
1
голос
0
ответов
33
показа
css: при использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально
При использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально
.blocks {
width : 100%;
column-count : 2;
...
0
голосов
1
ответ
31
показ
Вёрстка адаптивной формы
Нужна блочная адаптивная верстка. На фото представлено то, как это должно быть с требованиями:
Не получается сделать именно верхний вариант:
<!DOCTYPE html>
<html>
<head>
<...
0
голосов
2
ответа
35
показов
текст с обводкой на при просмотре на телефоне видны посторонние линии, а при просмотре на компьютере всё выглядет нормаль
div {
background: #e0dddd;
}
.title__publication {
webkit-text-fill-color:#c86acf;
-webkit-text-stroke: .1rem white;
color: #c86acf;
font-weight: 700;
font-family: 'Rubik Mono One', sans-...
0
голосов
1
ответ
25
показов
Что-то не импортируются таблицы css
Хочу объединить в style.css все другие таблицы (header,nav и тд) и подключать только его к html, однако есть какая-то ошибка которую я не вижу, а также имеется ошибка в консоли браузера.
Путь к файлам
...
1
голос
1
ответ
22
показа
::before появляется неполностью
Есть , к нижней части которого нужно добавить svg картинку, однако при добавлении её на left: 0;
bottom: -6px; (сама картинка высотой 6px), то она не появляется и добавляется вертикальный скрол.
Вот ...
0
голосов
0
ответов
15
показов
flex-shrink не работает корректно с img в WebKit (движок Safari)
У меня есть страница где должны быть расположены элементы: картинка и тег form с полями. Задана ширина 40% для картинки и 60% для формы и соотвествующий gap для расстояния между ними. При уменьшении ...
0
голосов
0
ответов
20
показов
Проблема с отоброжением при смене языка
проблема в следующем есть выпадающее окно для выбора языка сайта, при изменении всё флаги при выборе ведут себя так как требуется, но при выборе французского он в диапазона 1021-1199 падает вниз, ...
1
голос
1
ответ
47
показов
Как сделать такую полоску над картинкой?
Добрый вечер!
Ломаю голову над этим чудом и не пойму как сделать такую полосу над картинкой.
1
голос
1
ответ
41
показ
Как сделать такой изогнутый блок?
Как этот желтый прямоугольник также выгнуть в css?
1
голос
1
ответ
34
показа
Почему height:100% не работает в данном случае? [закрыт]
Вот у меня есть контентная часть, которую я с помощью стиля 'flex' расположил автоматически между хедером и футером(в нем пока нет контента), мне нужно расположить секцию welcome до конца экрана, я ...
0
голосов
0
ответов
6
показов
Цвета из конфига tailwind не работают при разрешение 640px
Всем привет. Решил попробовать tailwind. Суть данных кнопок показывать какой компонент надо отображать. Но когда я сжимаю разрешение до 640px в ширине, то из кнопок пропадает кастомные цвета. Именно ...
-1
голос
1
ответ
51
показ
Растянуть блок на всю высоту родителя
Как растянуть блок main__container на всю высоту родителя main, чтобы сетка grid заполнила весь main?
HTML
<div class="wrapper">
<header class="header">
...
0
голосов
0
ответов
15
показов
Есть ли в Angular библиотека для создания собственного редактора, такого как CodePen или StackBlitz?
Хочу в свой Angular проект внедрять редактор для кодов на разных языках, например JS, TS, PHP, Python и так далее. Чтобы была кнопка Run для старта кода и Preview/Output для просмотра результата․ ...
0
голосов
1
ответ
23
показа
как сделать так чтобы при нажатии на поиск исчезли блоки
Добрый день или вечер проблема с JS мне надо чтобы при нажатии на input из div class=lil скрыл div class=ResContent
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" href=&...
0
голосов
1
ответ
69
показов
css: плавное "выдвигание" созданного блока
подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
0
голосов
0
ответов
9
показов
Не отображается элемент nav.menu:before [дубликат]
HTML:
body{
width: 100%;
height: 100%;
background: #48a37d;
}
nav.menu {
width: 960 px;
margin: 0 auto;
}
nav.menu:before {
content: '';
display: block;
height: 50 px;
width: 100%;
position: ...
1
голос
3
ответа
67
показов
Изображение для топ бордера
введите сюда кодУ меня есть контейнер, на верх этого контейнера в виде рамки мне нужно вставить изображение не меняя его основной стиль, я пытался вставить через border-top и background-image: но не ...
0
голосов
2
ответа
63
показа
css: адаптивный размер текста (в зависимости от ширины блока)
Есть вот такой код в котором в одной полосе выводится 2 блока.
Задача такая:
левый блок занимает всё место, которое не занимает правый блок (пропусков между блоками нет)
размер правого блока не ...
0
голосов
0
ответов
30
показов
Странные селекторы класса
Часто встречаю странные селекторы .car.active - это что такое?
0
голосов
1
ответ
19
показов
Как сделать контейнер имел max-width таким, чтобы левая часть была с отступом, а правая шла через весь экран
Нужно, чтобы грузовик касался правой части экрана, но при этом, чтобы левая часть с текстом имела такой же отступ как и у header а, нужно сделать это без позиционирования грузовика, контейнер имеет ...
0
голосов
1
ответ
16
показов
как в css для grid-а плюсануть к fr pixel
(два блока)
вот так не работает
grid-template-columns: calc(2fr + 8px) 1fr;
grid-template-columns: (calc(2fr + 8px)) 1fr;
-1
голос
1
ответ
38
показов
анимированное Меню бургер
Не получается создать значок в форме X, как можно исправить?
.navbar__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
...
0
голосов
0
ответов
22
показа
aos.css как разжать файлы? плагин Beautify не работает!
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-...
0
голосов
2
ответа
38
показов
CSS-анимация с нажатием "Наведи на меня"
Как сделать анимацию с нажатием "Наведи на меня", чтобы вскочила "Подсказочка!" с блоком? Требуется решение БЕЗ JavaScript
.block {
position: absolute;
width: 600px;
...
1
голос
1
ответ
33
показа
Углы для контейнера
Очень хочу сделать вот такую рамку для своего контейнера но уже 4 день ничего не выходит. Вот мой код что я уже смог написать border: 5px solid #FFCF6E;
clip-path: polygon(20px 0, calc(100% - 20px) ...
0
голосов
1
ответ
38
показов
Почему при изменении позиции меняется ширина у абсолютно позиционированного элемента?
Есть такой pen: https://codepen.io/stn28/pen/ExepRrp
Кому неудобно лазить на сторонние ресурсы, вот пример:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
border: 1px solid ...
0
голосов
1
ответ
31
показ
CSS Как поставить элемент по центру экрана, что б не влияли на другие элементы?
Есть вот такой упрощенный пример
body {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #000;
overflow: ...
0
голосов
1
ответ
76
показов
По стандарту html, в ul можно вложить только списки li?
По стандарту html w3c в ul на первом уровне вложенности могут быть только списки li? Или можно вложить любой другой элемент и это не будет ошибкой? Просто случайно заметил что у меня в коде в ul ...
0
голосов
1
ответ
27
показов
Выбрать элемент селектором CSS
Имеется такая структура:
<label class="agreement__label">
<span class="wpcf7-form-control-wrap" data-name="acceptance-311">
<span class="wpcf7-...
0
голосов
1
ответ
30
показов
Ширина правого блока в приоритете
.gl {
display: flex;
}
.right {
width: 90%;
}
<div class='gl'>
<div class='left'>sssss sss ssd sdas sss sss ssssd s dasss sssss sssd sda sssss ssss ssd sdas
</div>
<...
2
голоса
1
ответ
36
показов
Не работают stroke-dasharray, stroke-dashoffset
Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
0
голосов
1
ответ
43
показа
Липкий первый столбец, липкая шапка и горизонтальный скролл в таблице
Как сделать липкие шапку и первый столбец (полностью первые ячейки в tbody и в thead) таблицы с горизонтальным скроллом? Без ограничений в высоте таблицы
<!DOCTYPE html>
<html lang="en&...
0
голосов
1
ответ
29
показов
Не работает :last-of-type
В htm моя сетка построена так - в footer в блоке nav, я создал список из однотипны элементов, также они еще являются ссылками
<nav class="footer__links">
<ul class="...
1
голос
1
ответ
85
показов
Как обратиться к элементу внутри элемента?
Как обратиться к тегу li, который находиться в div class="group"?
Надо к каждому элементу li придать одно свойство через CSS, но без придачи class к каждому элементу li
На сайте есть и ...
0
голосов
0
ответов
27
показов
Самый оптимальным вариантом создания сайдбара по прежнему является float?
Ребята, создавать сайдбары все также лучше с помощью float-ов? Flex'ы не лучшее решение для них, а грид не такой кроссбраузерный как float и гриды конечно для более сложных случаев. Я прав, или мое ...
0
голосов
0
ответов
7
показов
Как сделать header и footer с разными повторяющимися по горизонтали background картинками?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#title {
top:0;
height:20%;
background-...
0
голосов
1
ответ
16
показов
Выбрать определенный элемент селектором css
Подскажите css селектор, чтобы выбрать все ссылки, кроме первой ("Страница 1"). Html структуру менять нельзя.
<div class="breadcrumbs-wrapper">
<div class="...
0
голосов
0
ответов
20
показов
Неравномерное распределение текста при разбиении на колонки
Можно ли при разбиении текста на колонки (column-count) управлять равномерностью распределения текста по высоте? В частности, нужно чтобы текст не равномерно распределился по двум колонкам (изменив ...
0
голосов
1
ответ
17
показов
Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?
САБЖ:
Есть дизайн у которого есть элементы со сложной формой в виде гексогона или ячейки сот. Внутри этого элемента есть имидж и иной контент.
ПРОБЛЕМА:
Необходимо сделать полупрозрачный, ...
0
голосов
0
ответов
16
показов
как изменить курсор в scss?
Здраствуйте)
как изменить курсор на сайте чтобы делал клик по центе?
я делаю aimlab на react-е без canvas
я хотел изменить курсор на прицел но у меня проблема со кликом
для лучшего понимания я ...
0
голосов
0
ответов
17
показов
Не работают стили на buttjn в React Native не могу изменить его
Я просто хотел поменять размер текста у кнопки но не получается а также жирность текста. Стили не применяются сколько не пытаюсь
import React from 'react';
import { View, Text, Button, StyleSheet }...
0
голосов
1
ответ
24
показа
Как убрать нижнюю грань в materialize при нажатии на input
Столкунулся с такой проблемой: при нажатии на <input type="text"/> у этого инпута появляется нижняя бирюзовая грань. Я уже копался в стилях этого инпута, но ничего даже с таким цветом ...
0
голосов
1
ответ
23
показа
Необходимо перенести выпадающее меню на передний план
Возникла проблема с выпадающем меню, его нужно перенести при нажатии на передний план, но мешает элемент с позиционированием sticky под ним, вот сам сайт - https://0398-46-172-28-69.eu.ngrok.io/, буду ...
0
голосов
1
ответ
42
показа
Почему появляется резкий переход от последнего слайда к первому в Slick Slider?
Столкнулся с проблемой, делаю простой слайдер при помощи Slick Slider и наблюдаю резкий скачек от последнего слайда к первому если ставить режим infinite: true.
$('#slick-slider').slick({
...