В тази втора част от сериите за CSS3 ще обърнем внимание на рамките. Всеки, използващ CSS е запознат с тях – един чудесен начин за структуриране на презентацията на документ, създаване на ефекти около изображения и т.н.
CSS3 вдига рамките едно ниво нагоре, предоставяйки възможности за използването на градиенти, заоблени ръбове, сенки и рамкови изображения. Ще разгледаме всяко едно по отделно с примерчета, където е възможно.
Забележка: Възможно е част от примерите да не ви се визуализират, ако използвате по – стари browser-и.
Заоблени рамки
Използването на заоблени рамки с CSS може да е малко подвеждащо – има най – различни начини, по които това може да бъде постигнато. Например създаване на отделно изображение за всеки ъгъл, използване на 2 елемента един под друг с различно фоново изображение и т.н. Използвайки CSS3, създаването на заоблени рамки е ужасно лесно. Може да задавате заобленост на всеки ъгъл по отделно, както и цвят и дебелина.
.border_rounded {
background-color: #ddccb5;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}
NOTE: Префиксите -moz- и -webkit- в случая са, за да се помогне на съответните browser-и със по стари версии, ако имат възможност да визуализират искания ефект. С времето тези префикси ще отпаднат когато съответния модул бъде напълно покрит от съответния browser.
NOTE 2: Можете да задавате и поотделно радиуса на закръгляне на всеки един ъгъл (border-top-left-radius и т.н.) като по този начин можете да постигнете интересни резултати.
Ето и кода от този пример
.freaky_border {
background-color: #ddccb5;
height: 35px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
В случая използваме съкратения запис за задаване на заобляне на рамката. Първите четири стойности които задаваме са за хоризонталния радиус на рамката. След това като допълнение можем да сложим “/” последвано от още 4 стойности за вертикалния радиус на рамката. (В случая използваме само по 2 стойности защото горе,долу и ляво,дясно искаме да са ни еднакви)
Градиенти
Градиентните рамки могат да изглеждат доста ефектно, ако са използвани правилно. Следващият код е малко по – сложен, защото трябва да дефинирате всеки цвят от градиента по отделно:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}
NOTE: Ако рамката ви се визуализира черна – browser-a ви не поддържа това стилизиране. Можете да пробвате да отворите страницата с друг browser.
Сенки
Добавянето на сянка на елемент беше сложничко преди CSS3, но сега лесно може да се използва за отделянето на даден елемент от други визуално.
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
border: 1px solid #000;
}
Рамково изображение
Рамковите изображения са също добро попълнение – все още не съм виждал много места, на които да се използват – явно хората не могат да се нарадват на останалите възможности на CSS3, но и тяхното време ще дойде. CSS3 има способностите да повтаря или разпъва рамково изображение по ваш избор. Примерен код може да е следния:
.border_image {
-webkit-border-image: url('border.png') 27 27 27 27 round round;
}
Заключение
Рамките еволюираха. С тези добавки CSS3 ви спестява огромно количество време като сайтаджия. Улеснява се рязането ви на дизайна и реализацията му след това. Не задълбах много в подробности, защото идеята ми е да добиете представа какви нови възможности имамe. Също така вече има доста безплатни сайтчета, от където автоматично можете да си генерирате различни css3 стилове.
В следващата част очаквайте малко за възможностите на CSS3, свързани с текстовите ефекти.
Loading ...
Ще има ли статия за хакването на по-стари браузъри, за да заработят новите възможности на CSS3 и при тях???
Еми да със сигурност. Но първо трябва да сте запознати с js и затова подготвят js уроци, но тези седмици съм малко зает и може би след седмица две ще започна да ги пускам
Интересно при горния пример градиента работи само във FF,
а сянката само във Chrome ,досега не бях виждал нещо
което работи във FF да не работи във Chrome
Здравейте!
Мен ме вълнува защо не може да се използва border -radius i border-collapse едновременно и как да разрешим този проблем?
Благодаря!
мммм до колкото разбирам искаш да си направиш всяка клетка със заоблени ъгли. тогава трябва да пробваш нещо такова:
table
{
border-spacing: 0
}
td, th
{
border:1px solid black;
border-radius: 10px;
}
Хубави статии, но имам следното предложение, за да бъдеш полезен и на начинаещите,
когато даваш примери, би било добра практика да даваш повече обяснения на това кое какво манипулира в кода.
Например:
-webkit-box-shadow: 10px 10px 5px #888;
примерно: – webkit-box-shadow: (distance bottom, distance right, spread, color);
или какво се променя с 10px и какво с 5px и т.н.
Това няма да направи постовете ти много по-дълги, но определено ще са по-полезни.
You are my inspiration , I possess few web logs and infrequently run out from to post .