K_E_V_in » Верстка

CSS3 PIE – делаем Internet Explorer современным

K_E_V_in — Wed, 25 Jan 2012 09:09:07 +0000

HTML5 и CSS3 плотно ворвались в жизнь разработчиков. Эти технологии позволяют очень многое реализовывать без использования дополнительной графики. Но у них есть одна неприятная особенность: до сих пор IE отказываются понимать эти технологии. Но благо, есть решение: простенькая библиотека CSS3 PIE!

CSS3 PIE позволяет IE корректно отрабатывать некоторые возможности CSS3:

border-radius
box-shadow
border-image
множественные фоновые изображения
линейные градиенты в качестве фона

Использование CSS3 PIE

Для начала качаем последнюю версию библиотеки. Затем нужно внедрить PIE.htc в свой проект. Для этого элементам, которые будут использовать вышеуказанные свойства, прописываем behavior: url(path-to/PIE.htc). К примеру, для закругления это будет выглядеть так:

1
2
3
4
5
6
7
8

.rounded {
border: 1px solid #000;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
behavior: url(PIE.htc);
}

Обнаруженные проблемы CSS3 PIE и их решения:

Возможны баги если применять PIE к элементу с position:static;
Если используется относительный путь к pie.htc, то он должен быть указан относительно html файла, а не файла стилей;
Работают только сокращенные варианты атрибутов. То есть border-radius cработает, а border-top-right-radius уже нет;
PIE меняет свойство hasLayout в IE;
Работает не для всех элементов. Если есть проблемный элемент, оберните его в div и примените PIE к div;
PIE.htc требуется правильный content-type заголовок. Файл .htc должен передаться с заголовком text/x-component. Как правило достаточно поправить настройки сервера. Если же не получается, то в файле .htaccess необходимо добавить (или раскомментировать) строку AddType text/x-component .htc. Если же нет возможности менять конфигурацию сервера, то воспользуйтесь файлом PIE.php, который прилагается в том же дистрибутиве. Его необходимо положить в тот же каталог где и PIE.htc но подключать уже .php файл:
1
2
3
.rounded {
behavior: url(PIE.php);
}

Технология работы

Все возможности, поддерживаемые PIE относятся к графике. Для их эмуляции PIE использует VML. Создается VML-объект, в котором рисуется необходимый графический эффект. Затем полученный объект подставляется на место целевого элемента абсолютным позиционированием.
Многое почерпнуто отсюда.

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

Смена фона страницы сайта в зависимости от времени суток

K_E_V_in — Tue, 10 Jan 2012 08:22:13 +0000

Вот такая возникла задача: сделать автоматическую смену фона сайта в зависимости от времени суток (к примеру, ночь-день). Решается данная задача несложно: мы получаем текущее время, затем получаем доступ к необходимому элементу страницы (в нашем случае это будет body), и “подмешиваем” к нему нужный класс, в котором прописываем нужные нам настройки для фонового изображения. Вот алгоритм решения смены фона сайта в зависимости от времени суток. Теперь будем реализовывать.

Для начала возьмем небольшой кусочек html-файла. Интересующему элементу обязательно нужно прописать ID, именно так мы к нему получим доступ

1	<body id="pagebody">

Затем подготовим нужные нам классы и пропишем их в css

