Димитър Трепечов http://www.trepechov.com Thu, 19 Nov 2009 13:55:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Тема за iGoogle http://www.trepechov.com/useful/%d1%82%d0%b5%d0%bc%d0%b0-%d0%b7%d0%b0-igoogle/ http://www.trepechov.com/useful/%d1%82%d0%b5%d0%bc%d0%b0-%d0%b7%d0%b0-igoogle/#comments Wed, 04 Feb 2009 13:31:22 +0000 admin http://www.trepechov.com/?p=71 Отдава ползвам услугата за персонална начална страница, която google предлагат на своите потребители и доста се каних да седна и да направя една тема, която макар и проста да носи моето име.
Е това вече е факт!!!
Преди няколко дни я завърших и след известни трудности около одобряването й от страна на google моята тема вече е факт. Вижте я и даже вземете да си я сложите!

]]> http://www.trepechov.com/useful/%d1%82%d0%b5%d0%bc%d0%b0-%d0%b7%d0%b0-igoogle/feed/ 0 Текст със сянка в HTML http://www.trepechov.com/html-css/%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d1%81%d1%8a%d1%81-%d1%81%d1%8f%d0%bd%d0%ba%d0%b0-%d0%b2-html/ http://www.trepechov.com/html-css/%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d1%81%d1%8a%d1%81-%d1%81%d1%8f%d0%bd%d0%ba%d0%b0-%d0%b2-html/#comments Fri, 16 Jan 2009 22:26:25 +0000 admin http://www.trepechov.com/?p=70 Наскоро се натъкнах на един скрипт за stroke на текст и се пробвах да направя нещо подобно, тъй като решението, което предлага този скрипт, е доста тежко. Крайният резултат беше до толкова добър, че чак реших да седна и да опиша метода си.

  1. Създаваме два div-а с по един текст във всеки от тях и задаваме цветове. Както ще видите от кода, текста е поставен в span-ове.
    <body bgcolor="#999999">
        <div>
            <span style="color:#F00; font-size:36px;">Text with shadow</span>
        </div>
        <div>
            <span style="color:#F00; font-size:36px;">Text without shadow</span>
        </div>
    </body>

    htmlShadow1

  2. Добавяме още един надпис, който ще послужи за сянка на първия. Избираме цвят, който е нещо средно между цвета на текста и цвета на фона. Който има желание разбира се може да експериментира. Двата текста са подравнени по височина, затова top остава на 0px, а left зависи изцяло от дължината на текста, която в нашия случай е 260px.
    <body bgcolor="#999999">
        <div>
            <span style="color:#600; font-size:36px;">Text with shadow</span>
            <span style="color:#F00; font-size:36px;">Text with shadow</span>
        </div>
        <div>
            <span style="color:#F00; font-size:36px;">Text without shadow</span>
        </div>
    </body>

    htmlShadow2

  3. На текста, който ще е основен добавяме CSS параметри position, top и left, така че да покрие напълно тъмния текст, който ще играе ролята на сянка.
    <body bgcolor="#999999">
        <div>
            <span style="color:#600; font-size:36px;">Text with shadow</span>
            <span style="position:relative; top:0px; left:-260px; color:#F00; font-size:36px;">Text with shadow</span>
        </div>
        <div>
            <span style="color:#F00; font-size:36px;">Text without shadow</span>
        </div>
    </body>

    htmlShadow3

  4. За да достигнем до крайния ефект трябва да отместим горния текст с по 1px нагоре и наляво, т.е. намаляваме стойностите на top и left с единица.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Textshadow</title>
    </head>

    <body bgcolor="#999999">
        <div>
            <span style="color:#600; font-size:36px;">Text with shadow</span>
            <span style="position:relative; top:-1px; left:-261px; color:#F00; font-size:36px;">Text with shadow</span>
        </div>
        <div>
            <span style="color:#F00; font-size:36px;">Text without shadow</span>
        </div>
    </body>
    </html>

    htmlShadow4

Това са общо взето стъпките. Тестван е със IE7, IE6, FireFox3 и Chrome и навсякъде отместването е еднакво.
Като недостатък на метода може да се отбележи факта, че наместването на текста и сянката става на ръка, което прави невъзможна употребата на този метод в сегашния му вид при динамично генерирани текстове.
Не съм имал време за много тестове, така че може да има бъгове. При такива може да пишете коментари и аз ще се включа при решаването им.

]]> http://www.trepechov.com/html-css/%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d1%81%d1%8a%d1%81-%d1%81%d1%8f%d0%bd%d0%ba%d0%b0-%d0%b2-html/feed/ 1 Skype Avatar Resizer http://www.trepechov.com/scripts/skype-avatar-resizer/ http://www.trepechov.com/scripts/skype-avatar-resizer/#comments Sat, 11 Oct 2008 13:57:55 +0000 admin http://www.trepechov.com/?p=69 На скоро ми се наложи да напиша прост едитор за картинки и с малко пригаждане на готовия код се получи редактор, с който всеки може да обработи Skype аватара си така, че да изглежда добре.

Скрипта е базиран на Flash-интерфейс, с помощта, на който избирате как да изглежда Вашия аватар и един безплатен php-клас, който прави необходимите редакции.

