Уеб Стыле Схеетс
CSS типс & Трицкс

Заобљени углови и осенченом кутије

CSS3 имати својства како би заокрул̌ује границе, граница се састоји од слика и кутије са сенке, али са неким раду можете симулира неки од њих већ са CSS2 - и без икаквих додатних столова или марк-уп.

Ова страница је инспирисали једном цреатед бы Арве Берсвендсен. Он је много више интересантних CSS демо.

Наравно, заокружено граница и сенке ће бити много једноставније са CSS3. На пример, да ће дати става дебелим црвеним граници са заобљеним угловима, те би требао праведан два реда CSS3 сличну овој:

P { border: solid thick red;
    border-radius: 1em }

И за додавање мутних дроп схадоу пола ем испод и десно од става, само један ред би да буде довољно:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Можете пробати овде, ако већ то ради.) Али ако треба да их сада и не виду комплексност и недостатак флексибилности, можете користити технику испод. У најмању руку да ће бити леп тест лак за прегледаче ...

Пет слика на један елемент

Главни трик је да користите генериран садржај ( '::before' и ': ::after') ставити четири слике на додатни елемент. Тхе '::before' Псеудо-елемент може имати позадинску слику, а плану је '::after' Псеудо-елемент такође, и сама по себи елемент може имати позадину, за укупно пет слика.

Ми стварамо пет PNG слике и ставите их у четири угла и на десни руб елемента. Ево слике:

горњем левом углу:

врх руба и горњем десном углу:

средњи део и десни ивица:

доњем левом углу:

доњег руба и дна десном углу:

И ту су CSS правила за њихово позиционирање:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Будући да је наша позадинску слику 620пкс ширине, не можемо допустити кутије шира од 620пкс, без добијања празнине. Тај зашто 'max-width' власништво је тамо. Тхе 'display: block' власништво је потребно да бисте били сигурни да ће генериран садржај кутије облика властите изнад и испод главне садржају, уместо да буду убачене на први и последњи ред. Тхе 'line-height: 0' осигурава да нема простора за лево отворен за асцендерс и десцендерс изнад и испод слике у 'content' власништво.

Резултат

И овде је како то изгледа:

HTML изворни је стварно више него што би требао бити:

<blockquote>
<p>Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
</blockquote>

А ако желите тестирати ако ваш прегледач могу то учинити већ у CSS3-стазни, можете пробати то овде.

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices