Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.

Виждам много хора да споделят своите фотографии в интернет в оригинален вид по техните сайтове или блогове. Намирам ги за мързеливи, след като може да се поднесе в по-замислен изглед.

Съществуват редица начини за постигане на тази цел. Нашата ще осъществим с помощта на вездесъщия CSS. Тази технология ще декорира снимките с желание възможно минимално палене на Photoshop.

Последвай ме ...

Ефект Двойна Рамка с Сянка

Double Border Effect with Shadow
Този ефект се постига чрез CSS 3. Потребители с браузър Internet Explore 8 и версия надолу, няма да видят ефекта. Те ще видят обикновена двойна рамка.

HTML
<img class="double-border" src="peperuda.jpg" alt="" />

CSS
img.double-border {
border: 5px solid #ddd;
/*outline:1px solid #cdcdcd;*/
padding: 5px;
background: #f2f2f2;
box-shadow:5px 5px 21px #6c6c6c;
-webkit-box-shadow:5px 5px 21px #6c6c6c;
-moz-box-shadow: 5px 5px 21px #6c6c6c;
}

В част HTML няма нищо интересно. Обичаен таг img с назначен клас double-border.

Същността се съдържа в част CSS. Нека подходим поетапно. Изпразваме съдържанието на класа. Браузърът ще покаже снимката в оригинален вид. Добавяме граница и задаваме значения: 5px, solid, #ddd. По този начин получаваме снимка с оцветена плътна граница и съответна ширина.

Снимка с двойна граница получаваме, ако добавим свойство отстъп (padding). Значение в пиксели ще обуслови ширината му. Тази граница ще бъде вътрешна или първа, а втора ще бъде зададената от наличната (border). Промяната на цвета на вътрешната граница става чрез задаване значение на фона (background).

Можем да постигнем и тройна рамка с помощта на свойство outline (за целта премахваме коментара). Неговите значения ще зададат визията на третата граница. Това свойство обаче не се отчита от браузъра като размер на блока и в съчетание с други може да наруши замисъла.

Ефект Тройна Рамка

Triple Border Effect

Ако декорацията ви се струва остра/ръбата, можете да добавите свойство oт CSS 3 - border. То ще придаде нужното заобляне на ъглите.

CSS
-webkit-border-radius:4px;
border-radius:4px;
-moz-border-radius:4px;

Ефект Сянка

Drop Shadow Effect
Internet Explorer до версия 8 не умее да интерпретира CSS 3 и създаване на помощна сянка става с допълнително фоново изображение. То е с размери 1000 х 1000 px, по-големи от нашата снимка, един вид запас.

HTML
<img class="shadow" src="peperuda.jpg" alt="" />

CSS
img.shadow {
background: url('background.png') no-repeat right bottom;
padding: 5px 14px 14px 5px;
}

В този случай се образува блок с външни размери зададени от същите на снимката. Зададените отстъпи (padding) в CSS-файла дават възможност да се позиционира фоновото изображение зад границите на снимката. Боравене с значенията определят видимостта на фоновото изображение. Горен ляв и долен десен ъгъл стоят отсечени и това прави нашата сянка неестествена.

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

Ефект Винетиране

buterfly


Винетиране идва от френската дума vignette. Това е затъмнение по краищата на кадъра в фотографията и оптиката. Причина е отслабването на преминаващия под ъгъл светлинен лъч по отношение на оптическата ос на потока лъчи в оптическата система. Забелязва се постепенно падане яркостта на изображението от центъра към неговите краища. Този дефект на обективите се ползва успешно като ефект в художествената фотография за акцентиране върху главния обект в композицията.

Подобно винетиране се постига с допълнително изображение съхранено в PNG формат. PNG-форматът дава възможност да се оперира с прозрачността. Особено тук е, че допълнителното изображение е с размери равни на основното и се ползва свойство z-index. Това свойство дава възможност за налагане на слоеве един над друг.


HTML
<div class="frame">
<img class="one" src="peperuda.jpg" alt="" />
<img src="frame.png" alt="" />
</div>

CSS
.frame {
position: relative;
margin: 0 auto;
}

.frame .one {
z-index:-1;
position: absolute;
}

Ефект Рамка на Снимката

Framed Image Effect

Този ефект ползва предварително подготвена рамка за основното изображение.


HTML
<div class="ramka">
<img src="images/parpar.jpg" alt="" />
</div>

CSS
.ramka {
margin: 0 auto;
background: url("ramka.jpg") no-repeat;
position: relative;
width:613px;
height:374px;
}

.ramka img{
position: absolute;
left:18px;
top:16px;

Ефект Описание

Image with Caption
Последвай ме и ще живея

Ефектът добавя описание на изображението. Конкретно примерът съдържа следния код.

HTML
<div class="img-desc">
<img src="peperuda.jpg" alt="" />
<span>описание на снимката</span>

CSS
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
margin: 0 auto;
}

