Въведение в CSS3 Част 2 – Рамки

В тази втора част от сериите за 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, свързани с текстовите ефекти.


7 Responses to “Въведение в CSS3 Част 2 – Рамки”

  1. Desi Docheva says:

    Ще има ли статия за хакването на по-стари браузъри, за да заработят новите възможности на CSS3 и при тях???

    • Pavel Kolev says:

      Еми да със сигурност. Но първо трябва да сте запознати с js и затова подготвят js уроци, но тези седмици съм малко зает и може би след седмица две ще започна да ги пускам

  2. E.G. says:

    Интересно при горния пример градиента работи само във FF,
    а сянката само във Chrome ,досега не бях виждал нещо
    което работи във FF да не работи във Chrome

  3. tini says:

    Здравейте!
    Мен ме вълнува защо не може да се използва border -radius i border-collapse едновременно и как да разрешим този проблем?
    Благодаря!

    • Pavel Kolev says:

      мммм до колкото разбирам искаш да си направиш всяка клетка със заоблени ъгли. тогава трябва да пробваш нещо такова:
      table
      {
      border-spacing: 0
      }
      td, th
      {
      border:1px solid black;
      border-radius: 10px;
      }

  4. aglika says:

    Хубави статии, но имам следното предложение, за да бъдеш полезен и на начинаещите,
    когато даваш примери, би било добра практика да даваш повече обяснения на това кое какво манипулира в кода.
    Например:

    -webkit-box-shadow: 10px 10px 5px #888;
    примерно: – webkit-box-shadow: (distance bottom, distance right, spread, color);
    или какво се променя с 10px и какво с 5px и т.н.

    Това няма да направи постовете ти много по-дълги, но определено ще са по-полезни.

  5. You are my inspiration , I possess few web logs and infrequently run out from to post .

Leave a Reply to E.G. Cancel reply

Your email address will not be published. Required fields are marked *