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

7 страхотни онлайн CSS 3 инструмента 3

Сподели урока

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

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

CSS3.me - CSS3 Generator

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

CSS3.me - CSS3 Generator

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

CSS3 Generator

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

CSS3 Generator

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

CSS3 Maker

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

CSS3 Maker

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

CSS-Tricks Button Maker

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

CSS-Tricks Button Maker

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

CSS3 Button Generator

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

CSS3 Button Generator

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

CSS3 Button Generator

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

CSS3 Button Generator

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

CSS Gradient Generator

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

CSS Gradient Generator

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

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

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

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

3 страхотни коментара

  1. 1

    Иван Адамов
    10 юли 2012 23:41

    Много добре, тази статия ми хареса. Улеснява работата доста сериозно. :)

  2. 2

    Димитър
    14 септември 2012 14:24

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

  3. 3

    Джават Ушев (автор)
    15 септември 2012 20:11

    Благодаря за позитивния коментар. Надявам материалите и уроците в сайта да ти бъдат от полза. Също така, успех с твоя сайт :)

Твоят коментар

* - задължителни полета