Абсолютно каждому веб-дизайнеру, веб-мастеру или кодеру приходится постоянно прибегать к помощи хорошего редактора веб-страниц. С помощью таких редакторов веб-разработчики создают или редактируют HTML, CSS или JavaScript коды. Для начала могут подойти такие редакторы как Notepad или же TextEdit, но с накоплением опыта захочется использовать более универсальный инструмент для работы. Итак, поговорим о редакторах.

Notepad++

Вашему вниманию представлен текстовый редактор, используемый программистами и веб-дизайнерами. Главные отличия данного редактора – это хорошая функциональность и интуитивно простой интерфейс. Notepad++ способен открыть несколько документов одновременно, подсветить огромное количество языков программирования, записать макросы, автоматически завершить набираемый текст и многое другое. Данный текстовый редактор поддерживает такие опции как мастер создания подсветки, режим печати WYSIWYG, создание собственного API-файла и огромное количество всевозможных функций по работе с тестом. Также, программа позволяет подключать к себе различные плагины, которые способны обеспечить дополнительные функции.

Editor PSPad

Editor PSPad представляет собой бесплатный текстовый редактор, созданный для упрощения работы программистов. Данный редактор способен работать сразу с несколькими языками программирования. Также, для него не является проблемой подсветить код. Редактор Editor PSPad успешно используется при работе с текстом plain text. Отличительные черты: маленький инструмент, доступность, простое управление и невероятно мощные возможности редактирования кода.

Stylizer – Real-Time CSS Editing

Skybound Stylizer представляет собой WYSIWYG-редактор CSS стилей, один из лучших в своём роде, работающий на операционных системах Windows. Данная утилита способна значительно упростить работу веб-мастеров, а точнее написание и редактирование CSS кода. Данный редактор разработан для тех веб-мастеров, которые способны выйти за пределы работы с обычными текстовыми редакторами по обработке CSS.

TopStyle 4 for Windows

TopStyle 4 – это финальная версия знаменитого Windows-редактора, как CSS, так и HTML-кодов, который был создан одним из разработчиков HomeSite. Что же может это редактор? TopStyle 4 способен поддерживать Unicode и редактировать документы по FTP. Также, данный редактор включает в себя специальные модифицируемые панели инструментов, различные подсказки кода, предназначенные для ASP, PHP и ColdFusion. Ещё TopStyle 4 поддерживает закладки, редактирование CSS-кода в рамках HTML-атрибутов и многое-многое другое.

Xyle scope

Данная программа обладает уникальным инструментом анализа, предназначенным для всех заинтересованных web стандартов. Благодаря данной программе можно углубить свои знания в CSS и HTML, а также получить исчерпывающую информацию о том или ином элементе с сайта конкурента. Также, с помощью Xyle scope можно увидеть собственную работу, так сказать, свежими глазами.

Rapid CSS Editor

Данная программа позволит с лёгкостью создавать и редактировать расположенные каскадом страницы в независимости от их размеров. Можно записывать код таблицы вручную, а можно доверить это Rapid CSS Editor. Программа имеет огромное количество вспомогательных функций, к примеру, CSS validator. Программа предусматривает встроенный предварительный просмотр, поэтому результаты проделанной работы можно просматривать в реальном времени. К тому же, Rapid CSS Editor является ещё и HTML-редактором, который способен упростить работу с CSS HTML редактированием.

Namo Webeditor

Namo Webeditor представляет собой WYSIWYG редактор HTML и является детищем компании Namo Iteractive. Данный редактор способен поддерживать CSS, HTML, ASP, PHP и JavaScript технологии. Помимо визуального редактирования программа способна работать с самим кодом страницы. Если установлен локальный сервер (SSI, Apache), то встроенные в прогу мастера способны создавать на компьютере сложноструктуируемые сайты на основе MySQL базы данных и с применением технологии серверных языков.

EngInSite CSS Editor

Данная программа предназначена для обработки стилей CSS. Она содержит многообразные опции просмотра и редактирования стилей, а также их проверку на совместимость с W3 стандартами. К тому же, EngInSite CSS Editor участвует в отображении всей работы в различных браузерах. Эта утилита способна проверить синтаксис, содержит внутреннюю систему помощи и ряд других весьма полезных для веб-мастеров примочек.

Arduo Css Editor

Arduo Css Editor – это бесплатный CSS редактор. Он прост в использовании и обладает приятным интерфейсом, который способствует созданию таблиц стилей без ручного написания кода. Данная программа позволяет просмотреть динамику влияния HTML на конкретный стиль изменений. То есть, основной отличительной чертой данного редактора является интуитивно простой и очень удобный интерфейс, позволяющий существенно сэкономить время, затрачиваемоё на работу.

Simple CSS – A Free CSS Authoring Tool

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

P.S. Спасибо за гостевой пост, как видите, бесплатных программ хватает сполна, причем многие редакторы достаточно функциональны – смысла покупать софт нету. Я лично использую Notepad++ так как он кроме СSS позволяет достаточно удобно редактировать HTML и PHP файлы.

P.P.S. Автомобильный сезон в самом разгаре, купить новые диски для автомобилей можете в нашем интернет магазине, представлен широкий выбор разных производителей.
Не знаете что подарить ребенку на день рождение? возможно следует купить телескоп дабы прививать ему тягу к разным наукам и к обучению в целом, весьма интересный подарок.

© Дизайн Мания, 2012. | Комментариев - 6 | Категория Верстка, Программы.

Интересные статьи по теме

• Фон для сайта (свойство CSS background) (45)
• Уроки верстки – CSS подмена текста картинкой (7)
• Программы для верстки и отладки под Internet Explorer (6)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Кликабельный логотип или ссылка поверх изображения (41)

Кроме того, на странице выводится заголовок картинки и тоже с помощью CSS. Смотрится очень круто! Хотя нужно уточнить, что работать это будет только в тех браузерах, которые поддерживают CSS анимацию. Итак, поехали:

Разметка страницы

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

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>re·lax·a·tion</h3>
        </div>
    </li>
    <li><!--...--></li>
    <li><!--...--></li>
</ul>

Для каждого элемента Span будут закреплено определенное фоновое изображение (background image) для слайдшоу.

CSS стили

Для начала нужно задать стили для самого списка – он будет с фиксированной позицией, но растянутым на всю область видимости. Кроме того используется псевдоэлемент :after дабы расположить некоторый рисунок (с эффектом) поверх изображения:

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

В коде использовалось повторение стиля .cb-slideshow с картинкой для создания эффекта изображения, хотя с таким же успехом можно попробовать разместить градиент.

Span, содержащий фоновые изображения, будет позиционироваться абсолютно и иметь высоту и ширину 100%. Поскольку у него внутри будет определенный текст, сделаем прозрачным color так как мы не хотим его отображать. Свойство background-size с значением cover позволит удостовериться в том, что фоновое изображение покрывает всю площадь элемента, который в свою очередь растягивается на всю ширину видимого экрана. Прозрачность установлена в значение 0, это будет изменено уже при анимации.

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}

Анимация для каждого Span будет длится как минимум 36 секунд и запускаться бесконечное число раз. Но для начала рассмотрим как решить вопрос с отображаемым заголовком:

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}

Анимация для блока заголовка также будет длится 36 секунд.

Далее в CSS стилях следует определить фоновые изображения для каждого Span и задержку анимации (animation delay) дабы каждая следующая картинка и заголовок появлялась через 6 секунд после предыдущего.

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/4.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/5.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/6.jpg);
    animation-delay: 30s;
}
 
.cb-slideshow li:nth-child(2) div {
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    animation-delay: 30s;
}

Теперь рассмотрим процесс анимации более детально. Элементам Span установлено время анимации 36 секунд. За это время прозрачность будет меняться с 0 до 1 когда анимация достигает 8%. Дальше прозрачность сохраняется пока не достигнем 17%. После 25% она снова должна быть равна нулю и оставаться такой до конца.

Откуда взялись эти цифры? – давайте разбираться. Мы хотим чтобы каждое изображение было видимым 6 секунд, кроме того, после прохождения всего цикла опять должна быть показана первая картинка. Поскольку всего используется 6 изображений, итого потребуется 36 секунд. Теперь нам нужно задать соответствующие значения по времени для прозрачности. Зная тот факт, что второй кадр (картинка) анимации начнется через 6 секунд нам нужно знать какой процентиль анимации должен быть для показа первой картинки. Разделим 6 на 36 и получим 0.166… что будет 16% для нашего шага параметра keyframe. Теперь, поскольку мы не хотим дабы наша картинка просто исчезала все время, определим промежуточный шаг, который будет равен половине полученного ранее значения, то есть 8%. Суть в том, чтобы картинка показалась полностью, после того постепенно исчезала на 17%, и соответственно полностью исчезла на 25%. (ред. – тут, конечно, придется немного помозговать и разобраться со всеми тонкостями анимации и математических действий. Если захотите использовать использовать код “как есть” – просто разместите его в стилях либо делайте аналогичные расчеты).

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Аналогичные расчеты применимы и для анимации заголовка, единственное что мыс делаем дабы он немного быстрее исчезал, поэтому прозрачность = 0 на 19%.

@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

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

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

Напоследок можно позаботиться о размере шрифта, когда область просмотра меньше. Будем использовать media queries дабы задать шрифт меньше для определенных значений ширины.

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}

Пожалуй, на этом все для самой простой версии слайдшоу с фоновыми изображениями на весь экран. Хотя можно кое-что добавить в процесс перехода между картинками.

Альтернативная анимация

