Ответы пользователя по тегу CSS
  • Почему slick работает неправильно?

    @Spaceoddity
    Вкратце, основная проблема со всеми этими слайдерами в том, что им для корректного расчёта размеров/количества слайдов надо заранее (до инициализации слайдера, т.е. до построения слайдером собственной разметки) "знать" размеры, разметку и количество контента.
    Грубо говоря, если у контента стоит display:none, то слайдер посчитает что это контент нулевой ширины и соответствующим образом сгенерит слайды с содержимым нулевой ширины.
    Путей обхода этого много и зависит от конкретного слайдера. Где-то надо реинициализацию сделать, где-то пересчитать размеры (проблема, кстати, актуальна и для адаптива), где-то не надо использовать display:none или динамическую генерацию контента после инициализации слайдера.
    Ответ написан
    Комментировать
  • Как сделать, чтобы блок не выходил за пределы контейнера?

    @Spaceoddity
    Если вкратце, то метода обычно такая:
    У вас контентная часть шириной 1200px. Вы там как-то управляете этим контентом (центрируете, растягиваете на всю ширину). Но дело в том, что блок с фиксированным позиционированием свои координаты и размеры (если они явно указаны) рассчитывает от размера вьюпорта (экрана). Вам нужно продублировать разметку контентной части для фиксированного блока. Т.е. сделать "фиксированную обёртку" и уже внутри неё подобным образом (как и .wrapper) разметить контент. Например:
    .wrapper{
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    .fixed{
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    .fixed-content{
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    Ответ написан
    1 комментарий
  • Как сделать такую же анимацию появления текста как на сайте tagion.org?

    @Spaceoddity
    https://nanto.bitbucket.io/ - моя реализация на чистом css
    если надо - могу скинуть код всех анимаций, но с ними довольно муторно разбираться. ну или подсказать направление в котором вам стоит покопаться - ключевое слово steps в css-свойстве "animation-timing-function"
    Ответ написан
    1 комментарий
  • Как правильно задать высоту для absolute елемента?

    @Spaceoddity
    .menu{
      position: static; /* )) */
      transform: translateY(-100vh);
      transition: transform 0.3s;
    }
    .menu.active{
      transform: translateY(0);
    }
    Ответ написан
    6 комментариев
  • Как измененить css свойста объекта, при наведении на другой?

    @Spaceoddity
    Если элемент на котором триггерится ховер вложенный или соседний по отношению к тому, свойства которого надо изменить то через css-селекторы (контекстный, >, +, ~ и т.п.). Если нет, то через JS.
    Ответ написан
    Комментировать
  • Отступы между img в классе. Как сделать?

    @Spaceoddity
    .services{
        overflow: hidden;
    }
    .services .services_img {
        position: relative;
        float: left;
        height: 100px;
    
        margin-right: 50px;
    }
    .services .services_img:last-child{
        margin-right:0;
    }

    но это неактуальный в наше время костыль. лучше:
    .services {
        position: relative;
        height: 100px;
    
        dispaly:flex;
        flex-flow: row wrap;
    
    /* следующие два свойства как раз настраивают нужное вам отображение по горизонтали и вертикали соответственно */
        justify-content: space-between;
        align-items: flex-start;
    }
    Ответ написан
    Комментировать
  • Как выровнять объекты?

    @Spaceoddity
    Ну флексбоксы и гриды вам и без меня посоветуют. Я лишь отмечу - приучайтесь читать код, а не бездумно копипастить его. У вас, в таком коротком коде, у селектора .content почему-то дублируются правила. Не говоря уже о дублировании правил и свойств в блоке медиазапросов. Пользуйтесь одним из фундаментов CSS - каскадом. Если вы прописали свойства какому-то селектору, а потом в блоке медиазапросов что-то дописали или изменили , то все описанные ранее свойства для этого селектора так же будут применены (если они не переопределены с большей специфичностью - определение блока медиазапросов по дефолту повышает специфичность всех вложенных селекторов).

    Конкретно на ваш вопрос, ответ:
    media only screen and (max-width: 1216px) {
    
    .content{
    text-align: center;
    
    position: relative;
    margin: 0 auto;
    }
    
    .content_block {
    text-align: left;
    
    position: relative;
    max-width: 1200px;
    width: 295px;
    height: 200px;
    border: solid 1px;
    display: inline-block;
    padding-bottom: 50px;
    margin: 0 auto;
    margin-top: 40px;
    
    background-color: #FFE475;
    }
    //...
    Ответ написан
    3 комментария
  • Отступ между колонками или привязка к блоку?

    @Spaceoddity
    Абсолютное позиционирование или бэкграунд.
    Вообще надо ещё на адаптив смотреть и уже в комплексе решать.
    Но конкретно тут в пользу бэкграунда говорит:
    1. Картинка явно декоративная, а не контентная. Я всегда стараюсь придерживаться именно этой семантический парадигмы - если графика оформительская, то она задаётся через css (через в html только в очень сложных случаях), если контентная - то через html (чтобы потом можно было легко поменять её через админку) и заодно прописываю ограничения (выравнивание, обрезку, растягивание и т.п.) для контента - чтобы при замене картинки на любую другую ничего не сломалось.
    2. Картинка не выровнена по сетке.
    3. Позиционирование безопаснее. Если вы сделаете эту секцию через флексбоксы (или гриды, или columns), а потом в адаптиве окажется что картинка должна заходить под текст - вам придётся перекраивать весь лэйаут. С бэкграундом вам надо будет просто прописать другие числа позиционирования.
    Ответ написан
    1 комментарий
  • Как сделать карточку CSS c вырезом по бокам?

    @Spaceoddity
    В теории можно, но возни много. Всё "рисование на css" сводится к разделению фигур на более простые составляющие, реализуемые через css. Вот вам пару вариантов реализации (справа и слева):
    62038294e2bf9242084708.jpeg
    И да, бордер при этом можно будет реализовать (в крайнем случае через перекрытие элементов).

    UPD: Проще всего, кстати, построить эту фигуру по вертикали: прямоугольник с закругленными верхними углами, две узких равнобедренных трапеции, прямоугольник с закругленными нижними углами:
    6203853354c86920812377.png
    Ответ написан
    1 комментарий
  • Можно ли изменять локально подключенный italic шрифт через @font-face?

    @Spaceoddity
    Ищите лучше:
    61fd89fa1e103201239601.jpeg
    И по ходу это стандартная поставка с Windows 10. В крайнем случае дёргайте дизайнера - он-то эти шрифты откуда-то же взял.
    Ответ написан
    Комментировать
  • Как сверстать email письмо?

    @Spaceoddity
    В теории, таблицы для вёрстки рассылок нужны чтобы контент по строкам рассовать, в столбик блоки и без помощи выстроятся.
    Т.е. "механизм" прост - для каждой вложенной строки делаете ячейку, в ней таблицу, и в ней уже выстраиваете ячейки горизонтально.
    <table>
    	<tr>
    		<td>
    			<table>
    				<tr>
    					<td>Ячейка 1</td>
    				</tr>
    			</table>
    		</td>
    		<td>
    			<table>
    				<tr>
    					<td>Ячейка 2-1-1</td>
    					<td>Ячейка 2-1-2</td>
    				</tr><!-- здесь таблицу можно закрыть и открыть новую, поскольку строка закончилась, а можно продолжить добавлять строки в эту таблицу -->
    				<tr>
    					<td>Ячейка 2-2-1</td>
    					<td>Ячейка 2-2-2</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    Ответ написан
    Комментировать
  • Относятся ли дефолтные браузерные шрифты к локальным в @font-face?

    @Spaceoddity
    Переформулирую ваш вопрос, а если local берёт шрифты из браузера, то откуда их берёт браузер? Вы куда шрифты устанавливаете - в браузер или в ОС?
    local() - ищет среди установленных в ОС шрифтах тот, гарнитура (семейство) которого совпадает со значением local.
    Единственное что может сделать браузер, если шрифт не установлен локально - это загрузить его в первый раз из удаленного источника, закэшировать и использовать кэшированный файл шрифта.
    P.S. И немного объясню насчёт "грамматики CSS". Кавычки в названиях гарнитур используются, если название гарнитуры состоит из более чем одного слова (чтобы экранировать пробелы). Если семейство шрифтов называется одним словом - использование кавычек не имеет смысла (но большинство разработчиков все равно их используют).
    Ответ написан
  • Как сделать css-анимацию по раскрытию элемента?

    @Spaceoddity
    "display: none;" уберите. Это оно анимацию блокирует.
    И в свойстве translate - надо указывать единицы измерения.
    transform: translateY(0);
    - такое не прокатит.
    Ответ написан
    2 комментария
  • Реально ли сделать такую таблицу и как?

    @Spaceoddity
    Не надо писать готовое решение. Надо просто натолкнуть автора на правильную работу с таблицами:
    Продолжите все линии в вашей таблице до границ само таблицы. Это будет сетка вашей таблицы, т.е. даст вам необходимое кол-во рядов и столбцов. С этими данными строите таблицу. А зоны объединения рядов и столбцов делаете с помощью colspan и rowspan. На grid суть точно такая же.
    P.S. Я тут вижу 7 столбцов и 4 ряда. С этими данными и стройте таблицу.
    Ответ написан
    Комментировать
  • Как реализовать смену темы с помощью styled-components без тысячи пропсов?

    @Spaceoddity
    Покажу как у меня сделано (vue):
    export default {
    	data() {
    		return {
    			actualColor: 'light'
    		};
    	},
    
    	methods: {
    
    		changeColorLight: function(event){
    			if(event){
    				if(this.actualColor === 'monokai') {
    					this.actualColor = "light";
    					this.changeColorClass();
    				};
    			};
    		},
    
    		changeColorMonokai: function(event){
    			if(event){
    				if(this.actualColor === 'light') {
    					this.actualColor = "monokai";
    					this.changeColorClass();
    				};
    			};
    		},
    
    		changeColorClass: function() {
    			let html = document.documentElement;
    			html.className = this.actualColor;
    		}
    }

    /******************************************************************************
    	Colorscheme variables
    ******************************************************************************/
    html.light{
    	--background:#ffffff;
    	--background_nav:#f3f3f3;
    	--foreground:#800000;
    	--foreground_script:#000000;
    	--foreground_brackets:#800000;
    	--foreground_script-brackets:#000000;
    	--foreground_cursor:#000000;
    	--selection:#add6ff;
    	--counter:#237893;
    }
    html.monokai{
    	--background:#272822;
    	--background_nav:#1e1f1c;
    	--foreground:#f92672;
    	--foreground_script:#a6e22e;
    	--foreground_brackets:#f8f8f0;
    	--foreground_script-brackets:#f8f8f0;
    	--foreground_cursor:#f8f8f0;
    	--selection:#575b61;
    	--counter:#90908a;
    }
    .content{
    	grid-column:content;
    	grid-row:1;
    	background-color:var(--background);
    }
    /* ну и т.д. */
    Ответ написан
    Комментировать
  • Как сверстать блок такого формата (без фреймворков)?

    @Spaceoddity
    И в чём тут проблема?))
    Представьте себе таблицу 3x3 c размером ячеек 25% 50% 25%. Как именно вы её будете реализовывать (table, блоки, флексбоксы, грид) - на ваш вкус.
    Ответ написан
    Комментировать