Categories
HTML, CSS, JavaScript School

…относно атрибут селекторите в CSS

Полезна статия : http://www.impressivewebs.com/attribute-selectors/

И нещо близко до темата : http://news.idg.bg/news/53495_ie9_razminava_chrome_firefox_opera_i_safari_po_html5_savmestimost?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+IdgbgNews+%28IDG.BG+-+News%29

Categories
HTML, CSS, JavaScript School

CSS3 – Градиенти

Беше ми малко интересно… та ето малко информация за градиентите в CSS 3.

Не е кой знае какво, но биха били много полезни примерно за някакви текстове – в красиви квадратчета със сянка и тн Smile примерно. Ми, направо да разгледаме…

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

и директен пример:

body{ background-color:#440951;

background-image: linear-gradient(top, #b032cb, #440951); }

– супер: просто нали? задава се от къде да “тече” градиента, начален и краен цвят. За радиал градиента е кажи речи същото, като тук имаме и възможност за форма – било то circle или ellipse. На мястото на size имаме стойности от тип closest-side, closest-corner, farthest-side, farthest-corner, contain и cover.

Но, както е споменато в един сайт- тез неща не се подържат в IE (дори и във версия 9)… така че… ще си почакаме. Всъщност- защо сайтовете да изглеждат еднакво под всички браузъри?!?

За повече информация посетете:

http://dev.w3.org/csswg/css3-images/#radial-gradients

http://www.leemunroe.com/css3-gradients/

…и нещо интересно: http://csswizardry.com/2010/10/are-css3-gradients-fools-gold/

Categories
HTML, CSS, JavaScript School

h1 или img за лого?

Попаднах на интересна статия, която съвпада с моето мнение за поставянето на h1 или img таг при изобразяването на лого на сайт. Най- кратко казано идеалният вариант е:

<a href="/" title="Return to the homepage" id="logo">
  <img src="/images/logo.gif" alt="Nike logo" />
</a>
...
<h1>Welcome to Nike's international website</h1>

 

…където логото е картинка, а <h1> – заглавие (описание и тн)!

Подробности тук: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Categories
HTML, CSS, JavaScript School

Полезно… добре реализирана CSS идея- стил според времето

http://line25.com/articles/style-your-site-according-to-the-weather-with-jquery

Categories
School

Интересно за background…

Попаднах на една интересна статия за бекграунда.

http://www.alistapart.com/articles/supersize-that-background-please/ – обърнете внимание на пропъртите background-size и възможността cover.

За подръжка обаче на  всички браузъри мога да препоръчам плъгинчето на jquery – supersize.

Categories
HTML, CSS, JavaScript School

CSS3 tooltips – нещо интересно…

 

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}

И резултатът :

tooltip-good-sm[1]

 

И виж тук дали се съпортва от твоят браузър 🙂

 

Тук ще попаднем и на момента, когато едновременно се показва нашият тултип и основния. Тогава на помощ идват новите атрибути от HTML5.

Categories
HTML, CSS, JavaScript School

The Mysterious Pseudo Class in CSS

Хубава статия за пседо-класовете в CSS… http://webtint.net/tutorials/the-mysterious-pseudo-class-in-css/

Categories
HTML, CSS, JavaScript

CSS3 и сянката…

Тъй… ако обичате сянката като мен… значи ще ви е интересно как се слага тя под CSS3. Направо давам пример:

text-shadow: 1px 1px 1px rgba(0,0,0,.3);

такаам… сега:

  • – първият 1 пикселче означава отместването по хоризонтала на сянката
  • – вторият 1 пиксел (следвам примера) е отместването по вертикала. (точно като на background-position)
  • – третият пиксел е за блърването на сянката- колкото повече, толкова по голямо разпръксване ще има. Ако изпишем 0, то сянката ще е солиден цвят, т.е. няма да е размита и леко прозрачна.
  • – четвъртото – rgba(0,0,0,.3) е цвета. Но сега ще ме попитате, какво е “,.3” и защо точно rgba – защото с този четвърти параметър отбелязваме прозрачността – в случая опаситито ще е 30%.

До тук говорехме за сянката на текствоете. Но какво е при кутийките?!?

box-shadow: 0 1px 7px rgba(0,0,0,.2); – тук параметрите са в същата подредба и ознчават същото като text-shadow.

Английски вариант на статийката тук : http://owltastic.com/2009/12/shadows-and-css3/