Бром;Практические практики CSS3
Опубликовано: 27.09.2023
бром;Практические практики CSS3
Сначала мы показали друг другу Основные советы и рекомендации по CSS,подписан Полезные советы и рекомендации по CSS и сегодня мы поговорим о CSS3.
CSS3 — это новая спецификация, которая добавляет в CSS множество эффектов и развлечений. И многие из них радикально облегчают жизнь дизайнерам. Это еще не официальный стандарт, что некоторые интерпретируют как разрешение высказываться против его использования. Чушь чушь, CSS3 великолепен, и его можно использовать сегодня.
Интересный факт: чтобы спецификация стала официальным стандартом, она должнаполностью поддерживаться двумя браузерами. Используемый вами CSS2.1 не поддерживается полностью никем. IE8 ближе всего к этому ;) (источник: Реми Шарп )
Реальность такова, что современные браузеры уже сегодня поддерживают многие атрибуты CSS3, и вы можете легко их использовать. Старые браузеры просто игнорируют неизвестные атрибуты, и мир не рухнет, если тени нет в IE;)
В CSS3 много нововведений, из них меньше тех, которые действительно можно использовать, и мы покажем вам те, которые мы используем чаще всего в brm. Если я использую в тексте термин «современные браузеры», я имею в виду Opera, Firefox, Chrome и Safari. Извините, другие :)
Внимание:в старых браузерах следующие эффекты могут быть не видны. Если это ваш случай, скачайте последнюю версию браузера, в этом случае практически всегда лучше, чем новее ;)
text-shadow: [px] [px] [px] [цвет]
Тень под шрифтом — один из тех тонких эффектов, которые приятно иметь, но если их нет, ничего серьезного не произойдет. тень текста они какое-то время без проблем поддерживают все современные браузеры и работает это так:
бррм бррм бррм
текстовая тень: 2px 2px 3px #317392;бла бла бла
текстовая тень: -1px -1px 0px #ccc;
Возьмем первый пример. Тень смещена от текста вправо [2px] сверху [2px] размытый [3px] в цвете [#317392]. Во втором примере показано смещение на 1 пиксель вверху слева за вычетом первых двух значений. В результате он не выглядит как тень, из-за третьего значения 0px он не размыт, а шрифт выглядит так, как будто он окружен сплошной линией.Лично мне эта «неразмытая тень» нравится больше всего, я использую ее, чтобы аккуратно выделить текст, особенно заголовки. Чаще всего мой CSS выглядит так:
p { text-shadow: 1px 1px 0px [цвет]; }Совет для профессионалов: текст может иметь несколько теней одновременно, просто разделите их запятой. текстовая тень: 1px 1px 0px #fff, 3px 2px 4px #ff6600; но будьте осторожны, это ходьба по тонкому льду :)
box-shadow: [px] [px] [px] [цвет]
Снова Тень, на этот раз для HTML-элементы,которые не являются текстом ;) Если я хочу иметь с тенью я сделаю:
использовать разумно, порядочно
внутренняя тень, блин, да!
box-shadow: 2px 2px 3px #d3d3d3;
box-shadow: вставка 2px 2px 5px #ddd;
Важно:вот как это будет работать в Opera (10.60+), для запуска в Chrome/Safari нужно добавить -webkit-box-shadow и для Firefox -moz-box-shadow.
Почему? Проще говоря, если производители браузеров не уверены на 100% в реализации того или иного эффекта, они требуют использования префиксов. -webkit- для Chrome/Safari, -может быть- для Фаерфокс. Это их способ сказать: «Это работает, вы можете использовать это, но мы можем изменить это в будущем». Но не волнуйтесь, смело используйте.
Итак, ваш CSS будет выглядеть так:
#outer_shadow { box-shadow: 2px 2px 3px #d3d3d3; -webkit-box-shadow: 2px 2px 3px #d3d3d3; -moz-box-shadow: 2px 2px 3px #d3d3d3; } #inner_shadow { box-shadow: inset 2px 2px 5px #ddd; -webkit-box-shadow: вставка 2px 2px 5px #ddd; -moz-box-shadow: вставка 2px 2px 5px #ddd; }Слово вставка вначале он меняет тень на эквивалент «внутренней тени» в фотошопе.
радиус границы: [px]
Интернет полон закругленных углов и граница-радиус это как подарок небес. Там, где сейчас достаточно 1 строки кода, раньше нужно было создавать невероятные куски, наполненные изображениями, ненужным HTML, иногда даже JavaScript. Людям, использующим IE, придется мириться с такой угловой классикой, но им приходится ;)
Если мы хотим скруглить все углы (#box2), этого достаточно. радиус границы: 10 пикселей если мы хотим скруглить только некоторые углы вот так радиус-границы: [lh] [ph] [ld] [pd], где lh — левый верхний угол и т. д. Как и в случае с box-shadow, его необходимо использовать -webkit- а -может быть- префиксы.
Проверьте это:
#box1 {background: #faff8b; граница: сплошная 2 пикселя #cccc66; цвет: #cccc66; } #box2 {background: #fcd8e8; граница: сплошная 2 пикселя #ff99cc; цвет: #ff99cc; радиус границы: 10 пикселей; -moz-border-radius: 10 пикселей; -webkit-border-radius: 10 пикселей; } #box3 {background: #a9eec1; граница: 2 пикселя, сплошная #66cc99; цвет: #66cc99; граница-радиус: 0 25 пикселей 0 25 пикселей; -webkit-border-radius: 0 25px 0 25px; -moz-border-radius: 0 25px 0 25px; }На граница-радиус приятно видеть, какие различия могут быть в реализации этих «экспериментальных» атрибутов CSS3. Если мы не будем есть сокращенную форму граница-радиус: 0 25 пикселей 0 25 пикселей;, поэтому Opera определяет верхний правый угол как граница-верхний-правый-радиус, Firefox имеет
-moz-border-radius-topright и Chrome/Сафари -webkit-border-top-right-radius. Эм-м-м...непрозрачность: [%]
Вполне возможно, наиболее часто используемый из эффектов CSS3. Он был реализован и использовался задолго до того, как о CSS3 заговорили. О чем это? О прозрачности!
.opacity_50 { непрозрачность:.50; -moz-непрозрачность:.50; фильтр: альфа (непрозрачность = 50); }Префикс -может быть- мы уже знаем фильтр: альфа (непрозрачность = 50); оно здесь для Internet Exorer 6. Приведенное выше обозначение работает в большинстве браузеров и изменяет прозрачность на 50%.
Это хорошо работает для изображений и тому подобного, но это не всегда идеальное решение. На втором изображении мы видим, что полупрозрачность также применяется к «цензурированному» тексту, потому что непрозрачность все потомки родителя наследуют. Это, как правило, проблема.
Можно ли это как-то решить? Рад, что вы спросили...
фон: rgba([0-255], [0-255], [0-255], [%])
цензура... подождите... этот текст полностью белый, а фон полупрозрачный! эй!
.rgba_bg {фон: rgba(0, 0, 0,.75); }Мы используем его, например. в поиске справа вверху здесь на странице. Первые три атрибута — это значение RGB цвета в диапазоне. [0-255], четвертый атрибут такой же, как и в непрозрачность.
Если вы знаете только шестнадцатеричную запись, то есть #ffccff и вы не знаете где взять RGB, поэтому можете найти его здесь, в фотошопе:
Однако Internet Exorer с ним не дружит, ему нужно что-то вроде этого:
.rgba_ie {фон: прозрачный; фильтр: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); масштаб: 1; }источник CSS-трюки
линейный градиент
Градиент — это плавный переход от одного цвета к другому (как радуга, ууу!). Часто используется, например, на кнопках линейный градиент позволяет нам избавиться от изображений, которые используются в данный момент.
Теоретически. На практике пока его поддерживают только новые версии Firefox и Chrome/Safari, и выглядит это примерно так:
фон: -moz-linear-gradient (левый верх 270 градусов, #fefefe, #ddd); фон: -webkit-gradient(linear, слева вверху, слева внизу, from(#fefefe), to(#ddd));Опять другой синтаксис. Кстати, если вам интересно, почему я продолжаю упоминать Chrome и Safari вместе и почему они оба используют префикс -webkit-, поэтому знайте, что они используют один и тот же механизм рендеринга. Это называется вебкит :)
В случае Firefox первым аргументом является левый верх позиция, с которой мы начинаем, соответствует углу 270 градусов, при котором должен произойти переход. Итак, мы начинаем с верхнего левого угла, поворачиваемся на 270° и идем вниз. Так называемое «цвет останавливается». В данном случае мы начинаем с цвета. #fefefe и мы постепенно перейдем к #ддд.
В браузерах Webkit мы начинаем с аргумента линейный, за которым следует исходное положение левый верх, конечная позиция левый низ и, наконец, более буквальное обозначение «остановок цвета» — от(#fefefe) а это(#ддд). Мы видим, что в Chrome/Safari мы устанавливаем не угол, а непосредственно начальную и конечную позицию. Firefox сам определяет конец на основе угла и начальной позиции.
В обоих случаях позиция оценивается так же, как и при фоновая позиция, поэтому его можно использовать пикселей, % и так вообще.
Цветовые остановки не ограничиваются начальным и конечным цветом. Вы можете легко продолжить ввод цветов (разделяя их запятой) и они плавно перейдут друг через друга. Но не переусердствуйте, я не хочу ничего видеть. двойная радуга ;)
@font-face
Эти пиксельные шрифты в заголовках здесь, в блоге? @font-face. Типографика долгое время была темной стороной веб-дизайна. Конструкторам пришлось остановиться на определенной группе так называемых «безопасные» шрифты. Это те, которые есть в каждом компьютере с нуля. И если мы примем во внимание, что Windows предлагает шрифты, отличные от Mac, а Mac предлагает шрифты, отличные от Linux, и каждая из этих систем имеет X разных версий, мы обнаружим, что выбрать у нас больше нет столько.
@font-face дает нам возможность использовать практически любой шрифт, который мы хотим. Так же, как мы загружаем, например, на сервер изображений, теперь у нас есть возможность загружать шрифты и ссылаться на них в CSS обычным способом.
Рукописный текст написан от руки
@font-face { семейство шрифтов: рукописный; src: URL('fonts/handsean.ttf'); } p { семейство шрифтов: рукописный, Helvetica, Arial, без засечек; текстовая тень: 1px 1px 1px #e0e0e0; }Но сделать это не так-то просто... :) Opera и Chrome/Safari принимают TrueType (.ttf) и OpenType (.otf) шрифты, последние версии Firefox также поддерживают формат веб-открытых шрифтов (.woff), а для Internet Exorer требуется встроенный OpenType (.eot), а iPhone хочет векторы (.svg).
Итак, для обычных браузеров вы используете.ttf, ты создаешь CSS специально для IE и кидаем в него:
@font-face { семейство шрифтов: рукописный; src: URL('fonts/upirpaw.eot'); /* Съем этот IE. И еще, пошел ты на хуй. */ }Как вариант, вы можете изучить эту мега подробно инструкция как запустить @font-face практически везде. Плюс Веб-шрифты Google предлагает несколько предустановленных шрифтов с настройками и все такое... просто нужно быть осторожным, если шрифт, на который вы смотрите, понимает словацкий - то есть, если он смягчен, длинный и так далее.
Этот пост завершает нашу серию статей в блоге на тему CSS. Предыдущие статьи:
Я верю, что вы воспользуетесь полученной силой с умом (Человек-Паук!) и обогатите Интернет качественными, удобными и красивыми стендами. В этом порядке ;)
спасибо, пока :)
Новости
- Бланка Темлова: Детская больница у меня глубоко под кожей
- Блог о маркетинге и рекламе
- Yeti 160E – еще один развеянный миф
- Часто задаваемые вопросы по ЭВО
- Основы
- Производитель процессоров без собственного завода
- Мы получили: Празднование 40-летия ССК
- История доставки
- Грбин: Самое главное: Грлич Радман объявил себя жертвой романа
- Слово Божье на воскресенье, 13 июня 4619 г.
- Настоящая или искусственная? Создавайте фотографии и иллюстрации одним щелчком мыши
- Узнайте, как быстро можно надеть скафандр SpaceX в условиях микрогравитации
- Работа с CSV-файлами
- бром;Практические практики CSS3
- Интернет-форум об ошибкахС помощью ЦЕРН можно, занимаясь серфингом, вернуться на 30 лет назад
- Горячие трещины при сварке: подробное руководство
- Идеальные брови в домашних условиях
- 300 тысяч левов и ты поймешь, плоская ли Земля
- Куда я буду сохранять вместо сохранения?
- AI Inside Out #20: Два совета, на которые следует обратить внимание при использовании ChatGPT