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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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
GEGEMON



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii - пост
Цитата:
еще и фон скейлить, то https://jsfiddle.net/9vjh4d8w/

то что надо! Спасибо. Скажите пжст, телефон еще добавить нужно. Какой алгоритм действий?
img уже есть один...

Всего записей: 2820 | Зарегистр. 07-02-2006 | Отправлено: 23:17 14-10-2019
Mavrikii

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

Цитата:
телефон еще добавить нужно. Какой алгоритм действий

тоже картинкой? зачем?
для простоты - и девиз и телефон могут быть на одной картинке, тогда ничего в html коде менять не нужно.
более того, их можно сразу добавить на фоновую картинку, тогда вообще вторая картинка не понадобится.
иначе - position: relative; родительскому диву и внутри через position: absolute;, но там будут свои заморочки

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 23:32 14-10-2019 | Исправлено: Mavrikii, 23:33 14-10-2019
GEGEMON



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii - пост
Цитата:
более того, их можно сразу добавить на фоновую картинку

да вроде не кошерно, не принято как бы, вот я и парю. Хотя сначала именно так и сделал.
Спасибо за помощь!

Всего записей: 2820 | Зарегистр. 07-02-2006 | Отправлено: 23:37 14-10-2019
Mavrikii

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

Цитата:
да вроде не кошерно, не принято как бы, вот я и парю.

вы уже совмещаете 2 картинки, что не принято.
и на одной, если сделать правильно, не будет той пикселизации, что сейчас.

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 23:41 14-10-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите, пожалуйста, как правильнее и проще наложить цвет (с прозрачностью) поверх фоновой картинки?
Сделать так: div class=main color, где main основа с фоновой картинкой и для color сделать background-color. Или для main просто сделать большую внутреннюю тень (box-shadow: inset 0 0 0 3000px)?

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 13:46 17-10-2019
fararara

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
 
А почему картинку изначально не сделать с нужными параметрами?

Всего записей: 243 | Зарегистр. 19-03-2010 | Отправлено: 19:13 17-10-2019
Mavrikii

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

Цитата:
как правильнее и проще наложить цвет (с прозрачностью) поверх фоновой картинки?

только отдельным потомком или before или after
https://jsfiddle.net/1ofehvc7/

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 19:54 17-10-2019 | Исправлено: Mavrikii, 00:07 18-10-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
fararara
Можно, но все же будут этим заниматься (это про вообще, в целом)
 
Mavrikii
Спасибо за ответ и пример, но что если использовать background-image?

Код:
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('');

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 20:34 18-10-2019
Mavrikii

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

Цитата:
но что если использовать background-image?

использовать где?  
при совмещении на первом месте идет картинка, а цвета вылезут только там, где у нее есть прозрачность, поэтому "поверх" не получится.
https://jsfiddle.net/bxnfcz13/

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 20:39 18-10-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, что не так в этом примере (его коде) и как сделать, чтобы градиент был вертикально по центру. Если делать высоту 100%, то получается по центру, но тогда все "звёзды" становятся плоскими.

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 16:15 21-10-2019
Mavrikii

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

Цитата:
но тогда все "звёзды" становятся плоскими.

они и так плоские или имелось в виду "сплющенные"?
убрать, где не нужно, overflow: hidden (он тут вообще не нужен).
добавить
Цитата:
background-image: radial-gradient(circle at center, rgba(138, 223, 234, 1.00), rgba(10, 0, 56, 1.00));

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Да, сплющенные, и такими их делает height: 100%.
Про circle at center знаю, спасибо, только без указания высоты это не работает.

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 21:03 21-10-2019
Mavrikii

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

Цитата:
только без указания высоты это не работает.

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за совет! Переставил градиент в другое место, теперь показывается как надо.

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 21:29 21-10-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в данном примере можно увеличить размер (диаметр) отходящих ("пульсирующих") кругов? Если увеличить проценты, то круги идут не по центру.

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 01:24 26-10-2019
Mavrikii

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

Цитата:
@keyframes pulse2 {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 02:09 26-10-2019
WONDROUS



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

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 13:37 26-10-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать: при указании шрифта в CSS (@font-face), пишется название, которое указывается в его свойствах? Потому что в примерах пишется название, например, FontOne, а сам файл может называться One Font.woff.

Код:
@font-face {
 font-family: "FontOne";
 src: url("/One Font.woff") format("woff");
}

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 01:14 02-11-2019
Mavrikii

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

Цитата:
Потому что в примерах пишется название, например, FontOne, а сам файл может называться One Font.woff.

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

Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 05:51 02-11-2019 | Исправлено: Mavrikii, 05:52 02-11-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! Из разных примеров это вроде бы так, но на практике, пришлось писать полное название шрифта.
Например:

Код:
@font-face {
  font-family: myFont;
  src: url("Fun_Light.ttf"),
       url("Fun_Light.eot");
}
 
p {
  font-family: myFont, serif;
}

Где названия разные, но у меня так не получается, правильное название шрифта надо прописывать полностью.
 
Ещё вопрос, можно ли средствами CSS или ещё как-то (не слишком сложно) получить имя шрифта из его свойств (из самого добавляемого шрифта)?
 
И обязательно ли прописывать fallback для шрифта и его формат?

Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 12:13 02-11-2019 | Исправлено: WONDROUS, 15:42 02-11-2019
Открыть новую тему     Написать ответ в эту тему

Страницы: 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