Главная › Новости

Бром;Практические практики 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. Предыдущие статьи:

Я верю, что вы воспользуетесь полученной силой с умом (Человек-Паук!) и обогатите Интернет качественными, удобными и красивыми стендами. В этом порядке ;)

спасибо, пока :)