Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
b7music
сейчас это идет как символ из подгружаемого шрифта

Код:
bars:before {
    content: "\f0c9";
}

замените именно как символ - должно работать нормально. остальное - я не знаю что и как вы делаете.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 20:12 23-03-2021
b7music



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
DEL

Всего записей: 672 | Зарегистр. 04-03-2010 | Отправлено: 07:45 24-03-2021 | Исправлено: b7music, 07:52 24-03-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
b7music

Цитата:
Но картинка не отображается

и не будет, потому что не заданы размеры для инлайнового элемента.
когда вы вставляете символ - его размеры определены размером шрифта, когда просто фон - то он не определяет никак размер.
задайте размеры явно и сделайте display: inline-block

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 07:53 24-03-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Скажите, пожалуйста, я правильно понимаю, что использовать на странице шрифты PostScript Type 1 нереально? Прочитал, что Adobe даже прекращает их поддержку, но всё же интересно.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:55 05-04-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
использовать на странице шрифты PostScript Type 1 нереально?

что мешает преобразовать их в другой формат?

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 20:20 05-04-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, почему при применении filter: drop-shadow к объекту с фоновой картинкой, в Хроме тень только у картинки, в Сафари у картинки и немного у текста (он становится тоньше)? И можно ли это исправить?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:56 08-04-2021 | Исправлено: WONDROUS, 22:07 08-04-2021
SVolin

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Просьба подсказать, почему при применении filter: drop-shadow к объекту с фоновой картинкой, в Хроме тень только у картинки, в Сафари у картинки и немного у текста (он становится тоньше)? И можно ли это исправить?

Это скорее всего проблема или ошибка в самом Сафари. Исправить? Можно попробовать использовать SVG-фильтр.

Всего записей: 11 | Зарегистр. 05-04-2021 | Отправлено: 11:17 12-04-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SVolin
Спасибо за ответ (только сейчас прочитал).
 
Подскажите, пожалуйста, как можно сделать вертикальное центрирование?

Код:
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>

У div class="1" высота 80px и float: left. Надо, чтобы вертикально по центру располагались дивы 2, 3, 4, которые правее первого.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 20:07 20-04-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Надо, чтобы вертикально по центру располагались дивы 2, 3, 4, которые правее первого

а так как расположены? если они, конечно, все же не блочные, а inline-block

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:20 20-04-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
На данный момент display у них вообще нет.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:40 20-04-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
На данный момент display у них вообще нет.

ну так добавьте, раз нужно их все в одну строку.
а еще лучше показывать пример, сколько раз уже говорил.

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:13 20-04-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Как раз не в одну строку. Див 1 это картинка, которая слева, а справа три строки (три дива) друг под другом. Хотелось бы, чтобы эти три строки вертикально было по центру картинки слева, а не по верхнему краю выравнивались.
Спасибо, но сам разобрался.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 22:39 20-04-2021 | Исправлено: WONDROUS, 23:34 20-04-2021
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую, подскажите, почему в примере ниже в браузере safari не срабатывает перенос на новую строку? Видно, что работает word-spacing, но в связке с word-spacing совершенно игнорируется width.  Во всех остальных основных браузерах все нормально.  
Можно это исправить, желательно без явной ширины для каждого отдельного элемента?
 
https://codepen.io/lagudal/pen/WNRWNVw

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 08:58 28-04-2021
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<html>
 
<body>
<style>
body {
  height: 2000px;
}
 
#container {
  width: 200px;
  height: 200px;
  border: 2px solid;
  position: fixed;
}
 
#box {
  width: 100%;
  height: 100%;
  background: red;
  transform-origin: 0 0;
}
</style>
 
 
<div id="container"><div id="box"></div></div>
 
 
<script>
window.addEventListener( 'load', function() {
  var box = document.getElementById('box'),
      docHeight = document.documentElement.offsetHeight;
   
  window.addEventListener( 'scroll', function() {
        // normalize scroll position as percentage
    var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
        transformValue = 'scale('+(1-scrolled)+')';
 
    box.style.WebkitTransform = transformValue;
    box.style.MozTransform = transformValue;
    box.style.OTransform = transformValue;
    box.style.transform = transformValue;
     
  }, false);
   
}, false);
</script>
 
 
</body>
 
</html>
 

может кто поможет в вышестоящем коде с помощью css ограничить при скролинге минимальную величину красного квадрата(к примеру 100х100 не менее) ?
 
заранее спасибо
 
Добавлено:
min-height и min-width не помогают

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 19:42 14-05-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
при чем тут css?

Цитата:
transformValue = 'scale('+(1-scrolled)+')'

считаете какой размер будет при данном scale (исходя из исходного размера)
и если меньше нужного вам - не применяете дальнейшую трансформацию.
 
либо берете box.getBoundingClientRect().width и/или box.getBoundingClientRect().height

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 20:07 14-05-2021 | Исправлено: Mavrikii, 21:36 14-05-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в данном примере сделать звезду вертикально по центру? Просто запутался с этим, если честно.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 19:40 21-05-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
если размеры шрифтов не менются, то для псевдокласса можно сделать  
position: relative; и подвинуть на сколько хочется пикселей используя top:
 
либо задать явно line-height одинаковый, а у псевдо потом vertical-align: top

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 21:01 21-05-2021 | Исправлено: Mavrikii, 21:04 21-05-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Размер текста для псевдокласса может уменьшаться. А что если сделать display - flex для основного и align-self для псевдо?

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 21:55 21-05-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
А что если сделать display - flex для основного и align-self для псевдо?

ну можно и так

Всего записей: 15038 | Зарегистр. 20-09-2014 | Отправлено: 22:28 21-05-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Хм, если у основного стоит display: inline-flex (чтобы фон задать только для счётчика), то в Сафари 11 не виден градиент для текста, а в Хром всё нормально.
 
Добавлено:
Если поставить у основного display: table, а у псевдо display: inline-table, то работает вертикальное выравнивание и градиент для текста.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:30 21-05-2021 | Исправлено: WONDROUS, 00:57 22-05-2021
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru