8 трюков с функциями css


Содержание материала:

8 трюков с функциями css

Технология flexbox обещает спасти нас от проблем линейного CSS (таких как например вертикальное выравнивание).

В Firefox уже можно опробовать эту технологию. Однако освоение новой модели позиционирования может быть не таким простым.

Давайте посмотрим как работает flexbox, как мы можем использовать его для более простого позиционированния элементов.

Принцип позиционирования flexbox позволяет гибко и интуитивно строить лэйаут.

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

Всё это хорошо звучит в теории. Но давайте посмотрим как это выглядит на практике.

В этой статье мы рассмотрим 5 наиболее распространённых свойств модели flexbox. Мы рассмотрим как можно использовать их и как будут выглядеть результаты.

Вёрстка сайта. Ещё один подход.

Три колонки. Одна — это сайд-бар фиксированной ширины, для вашей навигации. Другая, скажем, для рекламы или фотографий. И, наконец, контент с изменяющейся шириной для полезной информации.

Множество статей написано о вёрстке, существует множество шаблонов. Однако большинство существующих решений чем-нибудь, да жертвует: порядок загрузки элементов, полноширинный футер, громоздкая разметка часто являются компромиссом в погоне за иллюзорной вёрсткой.

Техника, которая описана в этой статье, позволит вам создавать вёрстку без каких-либо компромиссов для вашего кода и гибкости. Эта техника:

  1. позволяет создать контент с плавающей шириной, боковые панели — с фиксированной;
  2. позволяет центральной колонке подгружаться первой;
  3. выравнивает все колонки по высоте;
  4. требует всего лишь один лишний div в разметке;
  5. использует очень простой CSS, с минимумом хаков.

Легко реализуемые и полезные CSS3-трюки

В повседневной работе одни новые CSS3-функции я использую постоянно, а в других у меня никогда не возникало необходимости. Прежде чем перейти к более сложным вещам, я подумал, что не помешает поделиться с вами парочкой CSS3-трюков, облегчающих жизнь, особенно при работе над адаптивными веб-дизайнами. Эти трюки позволяют решить простые задачи, которые раньше вызывали головную боль.

Множественные колонки CSS3 для адаптивных веб-дизайнов.

Вам когда-нибудь требовалось сделать так, чтобы одна часть текста отображалась в нескольких колонках? До появления CSS3 приходилось распределять содержимое по разным элементам разметки, а затем стилизовать соответствующим образом. Изменение разметки в целях стилизации никогда не было хорошей практикой. CSS3 позволяет сделать так, чтобы какая-то часть содержимого разбивалась на несколько колонок. Взгляните на приведенную далее разметку:

lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

Вы можете сделать так, чтобы все содержимое «растекалось» по нескольким колонкам, которые либо имеют определенную ширину (например, 12em), либо представлены в определенном количестве (например, 3). Далее показано, как это делается.

Если речь идет о колонках определенной ширины, то используйте следующий синтаксис (префиксы поставщиков не указаны для краткости):

Этот код означает, что, независимо от размера области просмотра, содержимое будет простираться на колонки шириной 12em. Изменение размеров области просмотра будет приводить к динамическому изменению количества отображаемых колонок.

Например, вот как все будет выглядеть в Safari при ширине области просмотра 1024 пиксела (рисунок 5.2).

На рисунке 5.3 показано, как та же страница будет выглядеть на экране iPad в области просмотра шириной 768 пикселов.

Текст разбит на четыре колонки

При меньшей области просмотра количество колонок уменьшается.

Превосходно приспосабливающийся макет, требующий минимума усилий, — это мне нравится! Если вы предпочтете сохранить фиксированное количество колонок и варьировать ширину, то вам потребуется правило вроде следующего:

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

В результате у нас получится следующее (рисунок 5.4).

Между колонками появился разделитель.

Ознакомиться со спецификацией CSS3 Multi-column Layout Module вы сможете по адресу http://www.w3.org/TR/css3-multicol/.

Теперь запомните, что для максимальной совместимости вам придется использовать префиксы поставщиков в объявлениях, касающихся колонок.