Следующий пример кода вместе с изменением масштаба изображения также добавляет небольшой поворот:

@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        transform: scale(1.1) rotate(3deg);
    }
    25% {
        opacity: 0;
        transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
}

Заголовок должен будет “выезжать” справа (нужно изменить text-align блоков в значение right), после чего убираться перемещаясь влево с эффектом исчезновения:

@keyframes titleAnimation {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    8% {
        opacity: 1;
        transform: translateX(0px);
    }
    17% {
        opacity: 1;
        transform: translateX(0px);
    }
    19% {
        opacity: 0;
        transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Вот, в принципе, и все. На этой странице вы можете найти демо версии (примеры) работы CSS3 эффектов. Экспериментируйте с разными эффектами и анимацией для заголовков и картинок. Следует также заметить, что в данный момент наиболее красиво и плавно это слайдшоу будет работать в браузерах с поддержкой Webkit таких как Chrome и особенно Safari. На остальных, увы, может быть заметно подтормаживание, но в целом впечатления от подобной галереи думаю у каждого будет хорошим.

Для создания дополнительной перелинковки в Blogspot создаем хлебные крошки (Breadcrumb) на Blogger страницах с помощью специальной html вставки в шаблоне.
Хотите украсить свой дачный участок, где все уже есть? – установите фонтан причем побольше и покрасивеее, куда можно подключить разные звуко-музыкальные эффекты.

© Дизайн Мания, 2012. | Комментариев - 2 | Категория Верстка.

Интересные статьи по теме

• Фон для сайта с картинкой на весь экран (background-size) (6)
• Школа W3 Schools для веб разработчиков (3)
• Оформление текста с помощью CSS3 на практике (4)
• Экшены (actions) для Photoshop – экономия времени (15)
• Уроки верстки – CSS подмена текста картинкой (7)

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Решение поддерживают почти все браузеры популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Но внимание!!!  при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS-хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент <img>, который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
 
        /* Set up proportionate scaling */
        width: 100%;
        height: auto;
 
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}
 
@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Работает в любых версиях качественных браузеров – Safari / Opera /  Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 – работает;
• IE 7/8 – чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 – можно настроить, но кому вообще нужен этот браузер.

CSS-хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и  min-height значение 100% сохраняя пропорции.

<img src="images/bg.jpg" id="bg" alt="">

#bg {
        position:fixed;
        top:0;
        left:0; 
 
        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}

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

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Хак работает в:

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше – можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    
 
        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();
 
        function resizeBg() {
 
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
 
        }
 
        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");
 
});

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована – скачать можно здесь. В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные “приколы” от IE7 все упомянутые хаки были бы идеальными.

P.S. Бзаузеры – основной инструмент для работы пользователя в интернете, а лучшие firefox плагины помогают сделать ее максимально удобной, быстрой за счет новых функций и возможностей.
Хотите купить книгу? – не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть – выбрать, оплатить и оформить доставку на дом.

© Дизайн Мания, 2011. | Комментариев - 6 | Категория Верстка.

Интересные статьи по теме

• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Школа W3 Schools для веб разработчиков (3)
• Оформление текста с помощью CSS3 на практике (4)
• Галерея узоров CSS3 для фона (3)
• Текстовые эффекты с помощью свойства text-shadow в CSS3 (5)

Но не “+1″ единым, в последний год внешний вид Google+ диктовал моду и другим сервисам компании Google, которые  подверглись изменению дизайна и стиля оформления. Общим элементом для многих проектов можно выделить стильное меню вверху страницы, похожие иконки, кнопки управления да и вообще много разных элементов, что можно найти во всех проектах – от почты Gmail до Google Reader. Cегодня представляю вашему внимаю интересный набор кнопок в стиле Google+, найденные на сайте shrapp.nl. Набор этот является не просто иконками социальной сети Google+, а скорее целым фреймворком позволяющим добавить кнопки из интерфейса Google+ на свой сайт.

Посмотреть демо как работают кнопки Google+, скачать эти иконки и почитать документацию по их установке можете на этой странице. Во-первых, вы, конечно. можете просто сказать эти симпатичные минималистические иконки для разных действий, ситуаций и т.п. дабы использовать в своем дизайне или сайте. Более продвинутый вариант – это подключение фреймворка (скриптов) для применения иконок через css cтили легко и быстро.

Установка кнопок Google+

Полная и более детальная инструкция может быть найдена по ссылке, указанной выше – там есть разные варианты и примеры использования. Я лишь рассмотрю процесс установки + один из вариантов применения кнопок после того как вы скачали соответствующий архив.

Итак, порядок установки:

1. Поместите файл css и изображения в корневую директорию сайта, ну или туда где у вас располагаются стили для шаблона.

2. «Подключите» таблицу стилей для этого добавьте в код ссылку вида (добавляется где угодно между <head> и </head>):

