5 полезных решений для дизайнеров и разработчиков
Этот пост содержит ряд уникальный и интересных CSS / JavaScript методов, разработанных талантливыми специалистами. Ключевым моментом является то, что веб-дизайнеру необходимо уметь наблюдать, понимать и делать по проектам других людей. Это отличный способ развития навыков и методов, необходимых для получение качественных веб-сайтов.
Имея это в виду, давайте посмотрим на некоторые интересные методы, разработанные и используемые профессионалами в веб-дизайне. Мы можем использовать на примере, и развивать наши собственные интересные решения.
1. Создание хронологии времени через CSS
Создания хронологии является одной из задач, который должен быть решен, когда речь идет о разработке портфолио. Некоторые дизайнеры делают хронологию как картинку, другие используют просто текст или используют старые добрые таблицы. Мы нашли интересное CSS решение как на сайте 37signals.com. Хотя хронологию обычно делают горизонтальной, хронологию которую мы сейчас рассмотрим, предстовляет собой вертикальную, «зиг-заго-образную» форму.
Как это сделать?
Для создание такого «зиг-заго-образного» эффекта, мы будем идти по каждой строке. Путем присвоения класса «even», мы можем задать другой стиль хронологии, которая расположена справа.
Вот HTML код:
<div>
<span>2009</span>
<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
</p>
</div>
<div>
<span>2008</span>
<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
</p>
</div>
А вот CSS:
По умолчанию хронология будет плавать слево и 100 пикселей padding с правой стороны. Это оставляет место под год (<span>), чтобы быть справа. Также использовали абсолютное позиционирование на год, чтобы я мог легко переключаться слева направо.
.timeslot {
width: 235px;
float: left;
margin: 0 0 10px;
padding: 10px 100px 0 0;
border-top: 3px solid #ddd;
position: relative;
}
.timeslot span {
position: absolute;
right: 0;
top: 27px;
font-size: 3em;
color: #999;
}
.even {
float: right;
padding: 10px 0 0 100px;
border-color: #ca0000;
}
.even span {
left: 0;
color: #ca0000;
}
2. Стилизация
Один сайт, который является поистине уникальным — это сайт . Впечатляет на сайте то, что каждая статья блога является совершенно уникальной, благодаря своему дизайну. Глядя на недавнию статью «»мы обсудим несколько техник, которые будут полезны для нас.
1. Стилизация страниц в Wordpress
Первый вопрос, который приходит на ум, когда заходишь на блог Джейсона: «Как он делает уникальный дизайн для каждого поста?». Этого можно добиться только с помощью переделывание стандартного стилей веб-сайта. Используя «» и понимание CSS, вы можете дать каждому своему посту уникальный дизайн. Итак, как это делается?
Шаг 1. Настройка заметки с таблицей стиля
Начните с создания новый стилей, а также сделайте имя файла в соответствии с названием вашей заметки. С хорошим знанием CSS, вы можете настроить внешний вид и пост.
Шаг 2. Создайте значения настраиваемых полей
Войдите в «админку» WordPress, и перейдите на страницу редактирования записи. Перейдите в раздел «Пользовательские поля» и введите новое имя настраиваемого поля. Затем в поле со значением введите ссылку на ваш стиль
.
Шаг 3. Вызов стилей
Откройте файл header.php из вашей используемой темой, а над тегом <title>, добавьте следующее:
<?php $customStyles = get_post_meta($post->ID, «customStyles», true);
if (!empty($customStyles)) { ?>
<link rel=»stylesheet» href=»<?php echo $customStyles; ?>» type=»text/css» media=»screen» />
<?php } ?>
Данный код после проверки на наличие данных, подключает файл стилей.
2. Создание буквиц
Буквицы можно обычно увидеть в печати, но с ростом популярности веб-типографики, эта техника становится все более распространенной. У нас есть различные способы реализации этой техники.
HTML код который вы должны использовать:
<p><span>E</span>ros decet bis eligo jumentum brevitas vel abigo iusto commoveo ex abigo, euismod ulciscor. Bene enim vulputate enim, nisl illum patria. Enim te, verto euismod in nisl lucidus. Capio incassum quadrum nunc ex proprius praesent et quod. Autem in commoveo similis nostrud turpis paulatim quadrum, tristique. </p>
Plain-text буквиц
Plain-text буквиц можно сделать с помощью добавки нескольких строк CSS. До тех пор, пока типографика, а также стандарт @font-face становится все более популярным, это пожалуй самый простой способ сделать буквицу.
Вот CSS:
.dropCap {
float: left;
font-size: 5em;
line-height: 0.9em;
padding: 0 5px 0 0;
font-family: Georgia, «Times New Roman», Times, serif;
}
Чтобы оживить ваш обычный текст, предлагаем почитать следующие книги:
—
—
Text-replacement буквица
Здесь мы просто заменяем изображения, используя «text-indent» и фон-картинку.
Вот CSS:
.dropCap {
text-indent: -99999px;
background: url(drop_cap_e.gif) no-repeat left 5px;
height: 50px; width: 55px;
float: left;
display: block;
}
Этот метод идеально подходит для поста Джейсона, если вы планируете использовать несколько буквец, следует использовать . предлагает отличный пример этого метода.
jQuery буквицы
Несколько лет назад Карл Swedberg из LearningjQuery.com представил Awesome способ включения буквиц помощью JQuery. Обратите внимание, что использование JQuery для презентационных целей, могут быть не очень хорошая идея и противоречит строгое разделение между представлением и поведением слоев, но это решение проблемы, тем не менее. Вы можете проверить падение Карла Swedberg’s Cap-плагин, который делает лучшую работу по поддержанию презентации и поведения отдельного слоя простой упаковке SPAN вокруг первой буквы (с соответствующим классам). Таким образом, вы можете стиль письма, как вам нравится с CSS. Также посмотрите руководством ниже:
Несколько лет назад из представил хороший способ влючение буквиц с помощью jQuery. Однако использовать jQuery для презентационных целей, может быть не очень хорошая идея. Вы можете Карла Шведберг.
3.Текстовый поток
Как и у Jason’а Santa Maria, у Dustin’а Curtis есть свои особенности делать новые стили для новых постов. В примере ниже вы увидите интересный стиль, в котором текст как будто стекает по странице, рядом с которым расположены фотографии MPT. Этот метод достаточно прост, красив и интересен.
Как это сделать? Такой текст делается путём отделения соответствующего места для каждого текстового блока, выбора местоположения и фиксирования ширины, длины и остальных координат. Этот пост содержит сочетание нескольких фонов, перемещённого текста и соответствующе расположенных блоков.
Пример HTML:
<p
style=» position: relative;top: 260px;width: 430px;left: 290px;»>
<strong>At its core, it is the «artful» hemisphere.</strong> Abstract thinking, intonation
and rhythm of language, artistic ability, and the perception of joy from music are centered here.
The right hemisphere specializes in thinking about big picture ideas and overarching themes holistically
instead of linearly.
</p>
Хотя мы не рекомендуем встроенные стили, но этот случай будет исключением. Создайте общее имя класса для изначального дизайна всех текстовых блоков (отступы, размер шрифта, цвет и т.д.), потом используйте встроенный стиль на конструкции страницы (координаты, ширина и т.д.). .
CSS:
.textflow {
font-size: 1.2em;
color: #2d2d2d;
margin: 20px 0;
padding: 5px 0;
position: relative;
}
HTML:
<div style=»width:300px; left: 680px;»>
<p>Ad, natu virtus, ut ea, tristique aptent illum iustum abigo ad vulputate gravis melior quae.</p>
</div>
4. Комбо карусель
Мы нашли хороший пример анимации, который будет очень необычным и привлекательным. Не переходя к определённой технике, сначала мы обсудим логику этого уникального примера анимации.
Как это сделать? Вы видите, что кликнув на основную картинку высвечивается три вида анимации:
1)Профиль слайдов по горизонтали
2)Профиль изображения слайдов по вертикали
3)Сетка обновлений фотографий, высота анимированного окна при этом изменится.
Полный профиль находится в свободном положении, они появляются рядом. Мы используем «overflow: hidden»; чтобы маскировать неактивные профили. Это и есть визуальная логика этой анимации.
1)Горизонтальная анимация
Каждый раз, когда вы выделяете какое-то окно анимации, jQuery подсчитывает насколько профилей его необходимо перелистать. Это горизонтального перелистывания.
2)Вертикальная анимация
После активного положения окна анимации, изображение профиля спускается вниз. Чтобы начать, все профили картинок позиционируются на -190px выше рамки. Когда jQuery обнаруживает, что эффект горизонтальной анимации сработал, то картинка спускается вниз.
3)Вертикальная анимация
Во время перехода к активным профилям, высота определяется и корректируется в окне. Таким образом переход выглядит плавно и не оставляет белых пятен за собой.
Изящная деградация
Команда Technikwürze также сделала несколько запасных вариантов для эффектов анимации. При правильном использовании CSS на созданной странице Java-Script будет спрятан и не будет мешать пользователям работать со страницей.
5. Красивые типографические рейтинги, основанные на CSS
На мы можем показать CSS рейтинги. Эту систему можно получить с помощью позиционирования и образования максимального рейтинга.
Как это сделать? Здесь показаны CSS и HTML код:
<span>8</span>
<img src=»http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif» alt=»">
.tabdiv .the_score {
font-family: «Myriad Pro», Helvetica, Arial, sans-serif;
font-size: 110px;
line-height: 110px;
font-weight: bold;
position: absolute;
top: 30px;
right: 100px;
color: #262626;
text-align: center;
letter-spacing: -17px;
}
.tabdiv .ten {
position: absolute;
top: 80px;
right: 45px;
}
Альтернативное решение
Если вы хотите достичь максимального рейтинга , вам следует использовать один альтернативный метод.
HTML:
<div>
<span>8</span>
<span>10</span>
</div>
CSS:
Как вы видете «.max» является абсолютно позиционированной, имеет прозрачный фон и слои выше «.rating». Таким образом, если вам нужно сделать максимальный рейтинг, это можно сделать без изменения изображения.
.ratingblock{
position: relative;
height: 100px;
}
.ratingblock .rating {
font-size: 8em;
padding: 0 5px;
}
.ratingblock .max{
display: block;
background: url(rating_bg.gif) no-repeat;
position: absolute;
top: 0; left: 0;
font-size: 5em;
width: 50px;
height: 60px;
padding: 40px 0 0 50px;
}
Заключение
Изучая другие методы, используемые для достижение уникальных и вдохновляющих результатов, мы расширили наш фонд в веб-дизайне. Это отличный способ узнать и поставить себя на более высокий уровень. Тяжело в учении, легко в бою!
Метки: дизайн, разработчики, штуки
Опубликовал: Дизайнер от 24 Ноя 2009
Комментариев нет