Сколько раз у вас возникала необходимость втиснуть длинный URL-адрес в очень маленькое пространство, и при этом вас постигало разочарование? Взгляните на проблему На рисунке 5.5. Обратите внимание на адрес внизу справа, выступающий за пределы отведенного для него пространства.

Адрес сайта не умещается в ширину колонки.

CSS3 позволяет решить эту проблему с помощью простого объявления, которое по стечению обстоятельств работает и в устаревших версиях Internet Explorer, причем даже в версии 5.5!

Добавив это объявление в код элемента-контейнера, мы получим результат, показанный На рисунке 5.6. Алле-гоп! Теперь длинный URL-адрес идеально вписывается в отведенное пространство благодаря переносу его части на новую строку!

6 лучших анимационных «фишек» CSS3

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

Топ-пост этого месяца:  Использование компонентов Symfony 4 в собственном PHP проекте. Часть 1

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

5 трюков CSS для адаптивных шаблонов

Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона — вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width , max-width , overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.

1. Адаптивное видео

Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.

2. Минимальная и максимальная ширина

Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.

Контейнер со свойством max-width

В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.

Адаптивное изображение

Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto .

Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto . Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:

Свойство min-width

Свойство min-width противоположно по действию свойству max-width . Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.

3. Относительные значения

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

Относительные поля

Ниже представлен пример комментариев, в которых относительная ширина левого поля используется для создания отступа в древовидной структуре. Вместо абсолютного значения в px используется процентное значение для следующего уровня в списке. В левой части рисунка видно, что на мобильных устройствах доступного пространства для элементов списка может стать недостаточно для нормального отображения в случае применения абсолютных значений.

Относительный размер шрифта

С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.

Относительные отступы

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

4. Трюк со свойством overflow:hidden

Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.

5. Свойство word-break

Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
Перевел: Сергей Фастунов
Урок создан: 19 Мая 2012
Просмотров: 100165
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

8 полезных трюков в Excel.


Microsoft Excel, пожалуй, лучшая офисная программа из когда-либо созданных. На ней держатся целые отрасли экономики, так что, виртуозно овладев этим инструментом, Вы сразу заметите, что дела у Вашего бизнеса идут в гору.

Кроме множества базовых приёмов работы с этой программой, которые Вы наверняка уже знаете, полезно изучить некоторые хитрости «для продвинутых», которые сделают Вас на голову выше всех остальных. Так что, если хотите впечатлить своих боссов и разгромить конкурентов, Вам пригодятся эти 9 хитрых функций Excel.

1. Функция ВПР
Эта функция позволяет быстро найти нужное Вам значение в таблице. Например, нам нужно узнать финальный балл Бетт, мы пишем: =ВПР(“Beth”,A2:E6,5,0), где Beth – имя ученика, A2:E6 – диапазон таблицы, 5 – номер столбца, а 0 означает, что мы не ищем точного соответствия значению.

Топ-пост этого месяца:  Быстрые ответы в Директе Инстаграма как сделать шаблоны сообщений

Функция очень удобна, однако нужно знать некоторые особенности её использования. Во-первых, ВПР ищет только слева направо, так что, если Вам понадобится искать в другом порядке, придется менять параметры сортировки целого листа. Также если Вы выберете слишком большую таблицу, поиск может занять много времени.

2. Функция ИНДЕКС
Отражает значение или ссылку на ячейку на пересечении конкретных строки и столбца в выбранном диапазоне ячеек. Например, чтобы посмотреть, кто стал четвёртым в списке самых высокооплачиваемых топ-менеджеров Уолл-стрит, набираем: =ИНДЕКС(А3:А11, 4).

3. Функция ПОИСКПОЗ
Функция ПОИСКПОЗ выполняет поиск указанного элемента в диапазоне (Диапазон — две или более ячеек листа. Ячейки диапазона могут быть как смежными, так и несмежными) ячеек и отражает относительную позицию этого элемента в диапазоне.

По отдельности ИНДЕКС и ПОИСКПОЗ не особо полезны. Но вместе они могут заменить функцию ВПР.

