Недавно я перепроектировал свой собственный блог-сайт и решил использовать значок в стиле календаря для отображения времени. Предыдущим решением было обычно использовать фоновые изображения. Благодаря CSS3, теперь мы можем реализовать такие функции, используя CSS3. Я буду использовать некоторые свойства, такие как линейные градиенты, радиус границы и тень коробки, чтобы заменить предыдущий дизайн Photoshop.
Photoshop Concept DiagramМногие дизайнеры используют метод проектирования непосредственно в браузере, но я все еще предпочитаю метод создания концептуальных схем Photoshop. Хотя сейчас многие эффекты могут быть непосредственно реализованы с помощью CSS, способ разработки эффектов с помощью Photoshop намного проще, чем способ постоянно пытаться изменить CSS, чтобы наконец достичь желаемого эффекта.
Сначала создайте округлый прямоугольник и установите округлый радиус углового радиуса до 10px. После этого мы будем использовать собственность пограничного радиуса CSS.
Добавьте вертикальный градиент в прямоугольник, градиент цвет от #DAD8D8 до #FCFCFC.
Установите 1-пиксельный ход, цвет #e3e3e3
Наконец, добавьте вниз понижающий эффект тени с прозрачностью 20%, расстоянием 0 пикселей и размером 15 пикселей. Эти эффекты будут реализованы в CSS с использованием свойства Box-Shadow.
Скопируйте прямоугольник прямо сейчас и удалите верхнюю часть. Измените градиент, цвет от #790909 до #D40000, заполните недавно созданный прямоугольник, который разместит информацию о месяце.
Установите внутреннюю тень, чтобы представить верхнюю границу, цвет № A13838, прозрачность 100%, расстояние 3PX и размер 0PX.
Используйте шрифт Photoshop, чтобы установить эффект шрифта первой половины значка календаря. Шрифт Helvetica, а цвет № 9E9E9E.
Введите информацию о месяце в красном разделе ниже, установите шрифт на широкий и цвет в белый.
Модель Photoshop завершена. В прошлом мы снимали фотографию в качестве фона и писали на нем числа HTML, но теперь все это может быть достигнуто с помощью CSS.
HTML -структура<div class = date>
<p> 25 <pan> май </span> </p>
</div>
На этот раз HTML Icon Demo очень прост. Мы будем использовать Div с классом «дата» в качестве контейнера, а затем используем P -тег для представления номера даты. Дни и месяцы представлены различными размерами в нашем дизайне, поэтому мы будем использовать теги <pan> для по -разному относиться к различным элементам.
Стиль CSS.дата {
Ширина: 130px; Высота: 160px;
Фон: #FCFCFC;
Фон: линейный градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -моз-линейр-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -Вобкит-линейно-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
}
Стиль CSS сначала устанавливает высоту и ширину всего контейнера, и эффект градиента может быть легко достигнут с помощью градиента CSS.
.дата {
Ширина: 130px; Высота: 160px;
Фон: #FCFCFC;
Фон: линейный градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -моз-линейр-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -Вобкит-линейно-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Граница: 1px sold #d2d2d2;
граница радий: 10px;
-Моз-грамотный радий: 10px;
-Вебкит-грамотный радий: 10px;
}
Используйте атрибут границы для достижения эффекта границы 1PX в Photoshop, а затем используйте границу-радиус для достижения закругленного углового эффекта. Не забудьте добавить префиксы -моз- и -вебкит, чтобы обеспечить совместимость со старыми браузерами.
.дата {
Ширина: 130px; Высота: 160px;
Фон: #FCFCFC;
Фон: линейный градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -моз-линейр-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Фон: -Вобкит-линейно-градиент (вверху, #FCFCFC 0%, #DAD8D8 100%);
Граница: 1px sold #d2d2d2;
граница радий: 10px;
-Моз-грамотный радий: 10px;
-Вебкит-грамотный радий: 10px;
Box-Shadow: 0px 0px 15px rgba (0,0,0,0,1);
-Моз-бокс-тень: 0px 0px 15px rgba (0,0,0,0,1);
-Webkit-box-shadow: 0px 0px 15px rgba (0,0,0,0,1);
}
Последняя часть кода состоит в том, чтобы достичь более низкого эффекта тени в дизайне Photoshop через Box-Shadow. Добавить горизонтальные и вертикальные смещения 0px, чтобы увеличить двусмысленность 15px. Используйте RGBA для контроля прозрачности. В дизайне Photoshop 105 заменяется на 0,1 здесь.
.date p {
Фондовая семья: Helvetica, Sans-Serif;
размер шрифта: 100px; Текст-альбом: Центр; Цвет: #9E9E9E;
}
Мы используем тег P для определения стилей для определения стилей текста для дат. Шрифт, размер текста и цвет текста копируются из Photoshop, а в центре установлено значение текста в центр. Но стиль также влияет на текст месяца, и мы определим стиль маркировки SPAN для него отдельно.
.date p span {
Фон: #D10000;
Фон: линейный градиент (вверху, #D10000 0%, #7A0909 100%);
Фон: -моз-линейр-градиент (вверху, #D10000 0%, #7A0909 100%);
Справочная информация: -Webkit-Linear-Gradient (вверху, #D10000 0%, #7A0909 100%);
}
Реализация красной части достигается путем установки атрибута линейно-градиента для фона пролета, а красное значение также поступает из Photoshop.
.date p span {
Фон: #D10000;
Фон: линейный градиент (вверху, #D10000 0%, #7A0909 100%);
Фон: -моз-линейр-градиент (вверху, #D10000 0%, #7A0909 100%);
Справочная информация: -Webkit-Linear-Gradient (вверху, #D10000 0%, #7A0909 100%);
размер шрифта: 45px; шрифт-вес: жирный шрифт; Цвет: #ffff; Текст-трансформация: верхний регистр;
дисплей: блок;
}
Измените стиль текста, чтобы соответствовать дизайну, установите размер на 45px, установите его на жирный шрифт, установите цвет на белый и используйте текстовую преобразование для реализации преобразования капитала. Установите тег SPAN на элемент блока, чтобы он соответствовал размеру контейнера и установил красный фон.
.date p span {
Фон: #D10000;
Фон: линейный градиент (вверху, #D10000 0%, #7A0909 100%);
Фон: -моз-линейр-градиент (вверху, #D10000 0%, #7A0909 100%);
Справочная информация: -Webkit-Linear-Gradient (вверху, #D10000 0%, #7A0909 100%);
размер шрифта: 45px; шрифт-вес: жирный шрифт; Цвет: #ffff; Текст-трансформация: верхний регистр;
дисплей: блок;
Пограничная топ: 3PX SOLID #A13838;
граница радий: 0 0 10px 10px;
-Моз-грамотный радий: 0 0 10px 10px;
-Вебкит-грамотный радиус: 0 0 10px 10px;
Подкладка: 6px 0 6px 0;
}
Остальное состоит в том, чтобы добавить границу головы, использовать стиль пограничной вершины для его реализации и использовать атрибут границы-радиуса для реализации двух округлых углов в нижней части. Небольшой атрибут прокладки может сделать месяц, который имеет некоторое расстояние между вверх и вниз и другими элементами.
Совместимость браузераХотя улучшенные свойства CSS могут помочь нам достичь последствий градиентов и теней в Photoshop, нам все равно приходится столкнуться с проблемами, с которыми веб -дизайнеры должны были столкнуться в прошлом, совместимость браузера.