<link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen">

3. Далее подключим jQuery TipTip плагин и соответствующую таблицу стилей (добавляется где угодно между <head> и </head>):

<!-- Using TipTip jQuery plugin for the tooltips -->
<link rel="stylesheet" href="tiptip.css" type="text/css"  media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.tiptip.js"></script>
<script>
        $(document).ready(function() {
                // Launch TipTip tooltip
                $('.tiptip a.button, .tiptip button').tipTip();
        });
</script>

4. Если вам нужны dropdown (выпадающее) меню, добавляем также:

<script>
        $(document).ready(function() {
                // Toggle the dropdown menu's
                $(".dropdown .button, .dropdown button").click(function () {
                        $(this).parent().find('.dropdown-slider').slideToggle('fast');
                        $(this).find('span.toggle').toggleClass('active');
                        return false;
                });
        }); // END document.ready
 
        // Close open dropdown slider/s by clicking elsewhwere on page
        $(document).bind('click', function (e) {
                if (e.target.id != $('.dropdown').attr('class')) {
                        $('.dropdown-slider').slideUp();
                        $('span.toggle').removeClass('active');
                }
        }); // END document.bind
</script>

На этом установку можно считать законченной. Теперь чтобы, например, вывести вот такие кнопки:

… добавляете код:

<a href="#" class="button left"><span class="label">Left</span></a>
<a href="#" class="button middle"><span class="label">Middle</span></a>
<a href="#" class="button right"><span class="label">Right</span></a>
 
<a href="#" class="button left"><span class="icon icon63"></span></a>
<a href="#" class="button middle"><span class="icon icon58"></span></a>
<a href="#" class="button right"><span class="icon icon64"></span></a>

То есть за счет фреймворка все кнопки Google+ можно отображать через css и html путем несложных действий. Другие примеры использования кнопок в стиле Google+ можете найти в документации, на которую я ссылался ранее. В принципе нет ничего сложного, а получается весьма симпатично и стильно – особенно это, думаю, актуально будет для разработок каких-то внутрикопроративных сайтов, где кнопки будут использоваться для интерфейса системы.

P.S. Заказать книги в интернете теперь стало еще проще, специальный книжный интернет магазин имеет весьма широкий ассортимент и услугу доставки книг.
Для очищения организма от вредных элементов и шлаков помогают постные блюда рецепты которых в большом количестве вы сможете найти на нашем сайте.
Иногда для подъемов грузов заказывают специальную услугу наладка подъемников причем разных типов – от шахтных до кухонных и различных подъемных столов.

© Дизайн Мания, 2011. | Комментариев - 2 | Категория Веб-дизайн, Верстка, Иконки, Статьи.

Интересные статьи по теме

• Школа W3 Schools для веб разработчиков (3)
• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Фон для сайта с картинкой на весь экран (background-size) (6)
• Оформление текста с помощью CSS3 на практике (4)
• Эксклюзивные твиттер иконки для блога (9)

В данном обзоре расскажу об онлайн сервисе Psd 2 Html Converter – это стартап-проект, направленный на автоматизацию одной из частей процесса создания сайта, а именно – верстки веб сайта из дизайн-макета, подготовленного в Photoshop или Gimp. Другими словами он поможет обработать исходный нарисованный макет сайта и на выходе получить уже сверстанный дизайн в соответствии со стандартами XHTML 1.0 Strict / CSS 2.1.

С помощью Psd 2 Html Converter можно:

• Значительно ускорить процесс верстки простых макетов, выполнив всю рутинную работу автоматически.
• Для сложных сайтов можно выполнить часть работы, сверстать каркас для последующей обработки.
• Представить на рассмотрение заказчику (если он требует) промежуточные вариант верстки макета без затрат на работу.

В общем, севрвис помогает выполнить верстку быстро, удобно и без особых знаний.

Как же работает Psd 2 Html Converter?

Первое, что требуется сделать – подготовить PSD файл с дизайном сайта в соответствии с документацией сайта. Для чего это надо? Дело в том, что не всегда возможно автоматически распознать такие элементы сайта, как формы ввода текста/паролей, списки и т.п. Поэтому информация о том, во что должен превратиться слой в HTML верстке должна быть каким-то образом передана нашему сервису Psd 2 Html Converter.

В качестве способа передачи таких данных мы выбрали следующий. Слой PSD макета, который должен быть сконвертирован в какой-либо HTML элемент, отличный от изображения и текста, должен быть отмечен специальным тегом. Процесс чем-то похож на работу с TemplaVoila  при подключении шаблона в TYPO3. На данный момент с помощью таких тегов можно создавать заголовки, списки, формы ввода, ссылки и даже таблицы. Список всех поддерживаемых тегов и их описание смотрите на странице документации сервиса.

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

