CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/139/f63/23c/139f6323c63a813b63077d9042b28efb.png)
Этот генератор, безусловно, один из моих любимых, так как позволяют создавать более10 различных CSS3-эффектов, таких как закругленные углы, тень для текста, плавные переходы и многое другое.
css3generator.com
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/086/e45/ba9/086e45ba9e659de6ecb5bf65a6b1933a.png)
CSS градиенты это круто, но писать их вручную довольно сложно. Этот генератор поможет вам создать идеальный CSS-градиент, без головной боли.
colorzilla.com/gradient-editor
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/170/a48/5de/170a485dedab71b49e6921fbd0d55305.png)
На мой взгляд, это самый продвинутый CSS3-генератор кнопок, из доступных в Интернете. Настройте параметры, скопируйте сгенерированный код, и все готово!
css3button.net
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/3db/447/9b0/3db4479b0d0c89f8ee03416b9fac3688.png)
CSS3Gen — хороший генератор, который позволяет вам легко создавать полезные фрагменты CSS3 и копировать их прямо в ваши проекты. CSS3Gen заботится обо всех префиксах для различных браузеров.
css3gen.com
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/398/f2f/6f4/398f2f6f49a885cab16d6bc79e488bfc.png)
CSS3 Please является очень эффективным инструментом для тестирования CSS3-кода: просто измените CSS-стили с помощью редактора, и специальный блок будет мгновенно изменяться, так что вы мгновенно сможете увидеть сделанные вами изменения.
css3please.com
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/d75/e2f/97f/d75e2f97fd5a870d7b139ea815544f4e.png)
Если вы знакомы с Photoshop, нет никаких сомнений, что вам понравится Layer Style, генератор CSS3, повторяющий внешний вид популярной программы от Adobe.
layerstyles.org
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/e3d/a92/e9b/e3da92e9bc69acd5b7e7754856a4b260.png)
Как вы можете догадаться, этот инструмент поможет вам создать красивые границы для изображений. Просто и эффективно!
border-image.com
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/a7d/8e7/5e5/a7d8e75e5ff81bbc60f77902929b620b.png)
Internet Explorer уже десять лет является кошмаром верстальщиков, и, к сожалению, это закончится не скоро. Тем не менее, такие инструменты, как CSS3 Pie могут определенно помочь в создании IE-совместимого кода. Этот очень полезный генератор создает стили для Internet Explorer 6-9, способные отображать несколько наиболее полезных «украшательств» CSS3.
css3pie.com
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/2e9/970/c08/2e9970c08877b64719e27ecc036e5a2e.png)
С помощью этого инструмента, у каждого разработчика теперь есть простой способ для создания CSS-анимации. Префиксы поддерживается, поэтому вам не придется беспокоиться о совместимости с различными браузерами.
matthewlein.com/ceaser
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/e23/346/dcb/e23346dcb80fb1df3e5808ac5d2f18d7.png)
Хотите использовать причудливые шрифты на вашем сайте? Просто загрузите его на Font Squirrel Font-Face generator, и получите ваш CSS код, а также шрифт во всех форматах, необходимых для различных браузеров. Эта программа хорошо помогла в последние два года.
fontsquirrel.com/fontface/generator
Upd. 1 Подсказали еще неплохой CSS-генератор: css3.me
CSS3 Generator
![image](https://habrastorage.org/getpro/habr/post_images/139/f63/23c/139f6323c63a813b63077d9042b28efb.png)
Этот генератор, безусловно, один из моих любимых, так как позволяют создавать более10 различных CSS3-эффектов, таких как закругленные углы, тень для текста, плавные переходы и многое другое.
css3generator.com
CSS Gradient generator
![image](https://habrastorage.org/getpro/habr/post_images/086/e45/ba9/086e45ba9e659de6ecb5bf65a6b1933a.png)
CSS градиенты это круто, но писать их вручную довольно сложно. Этот генератор поможет вам создать идеальный CSS-градиент, без головной боли.
colorzilla.com/gradient-editor
CSS button generator
![image](https://habrastorage.org/getpro/habr/post_images/170/a48/5de/170a485dedab71b49e6921fbd0d55305.png)
На мой взгляд, это самый продвинутый CSS3-генератор кнопок, из доступных в Интернете. Настройте параметры, скопируйте сгенерированный код, и все готово!
css3button.net
CSS3Gen
![image](https://habrastorage.org/getpro/habr/post_images/3db/447/9b0/3db4479b0d0c89f8ee03416b9fac3688.png)
CSS3Gen — хороший генератор, который позволяет вам легко создавать полезные фрагменты CSS3 и копировать их прямо в ваши проекты. CSS3Gen заботится обо всех префиксах для различных браузеров.
css3gen.com
CSS3 Please
![image](https://habrastorage.org/getpro/habr/post_images/398/f2f/6f4/398f2f6f49a885cab16d6bc79e488bfc.png)
CSS3 Please является очень эффективным инструментом для тестирования CSS3-кода: просто измените CSS-стили с помощью редактора, и специальный блок будет мгновенно изменяться, так что вы мгновенно сможете увидеть сделанные вами изменения.
css3please.com
Layer Styles
![image](https://habrastorage.org/getpro/habr/post_images/d75/e2f/97f/d75e2f97fd5a870d7b139ea815544f4e.png)
Если вы знакомы с Photoshop, нет никаких сомнений, что вам понравится Layer Style, генератор CSS3, повторяющий внешний вид популярной программы от Adobe.
layerstyles.org
Border image generator
![image](https://habrastorage.org/getpro/habr/post_images/e3d/a92/e9b/e3da92e9bc69acd5b7e7754856a4b260.png)
Как вы можете догадаться, этот инструмент поможет вам создать красивые границы для изображений. Просто и эффективно!
border-image.com
CSS3 Pie
![image](https://habrastorage.org/getpro/habr/post_images/a7d/8e7/5e5/a7d8e75e5ff81bbc60f77902929b620b.png)
Internet Explorer уже десять лет является кошмаром верстальщиков, и, к сожалению, это закончится не скоро. Тем не менее, такие инструменты, как CSS3 Pie могут определенно помочь в создании IE-совместимого кода. Этот очень полезный генератор создает стили для Internet Explorer 6-9, способные отображать несколько наиболее полезных «украшательств» CSS3.
css3pie.com
CSS Easing Animation Tool
![image](https://habrastorage.org/getpro/habr/post_images/2e9/970/c08/2e9970c08877b64719e27ecc036e5a2e.png)
С помощью этого инструмента, у каждого разработчика теперь есть простой способ для создания CSS-анимации. Префиксы поддерживается, поэтому вам не придется беспокоиться о совместимости с различными браузерами.
matthewlein.com/ceaser
Font-Face generator
![image](https://habrastorage.org/getpro/habr/post_images/e23/346/dcb/e23346dcb80fb1df3e5808ac5d2f18d7.png)
Хотите использовать причудливые шрифты на вашем сайте? Просто загрузите его на Font Squirrel Font-Face generator, и получите ваш CSS код, а также шрифт во всех форматах, необходимых для различных браузеров. Эта программа хорошо помогла в последние два года.
fontsquirrel.com/fontface/generator
Upd. 1 Подсказали еще неплохой CSS-генератор: css3.me