вПолезное

Использование CSS3

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

1. Для того, чтобы браузеры поддерживали те или иные эффекты, необходимо использовать правильные префиксы.

  • -moz- : Firefox
  • -webkit- :  Safari и Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

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

2. Закруглённые углы. С появлением этого расширения, стало возможным создавать не только прямоугольники не с острыми краями, но и рисовать круги.

Для общего случая

  • border-radius: [<length> | <%>];
  • border-radius: [top-left] [top-right] [bottom-right] [bottom->left];
  • border-top-left-radius: [<length> | <%>];
Для того чтобы это всё работало в Mozilla, Safari и Chrome необходимо впереди дописать префиксы, к примеру так
Mozilla

Для создания различных фигур, которые имеют 4 угла необходимо экспериментировать с радиусами и типами границ. К примеру вместо solid использовать dotted.

фигурыА вот код, как сделать ихкод

3. Использование нескольких фонов позволит вам создавать сложный фон без использования лишних div тэгов

background:url([image]) [position] [repeat], url([image]) [position] [repeat];
К примеру, чтобы создать такой фонсложный фон

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

Если вы хотите использовать этот метод, вы можете также устанавливать размер фонаразмер фона - код

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

особая заливка границ - код

5. Разбиение текста на несколько равных колонок.

  • column-width: [width];
  • column-gap: [width];
  • column-count: [number];
  • column-rule: [width] [style] [color];
Для того чтобы это сработало в различных браузерах вам необходимо добавлять префиксы.
  • Safari 3.2+ [-webkit-]
  • Chrome 4+[-webkit-]
  • Firefox 3.0+ [-moz-]

6. Поддержка градиентов. Вы можете рисовать различные градиенты, несмотря на то, что всего лишь предусмотрено 2 типа градиента. Т.к. разработчики включили различные точки останова.

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

text-shadow: [x-coordinate] [y-coordinate] [blur radius] [color]; Если перед text-shadow добавить особое слово «inset», тогда тень станет внутренней.

тень у текстаКод для того чтобы создать тени у текстатени у текста

Тени у фигур.тени у фигур

Их кодИх код

Автор:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *