ИнтернетВеб Дизајн

CSS сопственост "транспарентност" - едноставен начин да се направи сајт повеќе интересен дизајн

Денес, создавање на веб дизајн станува форма на уметност. Ова не е само збир на елементи од страната на одредена боја и големина, фонтови на различни стилови и тематски слики. Со цел да се направи вашиот сајт различен од другите, да го привлечат вниманието на посетителите и да го насочи на одредени елементи, кои се користат голем број на методи и алатки. Меѓу нив е многу популарна имотот CSS - транспарентност. Оваа техника е доста модерен и гламурозен, и затоа се користи често. Транспарентност може да даде различни предмети страници на сајтот - текстот блок или на целата слика, на пример. Таа, исто така се постигне на различни начини. Дозволете ни да ги испита подолу.

Параметри наведете елементи на транспарентност

Параметри за регулирање на транспарентноста на елементи на неколку. Тие се користат во зависност од специфични цели, како и на прелистувачот, што е во рамките на "прилагоди" дизајн. Тоа ги вклучува следните својства:

  • непроѕирноста;
  • филтер;
  • PNG-слика како позадина.

Вредност на имотот css "транспарентност" се менува како што следува: на повисок број, толку е пониско нивото на транспарентност на елементот. На транспарентноста, таа варира 0-1, во филтер - од 10 до 100. И таа се користи за Interet Explorer прелистувач, како и сите други применливи непроѕирноста сопственост.

Транспарентност на слика (промена)

Да почнеме со опции кои ќе се појават транспарентен кога ќе го поместите точка со влечење на глувчето.

Дозволете ни да се разгледа како да се определи на транспарентноста на сликата. CSS нуди две опции. За да го направите ова, мора да го регистрираат директно во HTML-документот код како што следува:

    1. Специфирајте ја патеката до сликата.
    2. Ние се дефинираат параметрите на транспарентност кога покажувачот не е. Да го направите ова, ние ги користиме на својствата на onmouseover и onmouseout, со кој се пропишува вредноста на транспарентноста, и филтер.

    Истите карактеристики може да се пропише во CSS-документи и изворниот код за да додадете упатување на него. Резултатите испаднат исти.

    Транспарентност на текст и страната блокови

    Како и за текст или блок (транспарентен div), CSS нуди на своите опција, сличен на создавање на транспарентен сликата, ќе мора да го користат поврзани CSS-фајл, во кој се поставени саканиот параметри. Можете да одат и поедноставен начин. Кога ќе се постави стил блок стил div или текст стр пропишува следниве HTML-кодот за да onmouseover и onmouseout елементи. И двете опции се работи и да се произведе посакуваниот резултат.

    постојана транспарентност

    Во некои случаи, транспарентноста на објектот, дизајн елемент или текстот што сакате да го поставите на континуирана основа. Во оваа ситуација, решението е уште поедноставно од кога ќе лебдат курсорот на глувчето.

    CSS елемент за транспарентност ќе биде дадена со следниов код. Во блок стил div пропишува вредности за позадина (на пример, # ff8800), непроѕирноста (на пример, 0,5) и ширината (ширина) и баласт (баласт).

    За сликата код вредности се прават и непроѕирноста филтер, и наведете патеката на сликата.

    RGBA-метод

    Постојат и други опции за користење на овој имот CSS: транспарентност може да се примени на база на боја на било кој дизајн елемент. Таа користи метод RGBA. Првите три букви се залагаме за основни бои (црвена, фисија, сина), а последните - алфа, кој го поставува нивото на транспарентност. Користење RGBA формат пропишува транспарентност, што укажува на последната цифра. На пример, како што се: позадина: RGBA (240,2,33,0.4035).

    заклучок

    Така, со помош во текот на работата на сајт дизајн едноставен, но ефективен функција css "транспарентност", може да се направи поинтересна и позначајно елементи со минимален напор. Опишан embodiments се сопствени карактеристики транспарентност ќе ви помогне со тоа.

    Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 mk.unansea.com. Theme powered by WordPress.