Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Навярно вече знаеш за разширените възможности, които CSS 3 ни предоставя. Благодарение на тях неща като оформяне на заоблени ъгли, прилагане на сянка към елемент и дори създаване на анимация са по-лесни от всякога. И това е само началото.

Установяването на CSS 3 като стандарт е все по-близо и голям брой уеб сайтове вече успешно го прилагат. Добрата новина е, че от днес ти също можеш да го използваш в своята уеб страница. Следващите няколко уеб сайта са няколко страхотни онлайн инструмента, които ще ти помогнат да положиш основите.

CSS3.me - CSS3 Generator

Чрез своя приятен и интуитивен интерфейс, CSS3.me ни предоставя възможност да манипулираме няколко CSS3 свойства като заоблени ъгли (border-radius), добавяне на сянка върху елемент (box-shadow), фон с два преливащи един към друг цвята (background-gradient) и прозрачност на елемент (opacity). Правоъгълника в дясно показва крайния резултат в реално време.

Линк към сайта

CSS3 Generator

Този инструмент има доста по-разширени възможности от предишния като ни дава възможност в реално време да пробваме някои от най-популярните в момента CSS3 свойства. Това включва border-radius, box-shadow, text-shadow, @font-face, transitions, transforms и други.

Линк към сайта

CSS3 Maker

Един страхотен и мулти-функционален CSS3 инструмент, който заслужава внимание. Всяка страница ни дава възможност да пробваме начина на работа на съответното свойство като резултатите са видими в реално време. Освен това в правоъгълника “Browser Compatibility” виждаме поддръжката на съответното свойство в най-популярните браузъри.

Линк към сайта

CSS-Tricks Button Maker

Оригинален инструмент, който е създаден за едно единствено нещо и това е лесното изработване на бутони. Лявата част ни показва резултата в реално време базиран на параметрите в дясно. При клик върху бутона се отваря малък прозорец с кода на бутона.

Линк към сайта

CSS3 Button Generator

Още един инструмент за създаване на бутони. В горната част на страницата виждаме крайния резултат. Под него се намират параметрите, които имаме възможност да променим, а в дясно от тях е HTML и CSS кода, който ще ни бъде нужен, за да поставим бутона в нашата уеб страница.

Линк към сайта

CSS3 Button Generator

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

Линк към сайта

CSS Gradient Generator

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

Линк към сайта

Използваш ли други подобни CSS3 инструмента? Сподели ги в коментарите след урока.

(Последна промяна на 18.05.2012)