Profruit banner

Умен звънец в openHAB

16 декември 2023

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

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...

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

Съществуват редица начини за постигане на тази цел. Нашата ще осъществим с помощта на вездесъщия 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. зайче Said,

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

     

  2. зайче Said,

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

     

  3. Profruit Said,

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

     

  4. зайче Said,

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

     

  5. зайче Said,

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

     

  6. зайче 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. зайче Said,

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

     

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

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

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