Например, чтобы в большой таблице найти, кто является главой Wells Fargo, пишем =ИНДЕКС(А3:А11,ПОИСКПОЗ(«Wells Fargo»,B3:B11,0).
С помощью функции ВПР этого не сделать, потому что она ищет только слева направо. А сочетание двух последних позволяет сделать это с легкостью.

4. 3D-сумма
Допустим, Вы решили подсчитать, сколько денег Вы тратите каждый день, и вести учёт в течение семи недель. Под каждую неделю Вы создали отдельный лист, куда по дням заносите расходы на алкоголь, еду и прочие мелочи.

Теперь на вкладке TOTAL (ИТОГО) нам нужно увидеть, сколько и в какой день Вы потратили за этот период. Набираем =СУММ(‘Week1:Week7’!B2), и формула суммирует все значения в ячейке B2 на всех вкладках. Теперь, заполнив все ячейки, мы выяснили, в какой день недели тратили больше всего, а также в итоге подбили все свои расходы за эти 7 недель.

5. $
Одна из самых удобных функций в арсенале Excel, а также одна из самых простых – это знак $. Он указывает программе, что не нужно делать автоматической корректировки формулы при её копировании в новую ячейку, как Excel поступает обычно.

При этом знак $ перед «А» не даёт программе изменять формулу по горизонтали, а перед «1» – по вертикали. Если же написать «$A$1», то значение скопированной ячейки будет одинаковым в любом направлении. Очень удобный приём, когда приходится работать с большими базами данных.

6. &
Если Вы хотите собрать все значения из разных ячеек в одну, Вы можете использовать функцию СЦЕПИТЬ. Но зачем набирать столько букв, если можно заменить их знаком «&».

7. Массивы
Для создания массива или матрицы Вам потребуется несколько операций, но они сложнее, чем в случае с обычными формулами, ведь для отображения результата требуется не одна, а несколько ячеек.

Например, давайте перемножим две матрицы. Для этого используем функцию МУМНОЖ (Массив 1, Массив 2). Главное, не забудьте закрыть формулу круглой скобкой. Теперь нажмите сочетание клавиш Ctrl+Shift+Enter, и Excel покажет результат умножения в виде матрицы. То же самое касается и других функций, работающих с массивами, – вместо простого нажатия Enter для получения результата используйте Ctrl+Shift+Enter.

8. Подбор параметра
Без этой функции Excel целым легионам аналитиков, консультантов и прогнозистов пришлось бы туго. Спросите кого угодно из сферы консалтинга или продаж, и Вам расскажут, насколько полезной бывает эта возможность Excel.

Например, Вы занимаетесь продажами новой видеоигры, и Вам нужно узнать, сколько экземпляров Ваши менеджеры должны продать в третьем месяце, чтобы заработать 100 миллионов долларов. Для этого в меню «Инструменты» выберите функцию «Подбор параметра». Нам нужно, чтобы в ячейке Total revenue (Общая выручка) оказалось значение 100 миллионов долларов. В поле set cell (Установить в ячейке) указываем ячейку, в которой будет итоговая сумма, в поле to value (Значение) – желаемую сумму, а в by Changing cell (Изменяя значение ячейки) выберите ячейку, где будет отображаться количество проданных в третьем месяце товаров. И – вуаля! – программа справилась. Параметрами и значениями в ячейках можно легко манипулировать, чтобы получить нужный Вам результат.

CSS: Приемы и трюки(Tips & Tricks). Часть 1

Горизонтальное центрирование

Для цеентрирование элементов блока нужно установить ширину элемента, левый и правый margin установить в auto.

Вертикальное центрирование текста по высоте линии

Если вам нужно вертикальное центрирование в блоке, высота которого фиксирована, проще всего установить высоту строки такой же как и высоту контейнера.
HTML:

Гибкие изображения

Для создания гибких изображения установите свойство max-width картинки в значение 100%

К сожалению IE не содержит атрибута max-width. Однако IE работает со свойством width так как должен работать с max-width. Используем для IE:

3D Кнопки используя только CSS

3D кнопки легко сделать используя для этого только CSS. Трюк использует элемент с несколькими границами разных цветов. Более светлые для светлых цветов и темные для темных.

Закругленные углы элементов

В CSS3 полностью поддерживается кросс-браузерное закругление углов:

Которые устанавливает радиус в 5 пикселей для всех 4х углов. Для более старых браузеров используется комбинация с небольшим добавлением JavaScript для кросс-браузерности.
В Safari, Chrome, и других браузеров на движке webkit используем свойство -webkit-border-radius, для Firefox и других основанных на движке Mozilla используем -moz-border-radius.

.element <
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
>

Webkit и Mozilla используют разный синтаксис для конкретных углов.

.element <
border-top-left-radius: 5px
-webkit-border-top-left-radius: 5px
-moz-border-radius-top-left
>

Для не Webkit и Mozilla браузеров используется jQuery плагин .

Порядок стилей ссылок

Задание свойств CSS для разных состояний ссылок устанавливается в следующем порядке:

a:link
a:visited
a:hover
a:active

Легко запомнить как LoVe HAte. LVHA – Link, Visited, Hover, Active.

Удаляем рамки у изображений-ссылок

По умолчанию картинки обрамленные в ссылку содержат рамки вокруг картинки(наподобие подчеркивания у ссылок). Удаляем их:

a image or a image

Растягиваем фоновую картинку

Чтобы создать фоновое изображение, которое может расширяться и сжиматься вместе содержащим его контейнером, достаточно содержащий элемент, который вы хотите создать образ больше, чем нужно, достаточно поместить его с максимально возможным размером содержащего элемента. Затем с помощью background-position разместить фоновое изображение в центре.

Изображение будет увеличиваться и уменьшаться до размеров контейнера и всегда будет в центре.

Visibility или Display?

На поверку оба свойства работают одинаково, скрывают или показывают элемент на странице. Но механизм их работы разный.

Кросс-браузерная прозрачность

Пока еще не все браузеры поддерживают CSS3 свойство прозрачности. Но можно добиться кросс-платформенной прозрачности.

.element <
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
>

К слову:
opacity свойство CSS занесенное в стандарт и будет одинаково хорошо работать как в Webkit, Mozilla и Opera
-moz-opacity для старых версий браузеров Mozilla
-khtml-opacity для старых версий Safari и браузеров использующих движок отображения khtml
filter:alpha(opacity=50) IE как всегда отличился

Class против Id

Используйте ID для неповторяющихся элементов на странице
HTML:

CSS:
#content
Используйте классы для элементов которые многократно могут быть повторно использованы на той же странице
HTML:

Стиль элемента в фокусе на форме

Полезным для удобства было бы, чтобы люди заполняя форму знали, в какие поля они вводят текст(поле содержащее фокус). Вы можете это легко сделать используя :focus pseudo-selector

Таким образом ваши пользователи будут сразу видеть поле в которое вводят текст.

Простая отладка CSS

Иногда ваши CSS, кажется, не работают, так как вы ожидаете, и вы хотите, выделить один элемент в HTML чтобы посмотреть место, которое он занимает. Самый простой способ сделать это, временно задать элементу границы

Таким образом можно увидеть очертания элемента. Это может помочь когда вы забыли где-то закрыть теги. Так же это позволяет увидеть занимаемую элементом площадь.

Тиснутая печать шрифтов средствами CSS

Базовая идея состоит в использовании свойства CSS3 text-shadow для создания эфекта тиснутоси.

.element <
color: #222;
text-shadow: 0px 2px 3px #555;
>

Хитрость заключается в использовании цветных теней, которые светлее, чем основной цвет текста и добавляем немного смещения и размытия.

Топ-пост этого месяца:  Основы CSS. Урок 9. Float, Clear, Display

CSS функции

Функция Описание Chrome

Firefox Opera Safari IExplorer Edge
attr() Используется, чтобы получить значение атрибута выбранного элемента и использовать его. 2.0 1.0 9.0 3.1 8.0 12.0
calc() Позволяет выполнять математические расчеты для определения значений свойств CSS. 26.0
19.0
-webkit-
16.0
4.0
-moz-
15.0 7.0
6.0
-webkit-
9.0 12.0
linear-gradient() Линейный градиент используется для заливки определенной области заданной последовательностью цветовых оттенков с плавными переходами между ними. 26.0
10.0
-webkit-
16.0
3.6
-moz-
12.1
11.1
-o-
6.1
5.1
-webkit-
10.0 12.0
radial-gradient() Радиальный градиент располагается вдоль своего радиуса, выходя наружу из центра элемента по круговой или эллиптической форме, при этом цвета градиента равномерно распределяются по всему пространству элемента. 26.0
10.0
-webkit-
16.0
3.6
-moz-
12.1
11.1
-o-
6.1
5.1
-webkit-
10.0 12.0
repeating-linear-gradient() Повторяющийся линейный градиент позволяет создать шаблон градиента с определенными точками остановки и повторить его по всему фону элемента. 26.0
10.0
-webkit-
16.0
3.6
-moz-
12.1
11.1
-o-
6.1
5.1
-webkit-
10.0 12.0
repeating-radial-gradient() Повторяющиеся радиальные градиенты позволяют создать шаблон радиального градиента с определенными точками остановки и повторить его по всему фону элемента. 26.0
10.0
-webkit-
16.0
3.6
-moz-
12.1
11.1
-o-
6.1
5.1
-webkit-
10.0 12.0

Кажется, вы используете блокировщик рекламы 🙁

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

Легко реализуемые и полезные CSS3-трюки

В повседневной работе одни новые CSS3-функции я использую постоянно, а в других у меня никогда не возникало необходимости. Прежде чем перейти к более сложным вещам, я подумал, что не помешает поделиться с вами парочкой CSS3-трюков, облегчающих жизнь, особенно при работе над адаптивными веб-дизайнами. Эти трюки позволяют решить простые задачи, которые раньше вызывали головную боль.

Множественные колонки CSS3 для адаптивных веб-дизайнов.

Вам когда-нибудь требовалось сделать так, чтобы одна часть текста отображалась в нескольких колонках? До появления CSS3 приходилось распределять содержимое по разным элементам разметки, а затем стилизовать соответствующим образом. Изменение разметки в целях стилизации никогда не было хорошей практикой. CSS3 позволяет сделать так, чтобы какая-то часть содержимого разбивалась на несколько колонок. Взгляните на приведенную далее разметку:

lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

lloremipsimLoremipsum dolor sit amet, consectetur // БОЛЬШОЕ КОЛИЧЕСТВО ДОПОЛНИТЕЛЬНОГО ТЕКСТА //

Вы можете сделать так, чтобы все содержимое «растекалось» по нескольким колонкам, которые либо имеют определенную ширину (например, 12em), либо представлены в определенном количестве (например, 3). Далее показано, как это делается.

Если речь идет о колонках определенной ширины, то используйте следующий синтаксис (префиксы поставщиков не указаны для краткости):

Этот код означает, что, независимо от размера области просмотра, содержимое будет простираться на колонки шириной 12em. Изменение размеров области просмотра будет приводить к динамическому изменению количества отображаемых колонок.

Например, вот как все будет выглядеть в Safari при ширине области просмотра 1024 пиксела (рисунок 5.2).

На рисунке 5.3 показано, как та же страница будет выглядеть на экране iPad в области просмотра шириной 768 пикселов.

Текст разбит на четыре колонки

При меньшей области просмотра количество колонок уменьшается.

Превосходно приспосабливающийся макет, требующий минимума усилий, — это мне нравится! Если вы предпочтете сохранить фиксированное количество колонок и варьировать ширину, то вам потребуется правило вроде следующего:

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

В результате у нас получится следующее (рисунок 5.4).

Между колонками появился разделитель.

Ознакомиться со спецификацией CSS3 Multi-column Layout Module вы сможете по адресу http://www.w3.org/TR/css3-multicol/.

Теперь запомните, что для максимальной совместимости вам придется использовать префиксы поставщиков в объявлениях, касающихся колонок.

Сколько раз у вас возникала необходимость втиснуть длинный URL-адрес в очень маленькое пространство, и при этом вас постигало разочарование? Взгляните на проблему На рисунке 5.5. Обратите внимание на адрес внизу справа, выступающий за пределы отведенного для него пространства.

Адрес сайта не умещается в ширину колонки.

CSS3 позволяет решить эту проблему с помощью простого объявления, которое по стечению обстоятельств работает и в устаревших версиях Internet Explorer, причем даже в версии 5.5!

Добавив это объявление в код элемента-контейнера, мы получим результат, показанный На рисунке 5.6. Алле-гоп! Теперь длинный URL-адрес идеально вписывается в отведенное пространство благодаря переносу его части на новую строку!

Условные CSS — намного круче, чем условные комментарии

Все браузеры поддерживают самые новые стандарты, на код реагируют полностью одинаково, лишены каких-либо багов — все это пока не имеет никакого отношения к реальности. Браузеры глючат, глючат по разному и это иногда выводит из себя.

Да, у нас конечно есть в арсенале CSS хаки. Но это не надежный метод, да к тому же к современным браузерам все сложнее найти хак: браузеры все лучше поддерживают стандарты. Хаки, основанные на том, что одни браузеры понимают такое-то CSS правило, а другие нет теряют свою актуальность. А разработчики браузеров нас не снабжают особыми конструкциями.

Исключением из правил тут только IE со своими условными комментариями. По видимому им пришлось ввести подобную конструкцию из-за бесчисленного перечня багов IE 5 и 6. Тут Microsoft обошел своих конкурентов и подумал о нас с тобой — web-разработчиках. Это ведь очень удобно: написал особое правило для определенной версии IE и у тебя не болит голова о том, что послезавтра выходит новый релиз браузера. Да и код к тому же валидный. Просто идеальное решение. Не могу только понять, почему же остальные передовые браузеры не переняли такую временами жизненно необходимую фичу.

Но в мире еще не перевелись энтузиасты! Один из них Allan Jardine — отец условных CSS.

Условные CSS. Что это?

Это CSS конструкция, которая позволяет указать точно, для какого браузера предусмотрено CSS правило. Перечень поддерживаемых браузеров:

  • IE — Internet Explorer
  • Gecko — Gecko браузеры (Firefox, Camino и т.п.)
  • Webkit — Webkit браузеры (Safari, Shiira и т.п.)
  • Opera
  • IEMac — Internet Explorer под Mac OS
  • Konq — Konqueror
  • IEmob — IE для мобильных устройств
  • PSP — Playstation
  • NetF — Net Front

Прелесть в том, что CSS условия можно применять как классу, так и к отдельному правилу. В добавок к этому, данный скрипт «клеит» отдельные CSS файлы в один, уменьшая тем число обращений к серверу.

Как это использовать
  • пишем подобный CSS
  • отправляемся на сайт разработчика, перечисляем используемые CSS файлы
  • получаем php-файл, который кладем в папку с CSS файлами и подключаем его вместо стилей с помощью @import (по желанию можно получить C-файл)
А как же валидность?

Браузер получает код без CSS условий, только код, который ему предназначался. Т.е. сами CSS условия браузер (и соответственно валидатор) не видит.

Функция skew()

Функция наклона skew() хорошо подходит для создания эффекта 3D. Принцип ее работы заключается в наклоне всех горизонтальных либо вертикальных линий элемента на определенное количество градусов. Визуально элемент словно искажается, растягивается в определенные стороны. Наклон может производиться по осям X и Y.

Функция skew() принимает два параметра. Первый параметр отвечает за наклон по горизонтали, второй — за наклон по вертикали. В качестве значения указывается угол от 0 до 360 с приставкой deg. Например:

Первый параметр отвечает за наклон вертикальных линий к оси X. Движение происходит от верхней части элемента и против часовой стрелки:

Второй параметр, соответственно, отвечает за наклон горизонтальных линий к оси Y. Направление движения — по часовой стрелке, начиная от правой стороны элемента:

Отдельные функции для осей

По аналогии с предыдущими рассмотренными функциями, в CSS есть отдельные функции skewX() и skewY() для управления наклоном от каждой оси по отдельности.

Практический пример использования skewX() (нажмите на картинку, если вам интересен исходный код данного примера):

Код HTML для данного примера:

Код CSS для данного примера:

Добавить комментарий