GB: Блог о дизайне, верстке и веб-разработке Голосов: 1 Адрес блога: http://gering111.com Добавлен: 2011-05-08 20:19:03

Depositphotos — мои впечатления

2012-11-12 14:16:08 (читать в оригинале)

---

Премиум шаблон для WordPress Dragon

2012-11-06 14:10:13 (читать в оригинале)

---

Анимированное вертикальное меню

2012-10-31 16:08:27 (читать в оригинале)

Не так давно я показывал пример создания анимированного горизонтального меню. Сегодня продолжим и поговорим про вертикальное меню. Оно используется гораздо реже, нежели горизонтальное, но все же бывает. Попробуем сделать крутое вертикальное меню с круглыми кнопками. Сначала - картинка для привлечения внимания, чтобы вам было интересно ;) Мы будем создавать меню, по стилю схожее с символом Инь-Янь, в черно-белых тонах. Ну и сразу ссылка на демо-страницу. Начнем традиционно - со структуры HTML: [html] <nav class="menu"> <ul> <li> <a href="#"> <h3 class="headline">главная</h3> <h4 class="description">это ясно...</h4> </a> </li> <li> <a href="#"> <h3 class="headline">Работы</h3> <h4 class="description">посмотреть...</h4> </a> </li> <li> <a href="#"> <h3 class="headline">блог</h3> <h4 class="description">почитать...</h4> </a> </li> </ul> </nav> [/html] Как видите ничего сложного, все традиционно - список, в котором содержатся нужные нам элементы: cсылка, заголовок пункта меню и описание. Перейдем к стилям, там самое интересное: [css] .menu{ width:200px; margin:60px 0 0 30px; /* двигаем меню, 60 сверху и 30 слева */ float:left; /* обтекание слева */ } .menu ul{ list-style:none; margin:0; padding:0; } .menu ul li{ width:140px; /* ширина элементов */ height:140px; /* высота элементов */ margin-bottom:-40px; border-radius:100%; /* круглим, лучше в % */ overflow:hidden; position:relative; -webkit-box-shadow:0 1px 2px #999; -moz-box-shadow:0 1px 2px #999; box-shadow:0 1px 2px #999; text-align:center; /* текст по центру */} [/css] Я комментирую свой код, чтобы потом было легче разбираться, это, кстати, очень хорошая практика ;) Собственно, этим кодом мы задаем общие стили для элементов списка. Сначала задаем ширину и высоту, потом превращаем квадраты в круги, используя border-radius. Перейдем к формированию "каскада" из элементов: [css] .menu ul li:nth-child(even){ float:left; -webkit-box-shadow:0 1px 2px #666; -moz-box-shadow:0 1px 2px #666; box-shadow:0 1px 2px #666; background:#000; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B2B2B), to(#000)); background:-webkit-linear-gradient(top, #2B2B2B, #000); background:-moz-linear-gradient(top, #2B2B2B, #000); background:-ms-linear-gradient(top, #2B2B2B, #000); background:-o-linear-gradient(top, #2B2B2B, #000); } .menu ul li:nth-child(odd){ float:right; /* следующий - справа */ background:#FFF; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE)); background:-webkit-linear-gradient(top, #FFF, #EEE); background:-moz-linear-gradient(top, #FFF, #EEE); background:-ms-linear-gradient(top, #FFF, #EEE); background:-o-linear-gradient(top, #FFF, #EEE); } [/css] Используя псевдокласс ntn-child, мы можем применять стили к элементам, на основе их нумерации в дереве элементов. Допустим, наше вертикальное меню - список из 5 элементов. Используя ntn-child(even), мы назначаем стиль каждому четному элементу, nth-child(odd) - соответственно, нечетному. Код выше как раз это демонстрирует. Псевдокласс имеет достаточно гибкие и мощные "настройки", если будет интересно - дайте знать, расскажу подробнее об этом. Закончили с элементами списка, перейдем к заголовку и описанию: [css] .menu .headline{ padding-top:45px; /* отступ сверху */ font-family: 'Ubuntu', sans-serif;/*Шрифт заголовка*/ font-size:1em; /* размер для заголовков */ color:#333; /* цвет заголовков */ text-transform:uppercase; /* Все в верхний регистр */ text-shadow:0 0 1px #CCC; } .menu ul li:nth-child(even) .headline{ color:#FFF; } .menu .description{ font-family: 'Ubuntu', sans-serif;/*Шрифт описания*/ font-size:16px; /* размер для подзаголовков */ color:#999; /* цвет */ text-shadow:1px 1px 1px #CCC; } .menu ul li:nth-child(even) .description{ color:#CCC; text-shadow:none; } .menu ul li:hover .headline{ font-size:20px; /* размер при наведении*/ color:#888; /* Цвет при наведении */ text-shadow:none; } .menu ul li:active .headline{ color:#FFF; /* Цвет при клике */ } [/css] Оформили заголовок и описание, настроили их поведение при наведении. Теперь для плавности нужно добавить немного магии :) [css] .menu ul li a{ display:block; width:100%; height:100%; text-decoration:none; } .menu .headline, .menu .description{ margin:0; padding:0; font-weight:normal; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } [/css] Анимация очень простая, при наведении шрифт заголовка увеличивается, меняя цвет. Вот и все... У нас получилось вертикальное меню, по стилю схожее с символом Инь-Янь, к чему я и стремился. Если у кого не получилось, или он "профилонил" - ссылка на исходники ниже. Демо | Исходники На сегодня все, удачного вам дня ;)

---

Премиум шаблон для WordPress Masculine

2012-10-22 13:42:27 (читать в оригинале)

Очень необычный адаптивный шаблон, построенный на типографике - bold design, как называет его сам разработчик. Шаблон должен понравиться любителям нестандартных дизайнов, замечательно подойдет для сайта веб-студии или фрилансеру. Версия в архиве - 1.2, последняя на дату публикации Возможности шаблона: [icon_list style="check"]

• адаптивная реализация шаблона
• 2 вида отображения портфолио
• три типа записей
• главная страница модульного типа, строится из админки
• слайдер для работ из портфолио
• 3 встроенных виджета
• шорткоды и несколько видов страниц
• полная поддержка перевода шаблона (как перевести шаблон?)
• хорошая, подробная документация в PDF

[/icon_list] Демо | Box.net | DropboxЕсли вы считаете, что этот файл нарушает ваши авторские права - свяжитесь со мной по контактам, указанным на соответствующей странице - файл, нарушающий права, будет удален.

---

Font Awesome для WordPress

2012-10-22 10:20:18 (читать в оригинале)

Если вы так или иначе связаны с веб-разработкой, то наверняка слышали о фреймворке Twitter Bootstrap. Это такая модная нынче штука для разработки сайтов, с крутыми синенькими кнопками. Но речь не о нем, а о символьном шрифте Font Awesome, который разработан для Twitter Bootstrap. Что такое символьные шрифты и зачем они нужны - об этом можно почитать в этой статье. А мы поговорим про Font Awesome - самый продвинутый шрифт из всех символьных. Это, конечно, только мое мнение, вы можете смело с ним не соглашаться. Официальный сайт шрифта находится тут. Итак, что он умеет? [icon_list style="check"]

• 220 иконок
• свободен для коммерческого использования
• легко настраивается при помощи CSS
• поддерживает IE7
• любой размер иконок (это же шрифт)

[/icon_list] Теперь для использования этого шрифта не нужно его подключать в коде, достаточно использовать плагин, который так и называется - Font Awesome WordPress Plugin. Он дает возможность вставлять иконки двумя способами - в виде HTML или использовать шорткод. Покажу примеры: [html] <i class="icon-pencil"></i> //вставка в HTML [/html] [php] [icon name=icon-pencil] //вставка шорткодом [/php] Полный список иконок есть в PDF документе, он идет в комплекте с плагином. Ну или можно использовать коды с официального сайта, как вам больше нравится. Зачем это нужно? Очень просто - для большей привлекательности ваших записей, виджетов или списков. Удачного дня ;)