Съществуват редица начини за постигане на тази цел. Нашата ще осъществим с помощта на вездесъщия CSS. Тази технология ще декорира снимките с желание възможно минимално палене на Photoshop.
Последвай ме ...
Ефект Двойна Рамка с Сянка
Този ефект се постига чрез CSS 3. Потребители с браузър Internet Explore 8 и версия надолу, няма да видят ефекта. Те ще видят обикновена двойна рамка.
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 (за целта премахваме коментара). Неговите значения ще зададат визията на третата граница. Това свойство обаче не се отчита от браузъра като размер на блока и в съчетание с други може да наруши замисъла.
Ефект Тройна Рамка
Ако декорацията ви се струва остра/ръбата, можете да добавите свойство oт CSS 3 - border. То ще придаде нужното заобляне на ъглите.
border-radius:4px;
-moz-border-radius:4px;
Ефект Сянка
Internet Explorer до версия 8 не умее да интерпретира CSS 3 и създаване на помощна сянка става с допълнително фоново изображение. То е с размери 1000 х 1000 px, по-големи от нашата снимка, един вид запас.
background: url('background.png') no-repeat right bottom;
padding: 5px 14px 14px 5px;
}
В този случай се образува блок с външни размери зададени от същите на снимката. Зададените отстъпи (padding) в CSS-файла дават възможност да се позиционира фоновото изображение зад границите на снимката. Боравене с значенията определят видимостта на фоновото изображение. Горен ляв и долен десен ъгъл стоят отсечени и това прави нашата сянка неестествена.
Този пример учи, че главната снимка и зададените й отстъпи се явяват маска на фоновото изображение, което е еднозначно обяснение, защо то е по-голямо по размер от главната снимка.
Ефект Винетиране
Винетиране идва от френската дума vignette. Това е затъмнение по краищата на кадъра в фотографията и оптиката. Причина е отслабването на преминаващия под ъгъл светлинен лъч по отношение на оптическата ос на потока лъчи в оптическата система. Забелязва се постепенно падане яркостта на изображението от центъра към неговите краища. Този дефект на обективите се ползва успешно като ефект в художествената фотография за акцентиране върху главния обект в композицията.
Подобно винетиране се постига с допълнително изображение съхранено в PNG формат. PNG-форматът дава възможност да се оперира с прозрачността. Особено тук е, че допълнителното изображение е с размери равни на основното и се ползва свойство z-index. Това свойство дава възможност за налагане на слоеве един над друг.
<img class="one" src="peperuda.jpg" alt="" />
<img src="frame.png" alt="" />
</div>
position: relative;
margin: 0 auto;
}
.frame .one {
z-index:-1;
position: absolute;
}
Ефект Рамка на Снимката
Този ефект ползва предварително подготвена рамка за основното изображение.
<img src="images/parpar.jpg" alt="" />
</div>
margin: 0 auto;
background: url("ramka.jpg") no-repeat;
position: relative;
width:613px;
height:374px;
}
.ramka img{
position: absolute;
left:18px;
top:16px;
Ефект Описание
Ефектът добавя описание на изображението. Конкретно примерът съдържа следния код.
<img src="peperuda.jpg" alt="" />
<span>описание на снимката</span>
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";
}
до нови срещи ^.^
Мерсаж за декорацията XD Това ми напомня, че ефекти за контури и сянка, може да приложа и по начина по който ми показа (некултурният - направо чрез span и т.н.) върху изображения, нал' тъй ^^
Влязох да видя курса на долара и заварих тая тлъста пеперуда върху най-ароматното дърво което някога съм подушвал. Ухаят самите му листа, освен и цветовете, които се обагрят в различни цветове, според съзряването си, при това целогодишно окичващи това напарфюмирано растение. По-приятно ухание вероятно е само на камионите които извозват преварените тонове от розов цвят, носещи ги до лобното им място, катерейки планината. На село тази пара те блъска в прохладната вечер от розоварната (където преваряват и копър, по незнайни на мен причини) и направо те замайва. Мисля, че има някакви реакции достигайки в белите дробове, отпушва алвеоли и така както и чистия кислород, може и те дрогира до потъване в паралелни светове. Като червените мухоморки, които полярните елени зобали, скандинавците ги опитали и открили скандинавската митология.
Живота е наркотик. И като такъв рано или късно те довършва...
Лелее, знаеш ли какво искам ^^ Ей тоя стил който ползваш при писането на кода - сив фон и бяла рамка с обли краища. Нали ти казах, че го има при сестричката (palavni4e), но при друг шаблон не работи...
Tук всичко е по некултурния начин, така че бъди свободен да го приложиш където пожелаеш. Този стил е най-силен и забива вътрешния или глобалния, за некултурния. Ръчкай с Ctrl+U и замести моите с твоите снимки.
Нека пеперудата те води към онези земи ...
Красота!!!!! Чудесно се получи, благодаря за урокът :)))
Добрият оплю и Фацебука и Скупето и... на кого ни остави, в каменната ера ни върна ^^
Който има време да си го губи, тука ядена RAM и консумация на ток не вълнуват стадото.
Ето нов епизод за сериала: http://www.youtube.com/watch?v=yPuC4Cy2ZuI
Етикети:
каляската на принца е с куц кон
вълната година рани
да би мирно видяло, не би чудо седяло
ПП: Имаш поща XD
Имам два въпроса ^^
На този код (добавих пред дивовете интервал):
< 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)"? В смисъл, и без нея работи, а и не разбирам какви цветове задаваме, щом задаваме за фон да се повтаря изображение.
И втори въпрос: Как да създам вътрешна сянка. В смисъл да се прилага само за две страни.
Поздрав :)
прочети този урок от Георги, той е уеб-дизайнер. там ще разбереш една тънкост на 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 на помощ с отрицателни значения.
Благодаря :)
Ще разгледам и урока.