Сервис автоматической верстки сайта Psd 2 Html Converter не бесплатный. Стоимость конвертации страницы – 98 рублей (3.5 USD / 2.5 EUR), но только после просмотра готовой html верстки сайта. Никто просто так деньги брать не будет.

К счастью, у сервиса Psd 2 Html Converter есть партнерская программа, которая поможет немного сэкономить. При регистрации аккаунта вы сможете смотреть историю сделанных конвертаций PSD -> HTML, получить скидку 25% при нескольких заказах сразу, а также бесплатные три PSD -> CSS конвертации за приглашенного друга. Кроме того, в системе действует накопительная скидка до 20%. Да и, в принципе, сумма в 100 рублей за подобную работу (пусть и простого макета) зато грамотно сделанного – это уже неплохое предложение.

Вообще проект Psd 2 Html Converter понравился, пару раз встречал похожие сервисы в буржунете, радует, что теперь и “у нас” есть нечто похожее. На сайте сервиса найдете также дополнительную документацию, FAQ, портфолио и блог. В последнем есть заметка как получить HTML/CSS верстку совершенно бесплатно – для этого нужно написать небольшой обзор о проекте в своем блоге или поделиться информацией в социальной сети.

P.S. Совсем недавно вышла новая версия айфона и теперь купить iPhone 4 в Киеве можно немного дешевле, потому что это предыдущая серия и цены на нее будут снижаться.
Надоело постоянно ходить в очках? Чувствуете дискомфорт? – попробуйте контактные линзы которые не просто помогут хорошо видеть, но и не будут мешать вашему имиджу.

© Дизайн Мания, 2011. | 1 комментарий | Категория Online сервисы, Верстка.

Интересные статьи по теме

• Школа W3 Schools для веб разработчиков (3)
• Создание портфолио онлайн с помощью сервиса Portfolios (13)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Кликабельный логотип или ссылка поверх изображения (41)
• Фотодженика – самый большой российский фотобанк (6)

Перед стартом

Давайте определим стартовую точку. Мы начнем с создания небольшой веб-страницы для которой используем вот этот код:

<h1>Web Typography <span>A Demo For Beautiful Typography on the Web</span></h1>
<div class="meta">An <span>Article</span> by <span>Matt Ward</span></div>
<div class="body">It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully. Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo - which is entirely driven by CSS - is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.Created: May 13, 2010</div>

Результат вы можете видеть на скриншоте:

На картине обычный себе текст как и должен быть для заданного HTML, он почти не стилизован, хоть и выглядит вполне прилично. Но то ли еще будет!

Шаг 1

Начнем с заголовка. Определим шрифт, размер, цвет, добавим тень, изменили интервал между символами:

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

Вот что у нас вышло:

Шаг 2

Обратите внимание на изначальный текст. В заголовке мы выделили подзаголовок (с помощью span), вот им и займемся:

h1 span{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 0.6em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;
}

Заголовок полученные на первом этапе выглядел тяжеловесно. Благодаря тому что мы выделили подзаголовок оформленный более «легким» шрифтом Verdana (кроме того мы отказались от тени, плюс интервал между символами стал снова равен Оem), наш текст преобразился:

Шаг 3

На этом и следующем шаге мы займемся метаданными (в нашем случае данными об авторе):

.meta{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

Мы снова вернулись к шрифту Georgia, но на сей раз он невесомый, практически прозрачный (обратите так же внимание что мы добавили к rgb канал прозрачности «а»). Данные об авторе отделены от основного содержания серой линией:

Шаг 4

Информация об авторе уже выглядит неплохо, но давайте немного усложним:

.meta span{
  text-transform: capitalize;
  font-style: normal;
  color: rgba(69,54,37,0.8);
}

Что мы сделали? Вычленили «Article» и «Matt Ward», сделали их начертание обычным, первую букву заглавной (с помощью свойства text-transform: capitalize;) и немного изменили прозрачность:

Шаг 5

Ну вот мы и дошли непосредственно до основного контента. Исторически процесс создания колонок (столбцов) силами CSS был делом непростым. Создавать их с помощью таблиц – решение тоже не самое изящное. К счастью, в CSS3 появились элементы благодаря которым проблема решается без особого труда:

.body p{
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
}

Мы задали количество колонок, расстояние между колонками, стиль текста:

Шаг 6

Сделаем над нашими колонками что-то вроде анонса:

.body p:first-child{
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
}
 
.body p:first-child:first-line{
font-weight: bold;
}

Вот что у нас получилось:

Обратите внимания на то, что еще одни стиль (тот что делает первую строку анонса жирным) добавлен умышленно, чтобы показать что вы можете пойти дальше. В большинстве случаев такой прием, конечно же, излишен.

Шаг 7

Все что нам осталось – поработать над нижними метаданными (дата):

date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-top: 1px solid rgba(69,54,37,0.2);
  display: block;
  padding-top: 0.5em;
  margin-top: 2em;
}