.img-desc span {
background: #111;
-moz-opacity:.55;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom:-6px;
left: 0;
width: 555px;
padding: 10px 10px;
border-top: 1px solid #999;
font: 18px "Trebuchet MS";
}
Взаимствано от:sohtanaka




до нови срещи   ^.^

11.02.2011 profruit 

8 Response to "Декорация на изображения"

  1. am-am Said,

    Мерсаж за декорацията XD Това ми напомня, че ефекти за контури и сянка, може да приложа и по начина по който ми показа (некултурният - направо чрез span и т.н.) върху изображения, нал' тъй ^^
    Влязох да видя курса на долара и заварих тая тлъста пеперуда върху най-ароматното дърво което някога съм подушвал. Ухаят самите му листа, освен и цветовете, които се обагрят в различни цветове, според съзряването си, при това целогодишно окичващи това напарфюмирано растение. По-приятно ухание вероятно е само на камионите които извозват преварените тонове от розов цвят, носещи ги до лобното им място, катерейки планината. На село тази пара те блъска в прохладната вечер от розоварната (където преваряват и копър, по незнайни на мен причини) и направо те замайва. Мисля, че има някакви реакции достигайки в белите дробове, отпушва алвеоли и така както и чистия кислород, може и те дрогира до потъване в паралелни светове. Като червените мухоморки, които полярните елени зобали, скандинавците ги опитали и открили скандинавската митология.
    Живота е наркотик. И като такъв рано или късно те довършва...

     

  2. am-am Said,

    Лелее, знаеш ли какво искам ^^ Ей тоя стил който ползваш при писането на кода - сив фон и бяла рамка с обли краища. Нали ти казах, че го има при сестричката (palavni4e), но при друг шаблон не работи...

     

  3. Profruit Said,

    Tук всичко е по некултурния начин, така че бъди свободен да го приложиш където пожелаеш. Този стил е най-силен и забива вътрешния или глобалния, за некултурния. Ръчкай с Ctrl+U и замести моите с твоите снимки.
    Нека пеперудата те води към онези земи ...

     

  4. am-am Said,

    Красота!!!!! Чудесно се получи, благодаря за урокът :)))

     

  5. am-am Said,

    Добрият оплю и Фацебука и Скупето и... на кого ни остави, в каменната ера ни върна ^^
    Който има време да си го губи, тука ядена RAM и консумация на ток не вълнуват стадото.
    Ето нов епизод за сериала: http://www.youtube.com/watch?v=yPuC4Cy2ZuI
    Етикети:
    каляската на принца е с куц кон
    вълната година рани
    да би мирно видяло, не би чудо седяло
    ПП: Имаш поща XD

     

  6. am-am Said,

    Имам два въпроса ^^
    На този код (добавих пред дивовете интервал):
    < div style="background: url("АДРЕС НА ИЗОБРАЖЕНИЕ") repeat scroll 0% 0% rgb(225, 225, 225); color: rgb(48, 58, 70); padding: 10px;">
    ТЕКСТ
    < /div>
    за какво служи частта " repeat scroll 0% 0% rgb(225, 225, 225); color: rgb(48, 58, 70)"? В смисъл, и без нея работи, а и не разбирам какви цветове задаваме, щом задаваме за фон да се повтаря изображение.

    И втори въпрос: Как да създам вътрешна сянка. В смисъл да се прилага само за две страни.

    Поздрав :)

     

  7. Profruit Said,

    прочети този урок от Георги, той е уеб-дизайнер. там ще разбереш една тънкост на css: fridaycode.net/scalable-full-body-background-with-css/

    repeat свойство позволява да се зададе направление на повторение на фоновата картинка. значения: repeat | repeat-x | repeat-y | no-repeat | inherit

    rgb(225, 225, 225) е бял цвят и е значение на съкратен запис на background-color. картинката може да не се зареди или пък цвета й по границите да се слее с зададения цвят и да се постигне нужния ефект, например, да залее изцяло разрешенито на монитора. използвай този начин за задаване на цвят - #fff.

    scroll е значение на свойство background-attachment и означава, че ще се мести ако страницата се скролира.

    0% 0% идва от background-position и указва положение от горен ляв ъгъл в блока, в когото се намира фоновото изображение. 0% 0% ще го позиционира в горен ляв ъгъл, докато 50% 50% ще го лепне картинката по центъра на елемента. Тук:
    joro.me/blog/design/css-horizontally-and-vertically-center-element/

    Ако правилно съм разбрал втория въпрос-box-shadow на помощ с отрицателни значения.

     

  8. am-am Said,

    Благодаря :)
    Ще разгледам и урока.

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога