Главная Верстка (html/css)
E-mail Печать PDF

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.

Thanks to the rapid adoption of HTML5 video appening right now, Video for Everybody sn’t the only solution around. Video for Everybody is for developers who either want something really simple they can quickly use on their blog or websites, or as a good starting point to develop their own custom solution. Video for Everybody is not a neatly packaged, fully-featured solution for non-developers.

Вставка видео без флеша

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

Комментарии (3)
 
E-mail Печать PDF

Более двух лет назад, в сентябре 2004 года я опубликовал статью под названием Styling. Моя цель в данной статье показать, что попытка использовать CSS, чтобы сделать форму, которая бы выгледела во всех браузерах и операционных систем одинаково, является бесполезным занатием. На данный момент это просто не может быть сделано.

После дискуссии о применении CSS для элементов форм, постоянно возникают новые версии браузеров и операционные системы, а также совершенно новые браузеры были выпущены в сентября 2004 года, пришло время для обновления.

Из-за всего этого я и потратил много времени на создание в общей сложности 224 скриншоты, демонстрирующих различные правила CSS применительно к формам управления. Скриншоты, взяты из 8 браузеров на 4 операционных систем, в общей сложности 14 различных комбинаций браузеров + ОС.

Styling form controls with CSS, revisited

Красивые картинки, которые можно заценить при создании различных пользовательских интерфейсов.

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

The CSS optimizer was originally developed by some awesome dudes over at CSS Tidy. They built the program and have made it free for everyone to use. I stumbled across their optimizer one day while looking for help with my CSS. I wanted to know the shortest way I could style a background of a web site without having to use all the "background-image" and "background-repeat" tags. I found some other optimizers which I tried, but none worked as well as CSS Tidy. It was actually hosted on some random CD Burning website. Why? I have no idea.

But after I posted about it on my blog, I noticed that a week later, the site no longer existed. I was bummed because I was trying to show my fellow designers at work this amazing utility. So I took the liberty and installed CSS Tidy on my own webserver and registerd cleancss.com. I also styled it up to my liking (see the grass green colors?). So now I can make sure this kick-ass CSS utility stays up forever. And gets used by web designers everywhere.

CleanCSS

Иногда хочется, что бы написанный код на CSS смотрелся красиво и радовал глаз, для этих целей идеально подойдет сервис CleanCSS, который возвращает наш CSS в удобочитаемом и приятном виде.

Добавить комментарий
 
E-mail Печать PDF

Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

  • Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  • Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  • W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  • sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  • Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Инструкция по установке Cufón

Помню, когда работал на фирме, геморроя со шрифтами было нереально много, только этим скриптом и спасались.

 
E-mail Печать PDF

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

Пример № 1 - используем в качестве закруглений, картинки в формате gif.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.ppp0{ position:relative;}
.ppp1{ background: url(1.gif) no-repeat  ; position:absolute; top:0px; display:block; width:100%; height:100%; }
.ppp2{ background:url(2.gif) no-repeat right top; position:absolute; top:0px; display:block; width:100%; height:100%;   left:0px;}
.ppp3{ background:url(3.gif) no-repeat left bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
.ppp4{ background:url(4.gif) no-repeat right bottom; position:absolute; top:0px; display:block; width:100%; height:100%;  left:0px;}
</style>
</head>
<body>
<b>Было</b>
  <div style="background: url(k1.jpg) no-repeat; display:block; width:425px; height:310px;" class="ppp0"></div>
<b>Стало</b>
     <div style="background: url(k1.jpg) no-repeat; display:block; width:425px; height:310px;" class="ppp0">
     <div class="ppp1"></div><div class="ppp2"></div><div class="ppp3"></div><div class="ppp4"></div>
     </div>      
</body>
</html>
 
E-mail Печать PDF

Не так давно столкнулся с проблемой, что введенный мною код через Geshi красиво отображается, но некрасиво растягивает страницу.

К примеру, такой кусок кода

1
бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла

отображался просто в одну строку.

Решение данной проблемы оказалось довольно простое. Дело в том, что тег pre по умолчанию  не допускает принудительного переноса строк. И все что нам нужно это вставить в css кусок кода, который сообщит браузером, что нужно принудительно делать перенос.

 


Авторизация

Nice Ajax Poll

Какое из моих расширений самое лучшее?

Статистика



Реклама