Результат:

/p>

На этом я думаю можно остановиться. “Вживую” результат можно посмотреть на этом демо-сайте – по моему выглядит замечательно. Автору данного уроке огромная благодарность. Данный туторил возможно и не демонстрирует всех возможностей CSS3, тем не менее, даже те свойства которые мы использовали позволяют добиться на экране монитора уровня типографики достойного газеты или журнала.

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

© Дизайн Мания, 2011. | Комментариев - 4 | Категория Верстка, Типографика.

Интересные статьи по теме

• Текстовые эффекты с помощью свойства text-shadow в CSS3 (5)
• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Фон для сайта с картинкой на весь экран (background-size) (6)
• Школа W3 Schools для веб разработчиков (3)
• Уроки верстки – CSS подмена текста картинкой (7)

Итак, книга – Изучаем HTML5. Библиотека специалиста – 272 страницы мягкого переплета о новом стандарте разметки веб документов HTML5. Издание является переводом англоязычной книги (успешная зарубежом) от Лоусон Б., Шарп Р., профессиональных программистов, что используют HTML5 уже давно и знают все его тонкости. К счастью, здесь вы не найдете подробных и сухих спецификаций языка на сотни страниц, большую часть книги занимают совершенно конкретные примеры работы с HTML5. В них авторы пытаются не только показать как правильно использовать те или иные элементы, но и дают детально пояснение каждого из них. Можно сказать, что данная “Библиотека специалиста” идеально подходит для тех верстальщиков или пользователей HTML или XHTML, которые максимально быстро хотели бы освоить также новый HTML5.

Начинается все с истории о том как же появился HTML5. Оказывается его могло и не быть, так как многие специалисты решили, что будущее разметки веб страниц за XML. В итоге появлялись новые спецификации XHTML, но “полноценного перехода” не состоялось. И в это же самое время группа единомышленников, где были независимые разработчики, представители Mozilla, Microsoft, Apple и многих других известных компаний сконцентрировали внимание на создании HTML5. Интересно, что достаточно большую роль в процессе разработки играли сами браузеры, они могли (отчасти) диктовать свои условия. В любом случае, если бы был создан новый язык, но те или иные браузеры его бы не поддерживали, то пользы от этого было мало. Хочется верить, что HTML5 сможет стать тем самым единственными и универсальным инструментом для всех (или хотя бы большинства) интернет браузеров.

Вообще, читая книгу, я испытывал большой интерес и даже некое вдохновение относительно HTML5. Язык практически полностью отражает все основные моменты и технологические особенности современного интернета. Ведь странно то, что во времена видео и аудио контента, геолокационных приложений, сложных интернет проектов, многие до сих пор использовали древний HTML4 с некоторыми его XHTML улучшениями. Помнится, когда учился в институте читал книгу по HTML4 – она была по объему как эта, может, 200 страниц, но в итоге полезной информации из нее можно было вынести на порядок меньше. Там, в принципе,о и не было ничего сложного – таблицы, форматирование, формы, два-три десятка тегов, применяющиеся в 90% интернет страниц. HTML5 в этом плане ушел намного дальше и это здорово!

Книга “Изучаем HTML5. Библиотека специалиста” состоит из 10 глав, освещающих те или иные особенности языка HTML5.

1. Основная структура – о том какие изменения претерпела основная структура интернет страницы, структурные элементы header, nav, footer, article. Было проведено исследование миллионов веб сайтов для определение из чего состоит современный веб, не удивительно, что многие классы элементов повторялись. Теперь вместо “неэффективного” DIV можно использовать обозначение nav, что дает браузеру понять где именно находится блок навигации и т.п.
2. Текст - форматирование текста претерпело еще больше изменений.
3. Формы – получили новые атрибуты, а также типы вводимых данных.
4. Видео и аудио - раздел по работе с видео контентом, проигрыватели и т.п.
5. Холст – элемент позволяющих рисовать в 2D непосредственно в браузере. В базовом виде он, конечно, не впечатляет и больше похож на старенький Paint, но на его основе можно делать крутые и более сложные приложения.
6. Хранение данных – работа с веб-хранилищем и SQL базами данных.
7. Автономная работа – мобильный интернет сейчас практически везде и у всех, но не всегда качество связи позволяет работать с приложениями онлайн, автономная работа – решение всех проблем.
8. Перетаскивание – обзор возможностей drag and drop.
9. Геолокация - как я понял, не является частью спецификаций HTML5, но рассмотрена в книге как одна из актуальных и интересных технологий.
10. Сообщения, фоновые вычисления и сокеты.

