All Articles Dreamweaver
Создание Великого текста с CSS3 в Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

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

Таким образом, в этой статье я собираюсь показать вам некоторые CSS, чтобы добавить в ваш стилей в Dreamweaver, которые действительно создают некоторые большие проекты.

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


Шаг 1 - Добавить Div AP

Начиная с пустой документ HTML открыть вставки панели и установите его в Layout. Из вариантов компоновки выбрать Draw AP Div.

Div drawn

Раздел обращается


Используйте инструмент для рисования Div AP (который является только Div тег с # ID стиль автоматически применяется содержащего положение и размер параметров). С помощью панели свойств для размера AP Div с Высота: 400px и ширина: 400px.


Шаг 2 - Назовите AP Div

Откройте панель элементов AP и переименовывайте APDiv1 в MyStyle. Откройте панель стилей CSS и вы себе, что переименование Div AP также повторно имена MyStyle ID стиля. Это стиль, который вы будете редактировать.


Шаг 3 - найти код CSS

Переключитесь на разделением, чтобы вы могли видеть оба изображения и код Youve создан. Перейдите к разделу, и вы увидите фрагмент кода выделен розовым, который говорит MyStyle # {}. Это ваш CSS и все настройки, что вы собираетесь создать, будет сидеть в двух {}.


Шаг 4 - Добавим содержание

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

rounded corners

закругленными углами


Совет: Увеличить радиус размером ровно половина вашего ширины и высоты (так в данном случае 200 пикселей) и предварительный просмотр еще раз .... Эй, вы получите идеальный круг!


Шаг 6 - градиентный фон

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

gradient background

градиентный фон


Следующий код создает этот градиент фона:

фонового цвета: # 666666;

фонового изображения:-МОЗ линейного градиента (сверху, # 666666, # 333333 40,0%);

фонового изображения:-WebKit-линейный градиентом (сверху, # 666666, # 333333 40,0%);

фонового изображения:-о-линейного градиента (сверху, # 666666, # 333333 40,0%);

фонового изображения: мс-линейного градиента (сверху, # 666666, # 333333 40,0%);

фонового изображения: линейно-градиент (сверху, # 666666, # 333333 40,0%);


Проверьте это в нескольких браузерах, если можно, чтобы увидеть эффект. Наконец добавим удар в текст.


Шаг 7 - Повышение текста

Ive добавил белого текста, чтобы сделать его лучше выделить против градиента. Кроме того, Ив добавил тень к тексту. Как и в тени градиент падения работает только с более поздних версиях Web-браузеров DONT всегда полагаться на него.

drop shadow

бросить тень


Этот код добавляет цвет и Drop Shadow:

цвет: # FFFFFF;

Текст тени: 2px 2px 3px # 000000;


Шаг 8 - Лучший шрифт?

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

Better text

Лучше текст


Добавляя эти строки:

начертание шрифта: нормальный;

Текст-align: left;

семейство шрифтов: Грузия, засечек;

Размер шрифта: 18.0px;

высота строки: 140%;

обивка: 10px;


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

Браузеры были обновлены все время поддерживать CSS3 и HTML 5, поэтому не следует слишком напуганы, чтобы пользоваться ими, просто надо знать. Что еще это не только традиционные веб-браузеров вы сможете стремиться с этим кодом, такие как Safari, Chrome и Firefox и т.д. Он также прекрасно работает на IOS и Android также. Если этого не сделать это стоит вашего времени, то что будет?



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: