Онлайн CSS3 генератор с простым графическим интерфейсом - EnjoyCSS

EnjoyCSS - онлайн CSS3-генератор для создания крутых графических эффектов и получения их CSS кода. Можно отдельно изменять стили для различных состояний таких как :hover, :active и т.д. В ваши руки попадает интерфейс для создания сложных теней, градиентов, 3D эффектов, эффектов с текстом и многого другого. У проекта имеется своя галерея эффектов с которых можно начинать свою разработку. Отличительной чертой проекта является то, что можно получить стили для отдельного элемента, например для тени или градиента.

При первом заходе на сайт нам предлагаю создать заготовку для поля ввода, кнопки, блока или выбрать готовый шаблон из галереи проекта. Начнем с чего-то простого, например, с галереи геометрических фигур. Выбираем из галереи знак Инь-Янь и жмем "Get The Code" в правом верхнем углу:

Пошарив по разделам галереи мы видим кнопки, текстовые поля, эффекты непосредственно для текста, вышеупомянутые фигуры и наборы градиентов. Поиграемся с эффектами текста:

Должен заметить, что генерируемый CSS на удивление очень чист и читабелен, что очень радует. Давайте посмотрим на какую-нибудь симпатичную кнопочку:

К дополнительным фичам можно отнести сохранение вашего состояния в localStorage браузера. Если вы случайно закрыли вкладку, то при следующем заходе на сайт все ваши изменения останутся при вас.

При использовании нестандартных шрифтов с Google Fonts EnjoyCSS автоматически добавляет их в пример HTML. В моем случае для текст и кнопки это выглядит так:

<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
<link async href="http://fonts.googleapis.com/css?family=Syncopate" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>

Итоговый CSS довольно объемный, поэтому привожу его только в конце статьи:

.yin-yang {
 float:left;
 width: 96px;
 height: 48px;
 position: relative;
 border: 2px solid #f81;
 border-bottom-width: 50px;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
 color: rgba(0,0,0,1);
 -o-text-overflow: clip;
 text-overflow: clip;
 background: rgba(255,255,255,1);
 -webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
 transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
 
}

.yin-yang::before {
 width: 12px;
 height: 12px;
 position: absolute;
 content: "";
 top: 50%;
 left: 0;
 border: 18px solid #f81;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
 color: rgba(0,0,0,1);
 -o-text-overflow: clip;
 text-overflow: clip;
 background: rgba(255,255,255,1);
 text-shadow: none;
 -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
 transform: scaleX(1) scaleY(1) scaleZ(1) ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
}

.yin-yang::after {
 width: 12px;
 height: 12px;
 position: absolute;
 content: "";
 top: 50%;
 left: 50%;
 border: 18px solid rgba(255,255,255,1);
 -webkit-border-radius: 100%;
 border-radius: 100%;
 font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
 color: rgba(0,0,0,1);
 -o-text-overflow: clip;
 text-overflow: clip;
 background: #f81;
 text-shadow: none;
 -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
 transform: scaleX(1) scaleY(1) scaleZ(1) ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
}

.enjoy-css-3dtext {
 cursor: pointer;
 border: none;
 font: normal normal normal 72px/normal "Passero One", Helvetica, sans-serif;
 color: rgba(255,255,255,1);
 text-align: center;
 -o-text-overflow: clip;
 text-overflow: clip;
 text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
 -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
 -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
 -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
 transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
 -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
 transform: scaleX(1) scaleY(1) scaleZ(1) ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
}

.enjoy-css-3dtext:hover {
 color: rgba(169,214,169,1);
 text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
 -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
 -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
 -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
 transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.feedback-button {
 display: inline-block;
 float: left;
 position: relative;
 cursor: pointer;
 margin: 0 2% 0 0;
 padding: 12px 22px;
 overflow: hidden;
 border: none;
 font: normal normal bold 1.6em/normal "Syncopate", Helvetica, sans-serif;
 color: #ecf0f1;
 -o-text-overflow: clip;
 text-overflow: clip;
 background: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
 background: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
 background: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
 background-position: 50% 50%;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: auto auto;
 background-size: auto auto;
 -webkit-box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
 box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
 text-shadow: 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196,80,78) , 4px 4px 0 rgb(196,80,78) , 5px 5px 0 rgb(196,80,78) , 6px 6px 0 rgb(196,80,78) , 7px 7px 0 rgb(196,80,78) , 8px 8px 0 rgb(196,80,78) , 9px 9px 0 rgb(196,80,78) , 10px 10px 0 rgb(196,80,78) , 11px 11px 0 rgb(196,80,78) , 12px 12px 0 rgb(196,80,78) , 13px 13px 0 rgb(196,80,78) , 14px 14px 0 rgb(196,80,78) , 15px 15px 0 rgb(196,80,78) , 16px 16px 0 rgb(196,80,78) , 17px 17px 0 rgb(196,80,78) , 18px 18px 0 rgb(196,80,78) , 19px 19px 0 rgb(196,80,78) , 20px 20px 0 rgb(196,80,78) , 21px 21px 0 rgb(196,80,78) , 22px 22px 0 rgb(196,80,78) , 23px 23px 0 rgb(196,80,78) , 24px 24px 0 rgb(196,80,78) , 25px 25px 0 rgb(196,80,78) , 26px 26px 0 rgb(196,80,78) , 27px 27px 0 rgb(196,80,78) , 28px 28px 0 rgb(196,80,78) , 29px 29px 0 rgb(196,80,78) , 30px 30px 0 rgb(196,80,78) , 31px 31px 0 rgb(196,80,78) , 32px 32px 0 rgb(196,80,78) , 33px 33px 0 rgb(196,80,78) , 34px 34px 0 rgb(196,80,78) , 35px 35px 0 rgb(196,80,78) , 36px 36px 0 rgb(196,80,78) , 37px 37px 0 rgb(196,80,78) , 38px 38px 0 rgb(196,80,78) , 39px 39px 0 rgb(196,80,78) , 40px 40px 0 rgb(196,80,78) , 41px 41px 0 rgb(196,80,78) , 42px 42px 0 rgb(196,80,78) , 43px 43px 0 rgb(196,80,78) , 44px 44px 0 rgb(196,80,78) , 45px 45px 0 rgb(196,80,78) , 46px 46px 0 rgb(196,80,78) , 47px 47px 0 rgb(196,80,78) , 48px 48px 0 rgb(196,80,78) , 1px 1px 0 rgba(196,80,78,0.980392) , 2px 2px 0 rgba(196,80,78,0.960784) , 3px 3px 0 rgba(196,80,78,0.941176) , 4px 4px 0 rgba(196,80,78,0.921569) , 5px 5px 0 rgba(196,80,78,0.901961) , 6px 6px 0 rgba(196,80,78,0.882353) , 7px 7px 0 rgba(196,80,78,0.862745) , 8px 8px 0 rgba(196,80,78,0.843137) , 9px 9px 0 rgba(196,80,78,0.819608) , 10px 10px 0 rgba(196,80,78,0.8) , 11px 11px 0 rgba(196,80,78,0.780392) , 12px 12px 0 rgba(196,80,78,0.760784) , 13px 13px 0 rgba(196,80,78,0.741176) , 14px 14px 0 rgba(196,80,78,0.721569) , 15px 15px 0 rgba(196,80,78,0.701961) , 16px 16px 0 rgba(196,80,78,0.682353) , 17px 17px 0 rgba(196,80,78,0.658824) , 18px 18px 0 rgba(196,80,78,0.639216) , 19px 19px 0 rgba(196,80,78,0.619608) , 20px 20px 0 rgba(196,80,78,0.6) , 21px 21px 0 rgba(196,80,78,0.580392) , 22px 22px 0 rgba(196,80,78,0.560784) , 23px 23px 0 rgba(196,80,78,0.541176) , 24px 24px 0 rgba(196,80,78,0.521569) , 25px 25px 0 rgba(196,80,78,0.498039) , 26px 26px 0 rgba(196,80,78,0.478431) , 27px 27px 0 rgba(196,80,78,0.458824) , 28px 28px 0 rgba(196,80,78,0.439216) , 29px 29px 0 rgba(196,80,78,0.419608) , 30px 30px 0 rgba(196,80,78,0.4) , 31px 31px 0 rgba(196,80,78,0.380392) , 32px 32px 0 rgba(196,80,78,0.360784) , 33px 33px 0 rgba(196,80,78,0.341176) , 34px 34px 0 rgba(196,80,78,0.317647) , 35px 35px 0 rgba(196,80,78,0.298039) , 36px 36px 0 rgba(196,80,78,0.278431) , 37px 37px 0 rgba(196,80,78,0.258824) , 38px 38px 0 rgba(196,80,78,0.239216) , 39px 39px 0 rgba(196,80,78,0.219608) , 40px 40px 0 rgba(196,80,78,0.2) , 41px 41px 0 rgba(196,80,78,0.180392) , 42px 42px 0 rgba(196,80,78,0.156863) , 43px 43px 0 rgba(196,80,78,0.137255) , 44px 44px 0 rgba(196,80,78,0.117647) , 45px 45px 0 rgba(196,80,78,0.0980392) , 46px 46px 0 rgba(196,80,78,0.0784314) , 47px 47px 0 rgba(196,80,78,0.0588235) , 48px 48px 0 rgba(196,80,78,0.0392157) , 50px 50px 0 rgba(196,80,78,0) ;
 -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
 transform: scaleX(1) scaleY(1) scaleZ(1) ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
}

.feedback-button:hover {
 text-align: center;
 background: -webkit-linear-gradient(-90deg, #ce6161 0, #ef6664 100%);
 background: -moz-linear-gradient(180deg, #ce6161 0, #ef6664 100%);
 background: linear-gradient(180deg, #ce6161 0, #ef6664 100%);
 background-position: 50% 50%;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: auto auto;
 background-size: auto auto;
}

.feedback-button:active {
 top: 5px;
 background: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
 background: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
 background: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
 background-position: 50% 50%;
 -webkit-background-origin: padding-box;
 background-origin: padding-box;
 -webkit-background-clip: border-box;
 background-clip: border-box;
 -webkit-background-size: auto auto;
 background-size: auto auto;
 -webkit-box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
 box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
}