В каждой из глав вы найдете необходимый минимум информации дабы понять суть тех или иных новшеств HTML5. Повторюсь, что текст читается достаточно легко и содержит массу примеров кода с детальным объяснением. Книга идеально подходит как для обучения с нуля, так и в виде небольшого пособия, к которому можно постоянно время от времени обращаться за пояснением – вряд ли вам сразу нужны будут все 10 глав. Заказать книгу “Изучаем HTML5. Библиотека специалиста.” онлайн можете на сайте издательства Питер, там же отрывок одной из главы дабы ознакомиться с содержимым продукта. Для верстальщиков штука однозначно полезная, пусть и до внедрения HTML5 в рунете пройдет еще не один год.

P.S. В блоге об Интернете найдете подробную статью о том как сделать дизайн сайта – фотошоп урок для начинающих пользователей с рассмотрением всех шагов процесса.
Новым трендом следующие полгода будет последний белый айфон, поэтому можете купить БУ iPhone 4 значительно дешевле прошлой цены и реально сэкономить.
Практически через год Украина и Польша откроют чемпионат европы по футболу 2012 где разыграется нешуточная борьба за трофей.

© Дизайн Мания, 2011. | Нет комментариев | Категория Верстка, Уроки и книги.

Интересные статьи по теме

• Фирменный стиль и логотип разработан для HTML5 (0)
• Полезные советы по HTML верстке. Часть 2 (3)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Кликабельный логотип или ссылка поверх изображения (41)
• Psd2htmlconverter – сервис автоматической верстки сайта (1)

(Демо страница)

Итак основные качества будущей кнопки (кнопок):

• Масштабируемость (в зависимости от размера шрифта и количества текста);
• Функциональность, юзабилити (предусмотрены состояния кнопки – normal, hover, active)
• Обратная совместимость (даже на старом или не совместимом браузере кнопки будут выглядеть прилично, хотя конечно не так как задумывалось. В этом можно будет убедиться в конце публикации);
• Гибкость (эти стили можно применять и к другим элементам, не обязательно для кнопок);

Какие фишки будем использовать в процессе созднаия кнопок? Результат достигается за счет градиентов, свойств box shadow, text shadow, rounded corners, режима RGBA.

Структура HTML

<a href="#" class="button button-blue">
    <span>Button</span>
</a>

CSS

.button
{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
 
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
 
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 
}
 
.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}
 
.button span
{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
 
    /* The background pattern */
 
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
 
    /* Pattern settings */
 
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
}
 
.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}
 
.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

Синяя кнопка

.button-blue
{
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}
 
.button-blue:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}
 
.button-blue:active
{
    background: #4477a1;
}

Совместимость с разными браузерами

• Mozilla 3.6 и старше – полная совместимость, кнопки отображаются именно так как они задуманы со всеми деталями.
• Google Chrome, Safari (Webkit) – проблем не выявлено, в целом результат не хуже чем на Mozilla.
• Opera 11 – к сожалению, градиент не отображается вовсе, хорошо хотя бы, что закругленные углы интерпретируются так как нужно.
• Internet Explorer 6-8 – В данном случае проблема, наоборот, с закругленными углами. Градиент присутствует.
• Internet Explorer 9 – ситуация несколько лучше чем у браузеров от Microsoft прошлых поколений, но все равно результат не столь хорош, как у Mozilla или Chrome.

Ну, а у меня на этом все. Теперь у вас есть возможность выбрать использовать градиенты для фотошопа или обходиться исключительно с помощью CSS. Изучайте возможность CSS3, оно того стоит! С HTML5 так вообще чудесам можно творить, недавно нашел подборку разных техник и был сильно приятно шокировал делом примерами.

P.S. Постовой. Пока кипит работа над новыми сайтами все новости футбола публикую в разделе старого доброго блога (проекта) о чемпионате мира.
А уже совсем скоро про подготовку Украины и Польши к евро 2012 можно будет узнать на специальном фан сайте турнира.
Интернет магазин Линзмастер предлагает купить цветные и обычные контактные линзы по хорошим ценам и с доставкой по Украине.

© Дизайн Мания, 2011. | Комментариев - 8 | Категория Верстка.

Интересные статьи по теме

• Уроки верстки – CSS подмена текста картинкой (7)
• Текстовые эффекты с помощью свойства text-shadow в CSS3 (5)
• Полезные советы по HTML верстке. Часть 2 (3)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Оформление текста с помощью CSS3 на практике (4)

W3Schools — крупнейшее собрание знаний по веб-разработке. Вы можете найти справочные и обучающие материалы по:

• - HTML (в том числе HTML5);
• - XHTML;
• - HTML DOM;
• - CSS;
• - JavaScript;
• - VBScript;
• - TCP/IP;
• - Ajax;
• - jQuery;
• - Серверным скриптам (SQL, PHP, ASP.NET, ADO);
• - Мультимедиа (Flash. SVG, SMIL);
• - Вебтехнологиям и протоколам (RSS, WAP, SOAP, RDF, WSDL, WMLScript);
• - Справочную информацию по браузерам (в том числе статистика по долям на рынке браузеров), стандартам W3C, веб-цветам и так далее;