1 2	.body01{background: #000 url(01.jpg) no-repeat fixed;} .body02{background: #000 url(02.jpg) no-repeat fixed;}

Ну и напоследок сам js файл, реализующий данный функционал.

1	var date=new Date(),h=date.getHours(),obj=document.getElementById('pagebody');if(h>0&&h<9) {obj.className+=' body01';}else{obj.className+=' body02';}

Вот и всё!

Самое время отдохнуть: Ловля на поплавок, советы опытных рыбаков.

Кроссбраузерный градиент на CSS3

K_E_V_in — Thu, 01 Sep 2011 07:09:12 +0000

С недавнего времени стало возможным делать градиенты не только картинками, но и посредством правил стандарта CSS3. Эти штуки работают во всех современных браузерах, включая Opera (да-да! совсем недавно было заявлено, что в Opera подобные штуки не работают). Для начала вот пример без использования градиента (здесь скрины сделаны именно в Opera, с сайта работа в хабаровске):

Теперь применим к этому блочку такой волшебный CSS код:

1
2
3
4
5

background: #ebebeb;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#fff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#efefef)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ddd, #efefef); /* for firefox 3.6+ */
background: -o-linear-gradient(top, #ddd, #efefef); /* for Opera */

И получим такую картинку:

Пользуйтесь. Данное решение позволит сократить объем графики на сайте, что уже само по себе очень здорово!

ловля карпа на фидер вся информация об этом на сайте www.inforybaku.ru

Делаем прозрачный фавикон (favicon) на сайт

K_E_V_in — Sat, 12 Feb 2011 13:05:47 +0000

Прозрачные фавиконки – отличная дизайнерская фишка. Лично я почему-то очень долго не пользовался этой возможностью. Если ответить точнее, то не использовал, потому что не находил онлайн-генератора фавиконок, которые бы поддерживали прозрачность favicon.

Сейчас, наконец-то, я такой генератор нашел, и он работает отменно! Пользуйтесь на здоровье!

Дизайн текстового контента

K_E_V_in — Mon, 20 Dec 2010 09:47:29 +0000

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

Широко известно, что большинство открытий в настоящее время совершается на стыке наук. То же произошло и в данной области: появилась новая профессия, совмещающая в себе отдельные функции HTML-верстальщика и веб-дизайнера. Специалист, занимающийся дизайном текста, называется вебстальщик. Дизайн текста – завершающий этап такого мероприятия как оптимизация сайта. Вебстальщик создает стили оформления текстового контента на ресурсе: это заголовки, списки (многоуровневые), цвет ссылки, цитаты. Главная задача вебстальщика – сделать текст читабельным и эстетичным. Как же этого достичь?

Самое главное, на чем стоит заострить внимание в первую очередь, – то, что все элементы контента требуют единообразного оформления. Информация в этом случае будет восприниматься без затруднений. Более удобен при чтении с экрана шрифт без засечек. Самый распространенный стиль – Verdana. Также не стоит забывать о том, что размер шрифта должен быть достаточно большим. Рекомендуется использовать максимум три уровня заголовков. Большой размер шрифта и контрастный цвет нужно использовать для заголовков верхних уровней. Яркость заголовков следует снижать по мере приближения к основному тексту. Целесообразно предварительно провести маркетинговый аудит и выяснить, какова ситуация у сайтов-конкурентов. Далее, размеры блоков текста и заголовков стоит рассчитать так, чтобы хорошо были отличимы друг от друга заголовки разных уровней, но в то же время нужно избегать слишком большого контраста, который может привести к разобщенности элементов.

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

В чем заключаются преимущества слоев при верстке сайта?

K_E_V_in — Thu, 07 Oct 2010 11:57:10 +0000

В чем же заключаются преимущества слоев? Во-первых, благодаря тому, что используются слои, появляется возможность с помощью различных идей «оживить» веб-страницы, отличным примером может служить сайт справка в бассейн. Во-вторых, веб-браузерами очень быстро идет обработка. В-третьих, положения слоев и их размещение осуществляется с точностью до пикселя. И, наконец, в-четвертых, настройка слоев происходит посредством CSS.

Теперь несколько слов и о недостатках слоев.
1) Необходимо знать достаточно хорошо языки и технологии программирования – JavaScript, VBScipt, CSS.
2) отображение сайта может быть разным в связи с тем, что применялись слои веб-браузерами.
3) могут быть трудности при редактировании в html-редакторах. Именно поэтому доски объявлений Slando, например, из рук в руки Текели, используют комбинированную верстку.

Верстка с технической стороны напоминает позиционирование элементов, лучше всего замените тег на

и работать станет легче.

Итак, исходя из всего сказанного выше можно сделать вывод о том, что слои позволяют дизайнеру пофантазировать вволю, именно поэтому они так и популярны и любая студия дизайна с удовольствием берет их на вооружение, но в то же время несколько сложны в плане исполнения. Кроме того, стандарт восприятия браузерами отсутствует. И еще одно: может случиться так, что сверстанный вами сайт не будет выглядеть также идеально в Internet Explorer, поэтому от использования таблиц отказаться практически невозможно. Но все же у слоев в плане верстки больше возможностей, но при условии, что все ошибки будут устранены.

Верстка: делаем это грамотно

K_E_V_in — Thu, 07 Oct 2010 11:51:45 +0000

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

