Создание передового веб-сайта может стать масштабным мероприятием, если только вы не будете работать умнее, используя идеи, которые уже усовершенствовали другие. Перечисленные здесь методы могут сэкономить ваше драгоценное время, а также позволят вам создать высококачественный профессионально выглядящий сайт.
Управление шрифтами
Очевидно, что тип выбранного вами шрифта, а также его размер и цвет могут определять внешний вид вашего сайта. Однако в прошлом дизайнеры были несколько ограничены в выборе шрифта, поскольку шрифты по умолчанию отображались, когда выбранный шрифт отсутствовал на компьютере пользователя, что потенциально могло разрушить дизайн. Это также создало проблемы для дизайнеров в ситуациях, когда шрифты, используемые компанией в других публикациях, необходимо использовать на веб-сайте. Все это можно решить с помощью правила font-face , которое позволяет дизайнерам отображать любой шрифт в браузере пользователя.
Чтобы отобразить шрифт, сначала преобразуйте .tff в формат .eot. Это можно сделать с помощью бесплатного онлайн конвертера . После преобразования файла загрузите оба файла на свой сайт.
Чтобы отобразить шрифт в браузере пользователя, используйте этот фрагмент CSS:
@ шрифт-лицо
{семейство шрифтов: myFont;
источник: URL(‘MyFont.ttf’),
URL(‘MyFont.eot’); /* IE9 */ }
Вы можете настроить отображение шрифта с помощью любого из дополнительных свойств font-stretch, font-style или font-weight.
Цветовые коды
Если вам не нравятся цветовые схемы, не волнуйтесь — есть способ обойти эту проблему. Использование генератора цветовой палитры на CSSdrive.com — интересный способ создать цветовую схему на основе загруженного вами изображения. Как только вы загрузите свое любимое изображение (не превышайте 1 МБ), инструмент создаст шестнадцатеричные коды цветов, которые вам нужно использовать в таблицах стилей.
Фоновый цвет
Вы можете установить цвет фона для любого из различных элементов на вашем сайте из вашей таблицы стилей. В зависимости от ваших предпочтений вы можете установить цвет, используя шестнадцатеричное значение, значение RGB или имя цвета (если применимо). Чтобы установить цвет фона, используйте соответствующий элемент:
- тело {цвет фона: желтый;}
- h1 {фоновый цвет: # 000000;}
- p {цвет фона: RGB (255,0,255);}
Закругленные углы
При стилизации блоков или границ на вашем сайте закругленные углы, как правило, выглядят лучше, чем квадратные, а с помощью CSS3 их легко создать. Чтобы создать закругленный угол, просто используйте свойство border-radius . Вы можете контролировать каждый из четырех углов, используя этот метод, что дает несколько интересных вариантов.
Чтобы создать коробку с закругленными двумя верхними углами, используйте этот фрагмент кода:
#Top_Corners_Rounded {высота: 65 пикселей;
ширина: 260 пикселей;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
граница-верхний-правый-радиус: 50px;
граница-верхний-левый-радиус: 50px;}
Контроль конкурирующих стилей
Если вам нужно контролировать конкурирующие стили, то есть убедитесь, что один из них всегда реализуется в определенных ситуациях, используйте объявление !important . Это простое правило гарантирует, что всему объявленному !important будет отдан приоритет. Например, в обычном порядке CSS, если у вас есть следующие стили (возможно, в двух отдельных таблицах стилей), последний будет реализован, в этом случае абзац будет красным.
# стиль-тест р {
цвет синий; }
# стиль-тест р {
красный цвет;}
Однако при добавлении !important к первому стилю p отображаемым цветом будет синий.
# стиль-тест р {
цвет: синий !важно; }
# стиль-тест р {
красный цвет;}
3D-кнопки
Сделайте ваши навигационные кнопки эффектными, придав им 3D-эффект . Иллюзия создается с помощью атрибута box-shadow . Используя малую глубину, когда кнопка находится в активном состоянии, и большую глубину, когда она неактивна, вы создаете впечатление, что кнопка на самом деле нажимается при щелчке мышью.
Создание 3D-кнопки состоит из двух шагов:
- Поместите этот фрагмент в свой HTML-
код <a href=»to_your_link.html» class=»button»>Go!</a> - Поместите этот код в свою таблицу стилей
.кнопка {
цвет: #fff;
цвет фона:#F5B800;
отступ: 7px;
должность: родственница;
выравнивание текста: по центру;
размер шрифта: 48px;
текстовое оформление: нет;box-shadow:
5px 5px 5px 0 #000000;-webkit-box-shadow:
5px 5px 5px 0 #000000;-moz-box-shadow:
5px 5px 5px 0 #000000;радиус верхнего правого края: 20 пикселей;
-webkit-border-top-right-radius: 20px;
-moz-border-top-right-radius: 20px;граница-нижний-левый-радиус: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-bottom-left-radius: 20px;-webkit-transition: background-color 0.2s linear;
переход: background-color 0.2s linear;
}.button:active {
box-shadow: 1px 1px 5px 0 #000000;
-webkit-box-shadow: 1px 1px 5px 0 #000000;
-moz-box-shadow: 1px 1px 5px 0 #000000;
верх: 4px;
слева: 4px;
}.button: hover {цвет фона: #FFCC33;}
Если вы хотите, чтобы все углы кнопки были изогнуты, а не только верхний правый и нижний левый, используйте радиус границы: 20 пикселей, вместо границы верхнего правого радиуса: 20 пикселей и границы нижнего левого радиуса: 20 пикселей.
Аккордеонный стол
Отличный способ сэкономить место на странице — создать складные блоки. Вы можете использовать заголовок или заголовок темы, чтобы побудить пользователя щелкнуть мышью, но вам не нужно тратить драгоценное пространство на отображение всего текста. Создание блока в стиле аккордеона для хранения вашего контента требует немного усилий, поскольку он использует JavaScript и CSS , но в основном вы создаете файл .js для управления открытием и закрытием блока и файл CSS для управления отображением текста.
Генераторы и учебники
Хороший способ узнать больше приемов CSS или узнать, как работает тот или иной стиль, — попробовать различные онлайн- генераторы CSS . Эти инструменты могут создавать код для всего, от границ до раскрывающихся меню. Если вы хотите получить более полное представление о CSS, прочтите « Основы CSS» — онлайн-публикацию, в которой эта тема разбита на 18 глав. Каждый раздел наполнен практическими примерами и понятными объяснениями.