Добавьте к этому инструменты для подобора цвета (Color Picker), микшер цветов (Color Mixer) и другие полезные сервисы.

Объем знаний представленный на W3School столько гигантский, что всего даже нельзя перечислить. Причем, по каждой области знаний материал подается всеобъемлющий. Полезную информацию может для себя найти как новичок, так и опытный разработчик. Все сопровождается практическими примерами, туториалами. Можно найти большое количество готовых шаблонов и заготовок.

Например, зайдем в раздел HTML, кликнув по соответствующем пункту меню в левой колонке. На странице сразу будет отображена информация только по этому направлению, а в левом меню появятся новые пункты. По каждому из них есть описание, пояснение и пример кода.

Кстати, W3School занимается в том числе и сертификацией специалистов, правда процедура эта не бесплатная ($95 по каждой дисциплине), к тому же, требует неплохой подготовки.

Выводы: W3Schools — просто кладезь знаний для веб разработчика. Единственный возможный барьер для русскоязычного мастера — языковой. Если же с английским все в порядке, сложно себе представить более подходящее место для обучения технологиям по созданию сайтов. Возможно еще большую ценность ресурс представляет как справочник. Портал W3School просто обязан быть в закладках у современного веб-мастера и разработчика.

P.S. Постовой. Для вебмастеров, кстати, не пропустите хороший заработок на файлах с помощью нового файлового обменника Vodafile.
При разработке интернет проекта полезно знать как создать создать логотип для сайта своими руками – небольшое руководство по логотипу на сайте.
Статусы в социальных сетях популярное явление, найдите статусы про жизнь которые вас устроят и которые можно будет поставить вконтакте.

© Дизайн Мания, 2011. | Комментариев - 3 | Категория Верстка, Полезные сайты.

Интересные статьи по теме

• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Фон для сайта с картинкой на весь экран (background-size) (6)
• Psd2htmlconverter – сервис автоматической верстки сайта (1)
• Часто задаваемые вопросы (FAQ) – разрабатываем эффективный раздел FAQ (0)
• Расширения Google Chrome для дизайна и веб-разработки (4)

Перед тем как перейти непосредственно к эффектам, немного теории. Свойство text-shadow в CSS3 позволяет задавать:

• смещение тени по отношению к тексту по осям X и Y — X-offset и Y-offset;
• уровень размытия тени (хотя может быть в данном случае лучше подходит термин – растушевка) — blur;
• цвет тени — color:

Но это еще не все. Вы может так же задавать несколько значений для каждого параметра. В этом и кроется вся мощь! Давайте посмотрим что с этим можно придумать.

Винтажный или ретро текст

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

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

Неоновый текст

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Этот эффект посложнее предыдущего. В общей сложности наложено 8 теней. Каждый уровень имеет собственное значение растушевки (8 значений) и цвет (2 значения).

Инсет (вдавленный текст)

text-shadow: 0px 2px 3px #666;

Эффект вдавленного текста, достаточно просто реализуется за счет небольшого смещения тени по оси Y и легкой растушевки.

Анаглифический текст

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Крутой эффект, где помимо всего прочего используются возможности RGBa (в том числе альфа-канал). Еще несколько лет назад было сложно представить что такое возможно без графического редактора, теперь вот – пожалуйста!

Горящий текст

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Еще один невероятный эффект и, как видите, довольно сложный. Каждая тень смещается в разную строну и имеет разные параметры цвета и размытия. Результат впечатляет.

«Настольная игра»

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

По сути является многоуровневой вариацией эффекта «Ретро текст». Все тени четкие, без растушевки.

Посмотреть как эти эффекты выглядят в живую, (а не только на скриншотах) можно на этой демо-странице. Эти эффекты – верхушка айсберга, количество возможных вариантов сложно представить. Ведь это всего лишь одно свойство текста – тень! Чем не демонстрация недюжинных возможностей CSS3? Вообще очень радует развитие веб стандартнов, главное чтобы за этим успевали браузеры и одинаково воспринимали указанные значения параметров CSS и HTML.

P.S. Если вы работаете в интернете то просто обязаны создать свое wordpress портфолио из бесплатных, функциональных и качественных шаблонов.
Самые лучшие авторские и тематические проекты в каталоге блогов с подробными описаниями и полноценными обзорами.
Хотите познакомиться с девушкой или парнем, оцените лучшие знакомства в Киеве и Украине, найдите свою судьбу или новых друзей.

© Дизайн Мания, 2011. | Комментариев - 5 | Категория Верстка.

Интересные статьи по теме

• Оформление текста с помощью CSS3 на практике (4)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Фон для сайта с картинкой на весь экран (background-size) (6)
• Фон для сайта (свойство CSS background) (45)