Пробвайте го сами!

]]> http://www.trepechov.com/scripts/skype-avatar-resizer/feed/ 0 Кой е този шрифт? http://www.trepechov.com/useful/%d0%ba%d0%be%d0%b9-%d0%b5-%d1%82%d0%be%d0%b7%d0%b8-%d1%88%d1%80%d0%b8%d1%84%d1%82/ http://www.trepechov.com/useful/%d0%ba%d0%be%d0%b9-%d0%b5-%d1%82%d0%be%d0%b7%d0%b8-%d1%88%d1%80%d0%b8%d1%84%d1%82/#comments Tue, 05 Aug 2008 16:51:08 +0000 admin http://www.trepechov.com/?p=60 Често в работата ми се е налагало да разпознавам определен шрифт от картинка. Сигурен съм, че не съм един. На всички е познат класическия метод, при който се „изциклят“ всички налични шрифтове и се търси приликата. Освен досаден този метод не дава и гарантиран резултат.

И точно тук можете да си помогнете с http://www.myfonts.com/WhatTheFont/. Страница предлага на посетителите си възможност да „разпознае“ шрифт от определена от вас картинка, като анализира текста на нея. Гаранция при този метод също няма, но поне не отнема много време и усилия.

]]> http://www.trepechov.com/useful/%d0%ba%d0%be%d0%b9-%d0%b5-%d1%82%d0%be%d0%b7%d0%b8-%d1%88%d1%80%d0%b8%d1%84%d1%82/feed/ 1 PNG-прозрачност в Internet Explorer 6 http://www.trepechov.com/scripts/png-%d0%bf%d1%80%d0%be%d0%b7%d1%80%d0%b0%d1%87%d0%bd%d0%be%d1%81%d1%82-%d0%b2-internet-explorer/ http://www.trepechov.com/scripts/png-%d0%bf%d1%80%d0%be%d0%b7%d1%80%d0%b0%d1%87%d0%bd%d0%be%d1%81%d1%82-%d0%b2-internet-explorer/#comments Mon, 07 Jul 2008 20:01:19 +0000 admin http://www.trepechov.com/?p=55 Често при изграждането на един сайт дизайнът налага да се използват прозрачни или полупрозрачни елементи. Png-прозрачността е реализирана в новите браузъри, но не така стоят нещата с по-старите версии на Internet Explorer, който все още са доста разпространени сред интернет потребителите. Именно това налага сайтовете, който се изграждат, да са съобразени и с тях.

Съществуват множество техники за реализиране ефекта на прозрачност и полупрозрачност. Използването не gif-файлове е компромисен вариант налагащ ограничени към броя на цветовете, но той е приложим само в случаите на пълна прозрачност. В някой случаи ефект на полупрозрачност може да се постигне и чрез обикновени jpg-файлове, но при този метод доста често се наблюдават „бъгове”.

Еднозначно решение на този проблем няма, или поне аз не съм го открил до момента, но в зависимост от случая подбирам някое от следните решения, който с течение на времето са се оказали най-ефективни според мен.

Решенията описани по-долу са базирана върху употребата на png-файлове и няколко скрипта, който „връщат” прозрачността и полупрозрачност с помощта на DirectX в Internet Explorer 6 и предхождащите го версии на браузъра.

Ако png–файлове са използвани чрез <img>-тагове в HTML -a на сайта употребата на този скрипт е много ефективно и елегантно решение на проблема. Само поставете някъде в <head>-a на вашия сайт този код

<script src="pngimgfix.js" type="text/javascript"></script>

и скрипта автоматично ще обходи png-елементите в кода и ще направи необходимото, за да изглеждат „както трябва”.

Ако използвате png–файлове за фон на <div> или други HTML-елементи зададен посредством CSS може да използвате едни от двата варианта на този скрипт. Добавете към елемента, който има png-файл за фон следния стил

<div style="behavior:url(iefixScale.htc);"></div>

В случай, че фона се наслагва няколко пъти (background-repeat:repeat;) скрипта не реаги коректно. Следващите примерни показват разликите между двата варианта на този скрипт.

<div>-a, на който ще сложим фон

фона, който слагаме на <div>-a

резултат ако използваме scale-варианта (фонът се „разтяга“ върху цялата площ<div>-a)

резултат ако използваме crop-варианта (фонът се „нанася“ само веднъж в <div>-a *)

* При използване на crop-варианта background-position отпада т.е. фонът е винаги в горния ляв ъгъл.

]]> http://www.trepechov.com/scripts/png-%d0%bf%d1%80%d0%be%d0%b7%d1%80%d0%b0%d1%87%d0%bd%d0%be%d1%81%d1%82-%d0%b2-internet-explorer/feed/ 0 Air Force BG http://www.trepechov.com/projects/air-force-bg/ http://www.trepechov.com/projects/air-force-bg/#comments Sun, 29 Jun 2008 10:19:17 +0000 admin http://www.trepechov.com/?p=5 Собствен проект

Адрес: www.airforcebg.com

Дата: Ноември 2007

Участие: Създаване на дизайн, изготвяне на HTML темплейт и изработка на Flash-елементите

Партньори: Петър Воротников (PHP, MySQL)

Tехнологии: HTML, CSS, XML, Flash, ActionScript, PHP, MySQL

]]> http://www.trepechov.com/projects/air-force-bg/feed/ 0