Слои — элемент HTML-кода, внедряемый в веб-страницу при помощи размещения одного элемента над другим и чтобы изменить параметры используется язык JavaScript или VBScipt, ведь именно благодаря им возможно применение разных эффектов на странице сайта. Среди таких эффектов чаще всего можно встретить: плавающие окна или вращающиеся надписи. В качестве наглядного примера можно привести доску объявлений Slando, где можно купить gps навигаторы по низким ценам.

Конечно же каждый слой имеет декартовые координаты, причем следует отметить, что слой с самым большим значением помещается сверху, имеются и другие координаты:top (отступ от верхнего края экрана), left (отступ от левого края экрана), z-index (место расположения отдельного слоя), каждый слой задается контейнером . Такие конструкции часто применяются на современных вебдванольных сайтах, например на ресурсе красота и здоровье. И в этом ничего плохого нет, даже наоборот!

Продолжим про верстку таблицами

K_E_V_in — Tue, 28 Sep 2010 14:42:29 +0000

Люблю я поднимать спорные темы. Таблицы мы начали обсуждать здесь. Неопытные веб-мастера любят пользоваться таблицами больше, чем другими способами верстки в основном, из-за довольно простых методов расположения различных элементов сайта на странице. Ели применение слоев предполагает довольно глубокие знания VBScript или JavaScript, то с таблицами все немного проще: достаточно разбираться в основах HTML и составить примерный макет вашего будущего сайта. Тем более, что с таблицами можно встретить много порталов, сайты, где предлагается продажа авто – не исключение

Перечислим главные особенности верстки с помощью таблиц, и уже анализируя полученную информацию, определим, насколько выгодна работа с использованием подобной методики. Итак, при помощи таблиц можно:
- Выравнивать элементы относительно каркаса таблицы.
- Формировать «резиновый» макет (ширина сайта может автоматически меняться в зависимости от разрешения монитора пользователя и параметров веб-браузера).
- Уменьшать объем веб-страницы, разрезая графические элементы и рисунки на несколько частиц. Затем эти кусочки помещают в таблицу, где и происходит их «склеивание».
- Создавать сайты, обладающие такими свойствами и параметрами, которые понятны большинству используемых веб-браузеров.
Конечно, табличная верстка имеет свои недостатки (дольше грузится сайт, слишком длинный код, плохо индексируется). Но их довольно легко обойти, к примеру, размеры таблицы лучше отображать в процентах, вместо пикселей, применять нулевую толщину бордюра, всевозможные распорки. Что касается индексации поисковыми системами – придется больше времени уделить мета-тегам. Если у вас свой собственный интернет магазин ноутбуков, то вы смело можете использовать табличную верстку!

Удобство верстки при помощи таблиц. Да или нет?

K_E_V_in — Wed, 22 Sep 2010 10:30:59 +0000

Что бы ни говорили о таблицах: то пользоваться ими неудобно, то качественный сайт про автостекла при их помощи нельзя сделать и вообще, все пользуются более современными технологиями, а опытные веб-мастера, как прежде, пользуются таблицами, и, похоже, ближайшим временем не собираются отказываться от такого способа верстки сайтов. Хотите знать, какие преимущества у применения таблиц и насколько значимы их недостатки? Тогда вам нужно читать дальше…

На языке HTML у понятия «таблица» есть два значения. Первое из них звучит так: таблицей называют специальную форму, предназначенную для размещения информации. Во втором значении таблица представлена, как средство для разметки веб-страниц. Мы будем рассматривать второе значение.

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

Flash + Highslide = проблема

K_E_V_in — Mon, 30 Aug 2010 07:32:32 +0000

Собственно, проблема не нова. При одновременном использовании на странице элементов flash-графики или роликов с ютуба и его аналогов (иногда заказчики хотят на свои страницы встраивать код, чтобы смотреть сериалы онлайн) вырисовалась такая штука: при увеличение хайслайдом картинки флэш элемент всегда оказывался поверх затемненного окна и перед самой картинкой. Естественно, с этим мириться никак не хочется. Поэтому пришлось искать решение.

Первое и самое простое решение: давайте в стилях пропишем флешке малый z-index. Пробовал – фиг вам! Ничего работать не будет.

Пришлось применять решение 100% работающее, правда не такое изящное, а именно ищем код нашей флешки и добавляем туда один параметр:

1	<param name="wmode" value="transparent" />

Сделаем это и для тега embed (чтобы корректно показывалось во всех без исключения браузерах)

1	wmode="transparent"

Если вы задумали поменять автомобиль, а свой продать ну никак не удается, то выкуп авто – это именно то, что вам нужно!