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

В этой статье мы разберем процесс масштабирования с помощью transform scale.

Прежде всего, в этой статье мы рассмотрим, как работать с этим свойством. Посмотрим специфику его работы. И узнаем где и зачем его можно применить.

Часть 2. CSS transform scale: Масштабирование

С помощью transform scale мы можем увеличивать или правильнее сказать растягивать наш объект от его первоначального размера.

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

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

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

Давненько я уже не писал продолжение сериала о новых свойствах CSS3.

Пора исправить этот недочет. Сегодня мы рассмотрим такой эффект как css transform.

Мы уже рассмотрели: opacity css, закруглённые края css, text-shadow, css shadow

Как понятно из названия он позволят трансформировать наш объект.

Какие именно трансформации нам доступны мы посмотрим на конкретных примерах, что бы не гонять зря воздух.

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

Здравствуйте уважаемые читатели с вами снова я постоянный ведущий блога «Профессия веб-мастер» Тригуба Сергей. (Здесь следуют аплодисменты. Шутка )

Ну а теперь к делу.

Давненько я уже не продолжал сериал о новых свойствах CSS3. Пора исправить эту оплошность.

Для тех, кто только, что к нам присоединился. Мы уже рассмотрели: прозрачность в css, закруглённые края css, text-shadow, box-shadow

Сегодня очередь свойства под названием: outline

Дословно его можно перевести как «за линией».

Ничего непонятно? Ничего сейчас посмотрите, что оно делает, и сразу все поймете.

Сегодня мы продолжаем тему новшеств CSS3. Мы уже рассмотрели:div закругленные края, text-shadow, box-shadow.

Сегодня очередь css прозрачности: opacity.

Это очень простое свойство в силу того, что имеет очень мало параметров.

Синтаксис прозрачности css

opacity: 0.5

opacity принимает значения от 0 до 1 с шагом 0,1.

Для реализации примеров возьмем синий квадрат:

html

Стили

Здравствуйте уважаемые читатели. Извините, что неделю ничего не писал. Но столько всего навалилось.

Завал на работе, день рождения сына. Да и еще какая-то хандра нашла. Вообщем где-то так.

Сегодняшняя статья будет не сильно большой, но кто-то явно найдет ее полезной.

Дело в том, что недавно один мой читатель спросил у меня: «Сергей как можно скрыть счетчик?. Но при этом, что бы он продолжал работать»

Этой статьей я отвечу на его вопрос. И если вам тоже интересен данный вопрос, милости прошу

Поможет нам в решении данной задачи как всегда CSS.

А именно его параметр visibility

Visibility – отвечает за видимость элемента.

Здравствуйте. Сегодня я продолжу обзор новинок из стана CSS3.

Мы уже рассмотрели: css блоки со скругленными краями и text-shadow.

Сегодня очередь CSS тени под названием: box-shadow.

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

С вашего позволения я буду рассказывать в похожем стиле, как и о text-shadow.

Стандартный синтаксис css тени: box-shadow

Положительные значения css тени

• 3px – это смещение тени по горизонтали (вправо на 3px);
• 4px – это смещение тени по вертикали (вниз на 4px);
• 2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
• #000 – это собственно цвет тени (черный цвет);

Пример: Синий квадрат на белом фоне и черная тень